CSS3屬性詳解（圖文教程）_ZenDei技術網路在線

本文最初發表於 "博客園" ，併在 "GitHub" 上持續更新前端的系列文章。歡迎在GitHub上關註我，一起入門和進階前端。以下是正文。前言我們在上一篇文章中學習了 "CSS3的選擇器" ，本文來學一下CSS3的一些屬性。本文主要內容：顏色文本盒模型中的 box sizing ...

本文最初發表於博客園，併在GitHub上持續更新前端的系列文章。歡迎在GitHub上關註我，一起入門和進階前端。

以下是正文。

前言

我們在上一篇文章中學習了CSS3的選擇器，本文來學一下CSS3的一些屬性。

本文主要內容：

顏色
文本
盒模型中的 box-sizing 屬性
處理相容性問題：私有首碼
邊框
背景屬性
漸變

顏色

CSS3中，有一種新的表示顏色的方式：RGBA或者HSLA。

RGBA、HSLA可應用於所有使用顏色的地方。

RGBA 舉例：

    background-color: rgba(0, 0, 255, 0.3);

    border: 30px solid rgba(0, 255, 0, 0.3);

解釋：

RGBA 即：Red、Green、Blue、Alpha
R、G、B 的取值範圍是：0~255

HSLA 舉例：

    background-color: hsla(240,50%,50%,0.4);

解釋：

H 色調，取值範圍 0~360。0或360表示紅色、120表示綠色、240表示藍色。
S 飽和度，取值範圍 0%~100%。值越大，越鮮艷。
L 亮度，取值範圍 0%~100%。亮度最大時為白色，最小時為黑色。
A 透明度，取值範圍 0~1。

如果不知道 H 的值該設置多少，我們不妨來看一下色盤：

推薦鏈接：配色寶典

關於設置透明度的其他方式：

（1）opacity: 0.3; 會將整個盒子及子盒子設置透明度。也就是說，當盒子設置半透明的時候，會影響裡面的子盒子。

（2）background: transparent; 可以單獨設置透明度，但設置的是完全透明（不可調節透明度）。

文本

text-shadow：設置文本的陰影

格式舉例：

    text-shadow: 20px 27px 22px pink;

參數解釋：水平位移垂直位移模糊程度陰影顏色。

效果舉例：

舉例：凹凸文字效果

text-shadow 可以設置多個陰影，每個陰影之間使用逗號隔開。我們來看個例子。

代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: #666;
        }

        div {
            font-size: 100px;
            text-align: center;
            font-weight: bold;
            font-family: "Microsoft Yahei";
            color: #666;
        }

        /* text-shadow 可以設置多個陰影，每個陰影之間使用逗號隔開*/
        .tu {
            text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
        }

        .ao {
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }
    </style>
</head>
<body>
<div class="ao">生命壹號</div>
<div class="tu">生命壹號</div>
</body>
</html>

效果如下：

上圖中，實現凹凸文字效果的方式比較簡單，給左上角放白色的陰影，右下角放黑色的陰影，就達到了凹下去的效果。

盒模型中的 box-sizing 屬性

我們在之前的文章中專門講過盒子模型。

CSS3 對盒模型做出了新的定義，即允許開發人員指定盒子寬度和高度的計算方式。

這就需要用到 box-sizing屬性。它的屬性值可以是：content-box、border-box。解釋如下。

外加模式：（css的預設方式）

    box-sizing: content-box;

解釋：此時設置的 width 和 height 是內容區域的寬高。盒子的實際寬度 = 設置的 width + padding + border。此時改變 padding 和 border 的大小，也不會改變內容的寬高，而是盒子的總寬高發生變化。

內減模式：【需要註意】

    box-sizing: border-box;

解釋：此時設置的 width 和 height 是盒子的總寬高。盒子的實際寬度 = 設置的 width。此時改變 padding 和 border 的大小，會改變內容的寬高，盒子的總寬高不變。

處理相容性問題：私有首碼

通過網址http://caniuse.com/ 可以查詢CSS3各特性的支持程度。

處理相容性問題的常見方法：為屬性添加私有首碼。

如此方法不能解決，應儘量避免使用，無需刻意去處理CSS3的相容性問題。

私有首碼的舉例：

比如說，我想給指定的div設置下麵這樣一個屬性：

    background: linear-gradient(left, green, yellow);

上面這個屬性的作用是：添加從左到右的線性漸變，顏色從綠色變為黃色。

如果直接這樣寫屬性，是看不到效果的：

此時，我們可以為瀏覽器添加不同的私有首碼，屬性就可以生效了。

