從零開始學 Web 之 CSS3（二）顏色模式，文字陰影，盒模型，邊框圓角，邊框陰影

時間 2019-11-17

標籤開始 web css3 css 顏色模式文字陰影模型邊框圓角欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......css

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！html

1、顏色模式

顏色模式有兩種：前端

RGBA

rgba(0,0,0,0.5); //黑色，透明度0.5git

HSLA（顏色(0~360)，飽和度(0%~100%)，明度(0%~100%)，透明度(0~1)）

紅橙黃綠青藍紫紅：顏色從 0~360 順序，各佔30度。好比紅色爲0，黃色爲120，綠色爲240。github

HSLA(0, 100%, 50%, 1); // 紅色不透明，飽和度100%，亮度50%web

明度默認是50%,通常建議保留50的值，若是加到100後，變成白色，降到0後爲黑色。瀏覽器

注意：微信

一、RGBA和HSLA中的透明度不會影響子元素的透明度，不具繼承性；學習

二、opacity 會影響子元素的透明度，子元素會繼承父元素的透明度。spa

三、transparent 不可調節透明度，始終徹底透明。（color: transparent;）

2、文字陰影

語法：

/*陰影能夠疊加，使用逗號隔開*/
text-shadow: offsetX offsetY blur color, 
             offsetX1 offsetY1 blur1 color1, ...

offsetX：X方向偏移度

offsetY：Y方向偏移度

blur：陰影的模糊度

color：陰影顏色

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .demo {
            width: 600px;
            padding: 30px;
            background-color: #666;
            margin: 20px auto;
            text-align: center;
            font: bold 80px/100% "微軟雅黑";
            color: #fff;
        }

        /*添加陰影 text-shadow:offsetX offsetY blur color*/
        .demo1 {
            text-shadow: -5px -5px 5px orange;
        }

        .demo2 {
            color: #000;
            text-shadow: 0 1px 0 #fff;
        }
        /*立體浮雕效果*/
        .demo3 {
            text-shadow: -1px -1px 0 red, 
                        -2px -2px 0 orange, 
                        -3px -3px 0 yellow,
                        -4px -4px 0 green, 
                        -5px -5px 0 cyan, 
                        -6px -6px 0 blue, 
                        -7px -7px 0 purple;
        }
        .demo4 {
            text-shadow: 0 0 30px pink;
        }
    </style>
</head>

<body>
    <div class="demo demo1">我是江小白</div>
    <div class="demo demo2">我是江小白</div>
    <div class="demo demo3">我是江小白</div>
    <div class="demo demo4">我是江小白</div>
</body>

</html>

3、盒模型

一、在默認狀況下，CSS 設置的盒子寬度僅僅是內容區的寬度，而非盒子的寬度。一樣，高度相似。真正盒子的寬度（在頁面呈現出來的寬度）和高度，須要加上一些其它的屬性。例如：

padding + border + width = 盒子的寬度
padding + border + height = 盒子的高度

很明顯，這不直觀，很容易出錯，形成網頁中其它元素的錯位。

二、CSS3中能夠經過box-sizing 來指定盒模型，便可指定爲content-box、border-box，這樣咱們計算盒子大小的方式就發生了改變。

content-box：對象的實際寬度等於設置的 width 值和 border、padding 之和。（盒子實際的寬度 = 設置的 width + padding + border）
border-box：對象的實際寬度就等於設置的width值，即便定義有 border 和 padding 也不會改變對象的實際寬度。（盒子實際的寬度 = 設置的 width），相應的盒子的內容的寬度或高度區間會變小。

三、瀏覽器的兼容性
IE8 及以上版本支持該屬性，Firefox 須要加上瀏覽器廠商前綴 -moz-，對於低版本的 IOS 和 Android 瀏覽器也須要加上 -webkit-

4、邊框圓角

使用 border-radius 屬性來設置圓角。

/*添加邊框圓角*/
/*1.設置一個值：四個角的圓角值都同樣*/
border-radius: 10px;
border-radius: 50%;

/*2.設置兩個值:第一個值控制左上/右下，第二個值控制右上/左下*/
border-radius: 10px 30px;

/*3.設置三個值：第一個值控制左上，第二值控制右上/左下，第三個值控制右下*/
border-radius: 10px 40px 60px;

/*4.設置四個值：左上  右上 右下 左下*/
border-radius: 10px 30px 60px 100px;

/*5.添加/是用來設置當前水平和垂直方向的半徑值：水平x方向/垂直y方向*/
border-radius: 100px/50px;

/*6.添加某個角點的圓角*/
border-radius: 0px 50px 0px 0px;
/*或者：border-上下-左右-radius:*/
border-top-right-radius: 100px;
border-top-left-radius: 100px;*/
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;

/*7.設置某個角點的兩個方向上的不一樣圓角*/
border-top-right-radius: 100px 50px;  /*設置上偏移100px，右偏移50px樣式的圓角*/
border-bottom-left-radius: 80px 40px; /*設置下偏移80px，左偏移40px樣式的圓角*/
border-bottom-right-radius: 60px 30px;/*設置下偏移60px，右偏移30px樣式的圓角*/
border-top-left-radius: 40px 20px;    /*設置上偏移40px，左偏移20px樣式的圓角*/

/*8.若是想設置四個角點的不一樣方向上的不一樣圓角值*/
/*分別是水平方向的偏移：左上，右上，右下，左下 ，垂直方向的偏移：左上，右上，右下，左下*/
border-radius: 100px 0px 0px 0px/20px 0px 0px 0px;

5、邊框陰影

語法：

box-shadow:h v blur spread color inset

h：水平方向的偏移值（必填）
v：垂直方向的偏移值（必填）
blur：模糊度--可選，默認0 （必填）
spread：陰影的尺寸，擴展和收縮陰影的大小--可選默認0
color：顏色--可選，默認黑色
inset：內陰影--可選,默認是外陰影

固然，box-shadow 和 text-shadow 同樣，也是能夠添加多個的，之間用逗號隔開。

box-shadow: 10px 10px 5px pink, 
           -10px -10px 5px pink; /*spread等不須要，省略不寫*/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。