第七十四節，css邊框與背景

css邊框與背景

學習要點：
1.聲明邊框
2.邊框樣式
3.圓角邊框

 本章主要探討HTML5中CSS邊框和背景，經過邊框和背景的樣式設置，給元素增長更豐富的外觀。

 

聲明邊框
邊框的聲明有三個屬性設置，樣式表以下

           屬性                       值                           說明                                            CSS版本

      border-width            長度值                      設置邊框的寬度，可選                      1

      border-style              樣式名稱                  設置邊框的樣式，必選                       1

      border-color             顏色值                      設置邊框的顏色，可選                      1

這三個屬性值，只有border-style是必須聲明，才能夠出現邊框。而其餘兩個屬性會出現默認值。

div {
    border-style: solid;
}

<div>我是1</div>
<div>我是2</div>
<div>我是3</div>

 

border-width邊框寬度取值

              值                　　說明

            長度值           　　CSS長度值：好比px、em等

            百分數           　　直接設置百分數：3%等

             thin             　　預設寬度

            medium        　　預設寬度

            thick            　　 預設寬度

div {
    border-style: solid;
    border-width: thick;
}

<div>我是1</div>
<div>我是2</div>
<div>我是3</div>

 

border-style邊框線條的樣式

               值                                   說明

             none          　　　　   　　沒有邊框

            dashed        　　　　　　   破折線邊框

            dotted         　　　　　　  圓點線邊框

            double        　　　　　　   雙線邊框

            groove        　　　　　　   槽線邊框

            inset         　　　　　　　  使元素內容具備內嵌效果的邊框

            outset        　　　　　　    使元素內容具備外凸效果的邊框

            ridge         　　　　　　　 脊線邊框

            solid         　　　　　　     實線邊框

div {
    border-style: dotted;
    border-width: 3px;
}

<div>我是1</div>

 

border-color邊框的顏色

                  值                                   說明

　　　　     顏色代碼　　　　　　　　給邊框加顏色

div {
    border-style: dotted;
    border-width: 3px;
    border-color: #3aff1e;
}

<div>我是1</div>

 

邊框四條邊中某一條邊單獨進行設置

               屬性                          　　說明                         　　CSS版本

        border-top-width             　　定義頂端寬度             　　　1

        border-top-style    　　　 　　定義頂端樣式   　　　　　　 1

        border-top-color 　　　　　　 定義頂端顏色　　　　　　　 1

 

       border-bottom-width        　　定義底部寬度                     1

       border-bottom-style 　　　　  定義底部樣式　　　　　　　 1

       border-bottom-color　　　　   定義底部顏色　　　　　　   1

 

        border-left-width             　　定義左側寬度                    1

        border-left-style     　　　　　定義左側樣式 　　　　　　  1

        border-left-color　　　　　　  定義左側顏色　　　　　　  1

 

       border-right-width            　  定義右邊寬度                    1

       border-right-style    　　　　   定義右邊樣式  　　　　　　1

       border-right-color　　　　　　定義右邊顏色　　　　　　  1

div {
    border-top-width: 5px;
    border-top-style: solid;
    border-top-color: #ff2e2a;
}

<div>我是1</div>

 

邊框簡寫格式

有不少時候不必分寫成三句樣式，直接經過簡寫便可：

           屬性                  　　值                    　　　　　　　　說明           　　　　　　CSS版本

         border                   <寬度> <樣式> <顏色>               設置四條邊的邊框　　　　1

       border-top    　　　 <寬度> <樣式> <顏色>               只設置上邊框　　　　　   1

     border-bottom  　　  <寬度> <樣式> <顏色> 　　　　  只設置下邊框                  1

       border-left    　　　 <寬度> <樣式> <顏色>               只設置左邊框　　            1

      border-right    　　   <寬度> <樣式> <顏色>                只設置右邊框　　           1

若是四條邊框同樣簡寫格式

div {
    border: 6px solid crimson;
}

<div>我是1</div>

若是單獨設置其中一條簡寫

div {
    border: 6px solid crimson;
    border-left: 2px solid springgreen;
}

<div>我是1</div>

 其餘同理

 

圓角邊框
CSS3提供了一個很是實用的圓角邊框的設置。使用border-radius屬性，就能夠達到這種效果，樣式表以下：

                 屬性                       　　　　值             　　　　　　說明        　　　　　　CSS版本

            border-radius                       長度值或百分數              四條邊角圓                    3

        border-top-left-radius              長度值或百分數              左上邊角圓                    3

       border-top-right-radius       　   長度值或百分數 　　　　 右上邊角圓                    3

  border-bottom-left-radius  　　　　長度值或百分數 　　　　 左下邊角圓                    3

  border-bottom-right-radius 　　　 長度值或百分數 　　　　  右下邊角圓                   3

注意：設置圓邊角首先要先設置好邊框的，寬度樣式顏色，在設置圓邊角

四條邊角圓簡寫方式

div {
    border: 6px solid crimson;
    border-radius: 6px;
}

<div>我是1</div>

設置指定的邊角圓，能夠按照上右下左的規律，簡寫

div {
    border: 6px solid crimson;
    border-radius: 6px 0px 6px 0px;
}

<div>我是1</div>

 附加：

若是：一個元素點擊後有意外的邊框，能夠用outline：none；

將邊框的尺寸計算在元素內，也就是邊框不會佔元素的尺寸box-sizing: border-box;，通常寫在通用css裏，

如在頭部css寫上:

div{

    box-sizing: border-box;

}

 

 

設置背景

本章主要探討HTML5中CSS邊框和背景，經過邊框和背景的樣式設置，給元素增長更豐富的外觀。 