格式如下：

    -webkit-: 谷歌 蘋果
    -moz-:火狐
    -ms-：IE
    -o-：歐朋

格式舉例如下：

    background: -webkit-linear-gradient(left, green, yellow);
    background: -moz-linear-gradient(left, green, yellow);
    background: -ms-linear-gradient(left, green, yellow);
    background: -o-linear-gradient(left, green, yellow);
    background: linear-gradient(left, green, yellow);

效果如下：

邊框

邊框的屬性很多，其中邊框圓角和邊框陰影這兩個屬性，應用十分廣泛，相容性也相對較好，且符合漸進增強的原則，需要重點熟悉。

邊框圓角：`border-radius` 屬性

邊框的每個圓角，本質上是一個圓，圓有水平半徑和垂直半徑：如果二者相等，就是圓；如果二者不等，就是橢圓。

單個屬性的寫法：

    border-top-left-radius: 60px 120px;        //參數解釋：水平半徑   垂直半徑

    border-top-right-radius: 60px 120px;

    border-bottom-left-radius: 60px 120px;

    border-bottom-right-radius: 60px 120px;

複合寫法：

    border-radius: 60px/120px;             //參數：水平半徑/垂直半徑

    border-radius: 20px 60px 100px 140px;  //從左上開始，順時針賦值。如果當前角沒有值，取對角的值

    border-radius: 20px 60px;

最簡潔的寫法：（四個角的半徑都相同時）

    border-radius: 60px;

舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        .parent {
            width: 400px;
        }
        .box {
            width: 100px;
            height: 100px;
            float: left;
            border: 1px solid rgb(144, 12, 63);
            margin: 20px;
            text-align: center;
            line-height: 100px;
            color: #fff;
            font-size: 50px;
            background-color: rgb(255, 141, 26);

        }

        /*畫圓形的方式一*/
        .box:nth-child(1) {
            border-radius: 100px;
        }

        /*畫圓形的方式二*/
        .box:nth-child(2) {
            border-radius: 50%;
        }

        .box:nth-child(3) {
            border-radius: 200px 0 0 0;
        }

        .box:nth-child(4) {
            border-radius: 100px/50px;
        }

        .box:nth-child(5) {
            border-radius: 10%;
        }

        .box:nth-child(6) {
            border-radius: 0 100px;
        }

    </style>
</head>
<body>

<div class="parent">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>
</body>
</html>

效果如下：

邊框陰影：`box-shadow` 屬性

格式舉例：

    box-shadow: 水平偏移 垂直偏移 模糊程度 陰影大小 陰影顏色

    box-shadow: 15px 21px 48px -2px #666;

參數解釋：

水平偏移：正值向右負值向左。
垂直偏移：正值向下負值向上。
模糊程度：不能為負值。

效果如下：

另外，後面還可以再加一個inset屬性，表示內陰影。如果不寫，則預設表示外陰影。例如：

    box-shadow:3px 3px 3px 3px #666 inset;

效果如下：

20180207_2028.png

註意：設置邊框陰影不會改變盒子的大小，即不會影響其兄弟元素的佈局。

我們還可以設置多重邊框陰影，實現更好的效果，增強立體感。

邊框圖片

邊框圖片有以下屬性：

    /* 邊框圖片的路徑*/
    border-image-source: url("images/border.png");

    /* 圖片邊框的裁剪*/
    border-image-slice: 27;

    /*圖片邊框的寬度*/
    border-image-width: 27px;

    /*邊框圖片的平鋪*/
    /* repeat :正常平鋪 但是可能會顯示不完整*/
    /*round: 平鋪 但是保證 圖片完整*/
    /*stretch: 拉伸顯示*/
    border-image-repeat: stretch;

我們也可以寫成一個綜合屬性：

     border-image: url("images/border.png") 27/20px round;

這個屬性要好好理解，我們假設拿下麵這張圖來作為邊框圖片：

這張圖片將會被“切割”成九宮格形式，然後進行平鋪。四個角位置、形狀保持不變，中心位置和水平垂直向兩個方向平鋪：

再具體一點：

背景屬性

背景屬性在 CSS3 中也得到很大程度的增強，比如背景圖片尺寸、背景裁切區域、背景定位參照點、多重背景等。

背景尺寸：`background-size`屬性

background-size屬性：設置背景圖片的尺寸。

