與背景和邊框相關樣式

于 2012-07-31 16:50:13 发布
阅读量823 收藏
点赞数
分类专栏： CSS3 文章标签： div border url safari opera css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lulu_jiang/article/details/7814209
版权

新增屬性

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可一起使用

lulu_jiang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值