與背景和邊框相關樣式

来源：互联网发布：大数据先培训后付费编辑：程序博客网时间：2024/05/17 11:04

新增屬性

background-clip：指定背景的顯示範圍(FF：-moz-background-clip，其他：-webkit-background-clip)

background-origin：指定繪製背景圖像時起點(FF：-moz-background-origin，其他：-webkit-background-origin)

background-size：指定背景中圖像尺寸(其他：-webkit-background-size，其他：-webkit-background-size)

background-break：指定內聯元素的背景圖像進行平鋪時的循環方式(FF：-moz-background-inline-policy)

1.指定背景顯示範圍 background-clip屬性

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <style type="text/css">        div{            background-color:Red;            border:dashed 15px green;            padding:30px;            margin-bottom:20px;        }        #div1{            -moz-background-clip:border;            -webkit-background-clip:border;        }        #div2{            -moz-background-clip:padding;            -webkit-background-clip:padding;        }        </style>    </head>    <body>        <div id="div1">哈羅1</div>        <div id="div2">哈羅2</div>    </body></html>

2.指定背景圖像的繪製起點 background-origin屬性

background-origin:border; 邊框左上角

background-origin:padding; 內部補白區域左上角

background-origin:content; 內容的左上角

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <style type="text/css">        div{            background-color:Red;            background-image:url(test.png);            background-repeat:no-repeat;            border:dashed 15px green;            padding:30px;            margin-bottom:20px;        }        #div1{            -moz-background-origin:border;            -webkit-background-origin:border;        }        #div2{            -moz-background-origin:padding;            -webkit-background-origin:padding;        }        #div3{            -moz-background-origin:content;            -webkit-background-origin:content;        }        </style>    </head>    <body>        <div id="div1">哈羅1</div>        <div id="div2">哈羅2</div>        <div id="div3">哈羅3</div>    </body></html>

3.指定背景圖像尺寸 background-size屬性

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <style type="text/css">        div{            background-color:Red;            background-image:url(test.png);            border:dashed 15px green;            padding:30px;            background-size:70px 20px;            /* 設置為auto可按比例自適應 */            /*background-size:40px auto;*/            -webkit-background-size:70px 20px;        }        </style>    </head>    <body>        <div>哈羅1</div>    </body></html>

4.指定內聯元素背景圖像進行平鋪時的循環方式 background-break屬性

可指定bounding-box(背景圖像在整個內聯元素中平鋪)，each-box(背景圖像在每一行中平鋪)，continuous(下一行中圖像緊接上一行圖像平鋪)這3種循環方式，目前僅有FF瀏覽器支持