格式舉例：

    /* 寬、高的具體數值 */
    background-size: 500px 500px;

    /* 寬高的百分比 */
    background-size: 50% 50%;   // 如果兩個屬性值相同，可以簡寫成：background-size: 50%;

    background-size: 100% auto;  //這個屬性可以自己試驗一下。

    /* cover：會自動調整縮放比例，保證圖片始終填充滿背景區域，如有溢出部分則會被隱藏。 */
    background-size: cover;

    /* contain：會自動調整縮放比例，保證圖片始終完整顯示在背景區域。  */
    background-size: contain;

這裡我們對屬性值 cover 和 contain進行再次強調：

cover：會自動調整縮放比例，保證圖片始終填充滿背景區域，如有溢出部分則會被隱藏。也就是說，保證背景圖片完全覆蓋盒子，但不能保證完整顯示。
contain：會自動調整縮放比例，保證圖片始終完整顯示在背景區域。也就是說，保證背景圖片最大化地在盒子里，等比例顯示，但不保證能鋪滿盒子。

背景原點：`background-origin` 屬性

background-origin 屬性：控制背景從什麼地方開始顯示。

格式舉例：


    /* 從 padding-box 內邊距開始顯示背景圖 */
    background-origin: padding-box;           //預設值

    /* 從 border-box 邊框開始顯示背景圖  */
    background-origin: border-box;

    /* 從 content-box 內容區域開始顯示背景圖  */
    background-origin: content-box;

如果屬性值設置成了border-box，那邊框部分也會顯示圖片哦。

如下圖所示：

背景裁剪：`background-clip`屬性

格式舉例：

background-clip: content-box; 超出的部分，將裁剪掉。屬性值可以是：

border-box 超出 border-box 的部分，將裁剪掉
padding-box 超出 padding-box 的部分，將裁剪掉
content-box 超出 content-box 的部分，將裁剪掉

假設現在有這樣的屬性設置：

    background-origin: border-box;

    background-clip: content-box;

上方代碼的意思是，背景圖片從邊框部分開始載入，但是呢，超出內容區域的部分將被裁減掉。

同時設置多個背景

我們可以給一個盒子同時設置多個背景，用以逗號隔開即可。可用於自適應局。

代碼舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            height: 416px;
            border: 1px solid #000;
            margin: 100px auto;
            /* 給盒子加多個背景，按照背景語法格式書寫，多個背景使用逗號隔開 */
            background: url(images/bg1.png) no-repeat left top,
            url(images/bg2.png) no-repeat right top,
            url(images/bg3.png) no-repeat right bottom,
            url(images/bg4.png) no-repeat left bottom,
            url(images/bg5.png) no-repeat center;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

實現效果如下：

上方代碼中，我們其實給盒子設置了五張小圖，拼成的一張大圖。當改變瀏覽器視窗大小時，可以自適應佈局。

漸變

漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少圖片的使用數量，並且具有很強的適應性和可擴展性。

漸變分為：

線性漸變：沿著某條直線朝一個方向產生漸變效果。
徑向漸變：從一個中心點開始沿著四周產生漸變效果。
重覆漸變。

見下圖：

註意，漸變屬於背景圖片屬性background-image的屬性值。我們依次來看一下。

線性漸變

格式：


    background-image: linear-gradient(方向, 起始顏色, 終止顏色);

    background-image: linear-gradient(to right, yellow, green);

參數解釋：

方向可以是：to left、to right、to top、to bottom、角度30deg（指的是順時針方向30°）。

格式舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 500px;
            height: 100px;
            margin: 10px auto;
            border: 1px solid #000;
        }

        /* 語法：
            linear-gradient(方向，起始顏色，終止顏色);
            方向：to left   to right  to top   to bottom 　角度　30deg
            起始顏色
            終止顏色
        */
        div:nth-child(1) {
            background-image: linear-gradient(to right, yellow, green);
        }

        /* 不寫方向，表示預設的方向是：從上往下 */
        div:nth-child(2) {
            background-image: linear-gradient(yellow, green);
        }

        /* 方向可以指定角度 */
        div:nth-child(3) {
            width: 100px;
            height: 100px;
            background-image: linear-gradient(135deg, yellow, green);
        }

        /* 0%的位置開始出現黃色，40%的位置開始出現紅色的過度。70%的位置開始出現綠色的過度，100%的位置開始出現藍色 */
        div:nth-child(4) {
            background-image: linear-gradient(to right,
            yellow 0%,
            red 40%,
            green 70%,
            blue 100%);

        }

        /* 顏色之間，出現突變 */
        div:nth-child(5) {
            background-image: linear-gradient(45deg,
            yellow 0%,
            yellow 25%,
            blue 25%,
            blue 50%,
            red 50%,
            red 75%,
            green 75%,
            green 100%
            );
        }

        div:nth-child(6) {
            background-image: linear-gradient(to right,
            #000 0%,
            #000 25%,
            #fff 25%,
            #fff 50%,
            #000 50%,
            #000 75%,
            #fff 75%,
            #fff 100%
            );

        }

    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