設置背景

               屬性                  　　　　　　  值             　　  說明           　　　　　　　　　CSS版本

        background-color         　　　　 顏色       　　　   背景的顏色                   　　    1

        background-image      　　　　  none或url 　　    背景的圖片                      　　 1/3

       background-repeat        　　      樣式名稱       　　背景圖片的樣式                　　  1/3

         background-size      　　   　　長度值或其餘 　　  背景圖像的尺寸                       3

      background-position       　　     位置座標       　　 背景圖像的位置                 　　1

     background-attachment      　　  滾動方式       　　  背景圖片的滾動                      1/3

         background-clip        　　        裁剪方式       　　 背景圖片的裁剪                 　　3

       background-origin        　　      位置座標       　　  背景圖片起始點                 　  3

           background            　　　　  複合值       　　　　背景圖片簡寫方式                   1

 

background-color設置背景顏色

               值                            說明                  　　　　　　　　CSS版本

              顏色代碼              　  設置背景顏色爲指定色                   1

           transparent        　　  設置背景顏色爲透明色                   1

div {
    width: 100px;
    height: 50px;
    background-color: #ff2e2a;
}

<div>我是1</div>

 

background-image設置背景圖片

             值                           說明                  　　　　　　CSS版本

            none            　　　取消背景圖片的設置                    1

            url            　　      經過URL設置背景圖片                 1

div {
    width: 318px;
    height: 213px;
    background-image: url("401.png");
}

<div>我是1</div>

 

background-repeat設置背景圖片展示方式

                 值                           說明                  　　　　　　　　　　CSS版本

            repeat-x          　　     水平方向平鋪圖像                             　1

            repeat-y          　　     垂直方向平鋪圖像                                1

             repeat           　　      水平和垂直方向同時平鋪圖像                 1

            no-repeat        　　     禁止平鋪圖像                               　　1

body{
    background-image: url("401.png");
    background-repeat:no-repeat;
}
div {
    width: 318px;
    height: 213px;
}

<body>
<div>我是1</div>
</body>
</html>

 

background-position背景圖片定位

             值                           說明                     　　　　　　　　　　CSS版本

            top          　　　　　將背景圖片定位到元素頂部                        1

            left         　　　　    將背景圖片定位到元素左部                        1

           right         　　　　   將背景圖片定位到元素右部                        1

           bottom        　　      將背景圖片定位到元素底部                        1

           center        　　　　  將背景圖片定位到元素中部                        1

           長度值           　　　  使用長度值偏移圖片的位置                        1

           百分數           　　     使用百分數偏移圖片的位置                        1

html{
    height: 100%;
}
body{
    background-image: url("401.png");
    background-repeat:no-repeat;
    background-position: center;
}
div {
    width: 318px;
    height: 213px;
}

<div>我是1</div>

注意：背景圖片定位，若是使用背景的元素沒有指定寬度或者高度，有可能沒法定位

 

background-size背景圖片縮放

            值                 　　說明                                                                　　　　　　CSS版本

           auto              　　默認值，圖像以本尺寸顯示                                         　　　　    3

           cover            　　等比例縮放圖像，使圖像至少覆蓋容器，但有可能超出容器               3                                                        

           contain         　　等比例縮放圖像，使其寬度、高度中較大者與容器橫向或縱向重合      3                        

           長度和高度值   　　CSS長度值，好比px、em                                                         3

           百分數            　　好比：100%                                                                          3

div {
    background-image: url("401.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 418px;
    height: 313px;
}

<div>我是1</div>

 

background-attachment設置背景圖片是否更隨滾動條拖動

             值                           說明                     　　　　　　　　　　　　　　　　　　CSS版本

           scroll           　　　　 默認值，背景固定在元素上，不會隨着內容一塊兒滾動   　　      1           

           fixed         　　　　   背景固定在視窗上，內容滾動時背景不動                               1

body{
    background-image: url("845.jpg");
    background-attachment: fixed;
}

 

background-origin繪製背景圖片，設置背景圖片起始位置

             值                            說明                    　　　　　　　　 CSS版本

         border-box      　　     在元素盒子內部繪製背景                    3

        padding-box      　　　 在內邊距盒子內部繪製背景                 3

        content-box      　　    在內容盒子內部繪製背景                     3 

div {
    background-image: url("401.png");
    background-repeat: no-repeat;
    border: 10px dashed red;
    background-origin: padding-box;
    padding: 50px;
    width: 218px;
    height: 113px;
}

<div>我是1</div>

 

background-clip裁剪背景圖片

          值                              說明                       　　　　　　CSS版本

     border-box        　　　在元素盒子內部裁剪背景                   3

     padding-box       　　  在內邊距盒子內部裁剪背景                3

     content-box       　　　在內容黑子內部裁剪背景                   3

div {
    background-image: url("401.png");
    background-repeat: no-repeat;
    border: 10px dashed red;
    background-clip: content-box;
    padding: 50px;
    width: 218px;
    height: 113px;
}

<div>我是1</div>

 

若是多個背景圖標在一張圖片上，用 座標方式定位背景圖標

說明：background: url("2015.png")(圖片路徑) 10px(橫向座標) -45px(豎向座標) no-repeat(背景圖片顯示一次);

 

 

div{
    width: 132px;
    height: 42px;
    background-color: #4af5ff;
    background: url("2015.png") 10px -45px no-repeat;
    line-height: 42px;
}
samp{
    margin-left: 40px;
}

<div>
    <samp>加入購物車</samp>
</div>

效果：

 

注意：背景完整的簡寫順序以下：

[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position]/ [background-size]
[background-origin]
[background-clip];

如：background: silver url(img.png) no-repeat scroll left top/100% border-box content-box;