注：本人沒在FF試出來

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <style type="text/css">        div{            background-color:#888888;            background-image:url(test.png);            padding:0.2em;            line-height:1.5;            font-size:1em;            font-weight:bold;        }        #div1 span{            -moz-background-inline-policy:bounding-box;        }        #div2 span{            -moz-background-inline-policy:each-box;        }        #div3 span{            -moz-background-inline-policy:continuous;        }        </style>    </head>    <body>        <div id="div1">        <span>哈羅哈羅哈羅哈羅哈羅哈羅哈羅<br />哈羅哈羅哈羅哈羅哈羅哈羅</span>        </div>        <div id="div2">        <span>哈羅哈羅哈羅哈羅哈羅哈羅哈羅<br />哈羅哈羅哈羅哈羅哈羅哈羅</span>        </div>        <div id="div3">        <span>哈羅哈羅哈羅哈羅哈羅哈羅哈羅<br />哈羅哈羅哈羅哈羅哈羅哈羅</span>        </div>    </body></html>

在一個元素中顯示多個背景圖像

CSS3可在一個元素中顯示多個背景圖像，可將多個背景圖像重疊顯示

使用background-image屬性指定圖像文件，第一個圖像文件放最上，最後指定的文件放最下

允許多重指定并配合多個圖像文件一起利用的屬性有如下：

1.background-image

2.background-repeat

3.background-position

4.background-clip

5.background-origin

6.background-size

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <style type="text/css">        div{            background-image:url(test.png),url(test2.png);            background-repeat:no-repeat,repeat;            background-position:3% 3%;            width:300px;            padding:90px 0px;        }        </style>    </head>    <body>        <div></div>    </body></html>

圓角邊框的繪製

1.border-radius屬性

CSS3中用該屬性指定圓角半徑，就可以繪製圓角邊框啦

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <style type="text/css">        div{            border:solid 5px red;            border-radius:20px;            /* FF瀏覽器寫法 */            -moz-border-radius:20px;            /* Opera瀏覽器寫法 */            -o-border-radius:20px;            /* Safari瀏覽器寫法 */            -webkib-border-radius:20px;            background-color:Blue;            padding:20px;            width:200px;        }        </style>    </head>    <body>        <div>        哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅        </div>    </body></html>

2.在border-radius屬性中指定兩個半徑

在不同瀏覽器中效果可能不同

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <style type="text/css">        div{            border:solid 5px red;            border-radius:40px 20px;            /* FF瀏覽器寫法 */            -moz-border-radius:40px 20px;            /* Opera瀏覽器寫法 */            -o-border-radius:40px 20px;            /* Safari瀏覽器寫法 */            -webkib-border-radius:40px 20px;            background-color:Blue;            padding:20px;            width:200px;        }        </style>    </head>    <body>        <div>        哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅        </div>    </body></html>

3.繪製4個角不同半徑的圓角邊框

注：本人僅在FF瀏覽器中試驗成功

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <style type="text/css">        div{            border:dashed 5px red;            border-radius-topleft:10px;            border-radius-topright:20px;            border-radius-bottomleft:30px;            border-radius-bottomright:40px;            /* FF瀏覽器寫法 */            -moz-border-radius-topleft:10px;            -moz-border-radius-topright:20px;            -moz-border-radius-bottomleft:30px;            -moz-border-radius-bottomright:40px;            /* Opera瀏覽器寫法 */            -o-border-radius-topleft:10px;            -o-border-radius-topright:20px;            -o-border-radius-bottomleft:30px;            -o-border-radius-bottomright:40px;            /* Safari瀏覽器寫法 */            -webkib-border-top-left-radius:10px;            -webkib-border-top-right-radius:20px;            -webkib-border-bottom-left-radius:30px;            -webkib-border-bottom-right-radius:40px;            background-color:Blue;            padding:20px;            width:200px;        }        </style>    </head>    <body>        <div>        哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅        </div>    </body></html>

使用圖像邊框

1.border-image屬性

可讓處於隨時變化狀態的元素的長寬的邊框統一使用一個圖像繪製。讓瀏覽器在現實圖像邊框是，自動所使用的圖像分割為9部份處理

border-image:url(...) A B C D

url參數：為邊框所使用的圖像文件路徑

A B C D 表示當瀏覽器自動吧使用圖像分割時上，右，下，左邊距

border-image:url(...) A B C D / border-width

border-width屬性用來指定邊框寬度，可將四條邊的邊框指定為不同寬度

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <style type="text/css">        div{            border-image:url(border.jpg) 20 20 20 20;            -moz-border-image:url(border.jpg) 20 / 10px 5px 15px 20px;            -webkit-border-image:url(border.jpg) 20 / 10px 5px 15px 20px;            width:200px;        }        </style>    </head>    <body>        <div>        哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅        </div>    </body></html>

2.指定4條邊中圖像的顯示方法

border-image:url(...) A B C D / border-width topbottom leftright

topbottom表示元素的上下兩條邊中圖像的顯示方法

leftright表示元素的左右兩條邊中圖像的顯示方法

可指定：repeat，stretch，round

repeat：圖像將平鋪顯示

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <style type="text/css">        div{            border-image:url(test.png) 15 / 5px repeat repeat;            -moz-border-image:url(test.png) 15 / 5px repeat repeat;            -webkit-border-image:url(test.png) 15 / 5px repeat repeat;            width:200px;            height:200px;        }        </style>    </head>    <body>        <div>        哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅        </div>    </body></html>

stretch：圖像以拉伸方式顯示

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <style type="text/css">        div{            border-image:url(test.png) 20 / 5px stretch stretch;            -moz-border-image:url(test.png) 20 / 5px stretch stretch;            -webkit-border-image:url(test.png) 20 / 5px stretch stretch;            width:200px;            height:200px;        }        </style>    </head>    <body>        <div>        哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅        </div>    </body></html>

round：圖像平鋪，如果最後顯示的圖不能完全顯示，且能夠顯示的部份不到圖像一半，不顯示最後圖像，擴大前面圖像，使顯示區正好完整平鋪全部圖像

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <style type="text/css">        div{            border-image:url(test.png) 20 / 5px round round;            -moz-border-image:url(test.png) 20 / 5px round round;            -webkit-border-image:url(test.png) 20 / 5px round round;            width:200px;            height:200px;        }        </style>    </head>    <body>        <div>        哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅哈羅        </div>    </body></html>

border-image和background-image可一起使用