效果如下：

舉例：按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 漸變</title>
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: #f8fcd4;
        }

        .nav {
            width: 800px;
            text-align: center;
            padding-top: 50px;
            margin: 0 auto;
        }

        /*設置按鈕基本樣式*/
        .nav a {
            display: inline-block;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            border: 1px solid #e59500;
            background-color: #FFB700;
            background-image: linear-gradient(
                    to bottom,
                    #FFB700 0%,
                    #FF8C00 100%
            );
        }

    </style>
</head>
<body>
<div class="nav">
    <a href="javascript:;">導航1</a>
    <a href="javascript:;">導航2</a>
    <a href="javascript:;">導航3</a>
    <a href="javascript:;">導航4</a>
    <a href="javascript:;">導航5</a>
    <a href="javascript:;">導航6</a>
</div>
</body>
</html>

效果：

徑向漸變

格式：

    background-image: radial-gradient(輻射的半徑大小, 中心的位置, 起始顏色, 終止顏色);

    background-image: radial-gradient(100px at center,yellow ,green);

解釋：圍繞中心點做漸變，半徑是150px，從黃色到綠色做漸變。

中心點的位置可以是：at left right center bottom top。如果以像素為單位，則中心點參照的是盒子的左上角。

當然，還有其他的各種參數。格式舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 250px;
            height: 250px;
            border: 1px solid #000;
            margin: 20px;
            float: left;
        }

        /*
            徑向漸變：
            radial-gradient（輻射的半徑大小, 中心的位置，起始顏色，終止顏色）;
            中心點位置：at  left  right  center bottom  top
        */

        /*輻射半徑為100px，中心點在中間*/
        div:nth-child(1) {
            background-image: radial-gradient(100px at center, yellow, green);
        }

        /*中心點在左上角*/
        div:nth-child(3) {
            background-image: radial-gradient(at left top, yellow, green);
        }

        div:nth-child(2) {
            background-image: radial-gradient(at 50px 50px, yellow, green);
        }

        /*設置不同的顏色漸變*/
        div:nth-child(4) {
            background-image: radial-gradient(100px at center,
            yellow 0%,
            green 30%,
            blue 60%,
            red 100%);
        }

        /*如果輻射半徑的寬高不同，那就是橢圓*/
        div:nth-child(5) {
            background-image: radial-gradient(100px 50px at center, yellow, green);
        }

    </style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

效果如下：

舉例：利用徑向漸變和邊框圓角的屬性，生成按鈕。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 漸變</title>
    <style>

        div:nth-child(1) {
            width: 200px;
            height: 200px;
            margin: 40px auto;
            border-radius: 100px;
            background-color: yellowgreen;
        }

        div:nth-child(2) {
            width: 200px;
            height: 200px;
            margin: 40px auto;
            border-radius: 100px;
            background-color: yellowgreen;
            background-image: radial-gradient(
                    200px at 100px 100px,
                    rgba(0, 0, 0, 0),
                    rgba(0, 0, 0, 0.5)
            );
        }
    </style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

效果如下：

上圖中，給第二個div設置的透明度是從0到0.5。如果設置的透明度是從0到0，則樣式無變化，和第一個div一樣。如果設置的透明度是從1到1，則盒子是全黑的。

CSS3的更多屬性，且聽下文繼續。

我的公眾號

想學習代碼之外的軟技能？不妨關註我的微信公眾號：生命團隊（id：vitateam）。

掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：

CSS3屬性詳解（圖文教程）

前言

顏色

文本

text-shadow：設置文本的陰影

舉例：凹凸文字效果

盒模型中的 box-sizing 屬性

處理相容性問題：私有首碼

邊框

邊框圓角：border-radius 屬性

邊框陰影：box-shadow 屬性

邊框圖片

背景屬性

背景尺寸：background-size屬性

背景原點：background-origin 屬性

背景裁剪：background-clip屬性

同時設置多個背景

漸變

線性漸變

徑向漸變

我的公眾號

邊框圓角：`border-radius` 屬性

邊框陰影：`box-shadow` 屬性

背景尺寸：`background-size`屬性

背景原點：`background-origin` 屬性

背景裁剪：`background-clip`屬性