CSS3背景和边框

与背景相关的新增属性

background-clip：指定背景的显示范围
background-origin：指定绘制背景图像时的起点
background-size：指定背景中图像的尺寸
background-break：指定内联元素的背景图像进行平铺时的循环方式

background-clip属性

background-clip:padding|margin

在HTML页面中，一个具有背景的元素通常由元素的内容、内部补白（padding）、边框、外部补白（margin）构成。
元素背景的显示范围在CSS2与CSS2.1、CSS3中并不相同。在CSS2中，背景的显示范围是指内部补白之内的范围，不包括边框；而在CSS2.1乃至CSS3中背景的显示范围是指包括边框在内的范围。在CSS3中，可以用background-clip来修改背景的显示范围，如果将background-clip的属性值设为border，则背景范围包括边框区域，如果设为padding，则不包括边框区域。

<style type="text/css">
div{
        background-color: black;
        background-image: url(flower-green.png);
        border: dashed 15px green;
        padding: 30px;
        color:white;
        font-size:2em;
        font-weight:bold;
}
div.div1{
        -moz-background-clip: border;
        -webkit-background-clip: border;
}
div.div2{
        -moz-background-clip: padding;
        -webkit-background-clip: padding;
}
</style>

<body>
<div class="div1">示例文字1</div><br>
<div class="div2">示例文字2</div>
</body>

效果如图：

background-origin属性

background-origin:padding|border|content

在绘制背景图像时，默认是从内部补白（padding）区域的左上角开始。利用background-origin属性可以指定绘制时从边框的左上角开始或者从内容的左上角开始，或者从内部补白的左上角开始。

<style type="text/css">
div{        
    background-color: black;        
    background-image: url(flower-green.png);        
    background-repeat: no-repeat;        
    border: dashed 15px green;        
    padding: 30px;   
    color:white;
    font-size:2em;
    font-weight:bold; 
}
div.div1{        
    -moz-background-origin: border;        
    -webkit-background-origin: border;        
}
div.div2{        
    -moz-background-origin: padding;        
    -webkit-background-origin: padding;        
}
div.div3{        
    -moz-background-origin: content;        
    -webkit-background-origin: content;        
}
</style>

<body>
<div class="div1">示例文字1</div><br/>
<div class="div2">示例文字2</div><br/>
<div class="div3">示例文字3</div>
</body>

效果如图：

另外，将background-clip属性指定为padding时，边框点、划线中点与点之间的图像不会显示，但仍然可以通过将background-origin属性指定为border来指定从边框的左上角开始绘制背景图像。

<style type="text/css">
div{
    background-color: black;
    background-image: url(flower-green.png);
    background-repeat: no-repeat;
    border: dashed 15px green;
    padding: 30px;
        color:white;
        font-size:2em;
        font-weight:bold;
}
div.div1{
        -moz-background-clip: padding;
    -webkit-background-clip: padding;
    -moz-background-origin: border;
    -webkit-background-origin: border;
}
</style>
<body>
<div class="div1">示例文字1</div><br>
</body>

效果如图：

background-size属性

background-size属性指定背景图像的尺寸。

background-size:width height

第一个参数为背景的宽度，第二个参数为背景的高度。单位：px或百分比。可省略最后一个参数。

<style type="text/css">
div{
        background-color: black;
        background-image: url(flower-red.png);
        padding: 30px;
        color:white;
        font-size:2em;
        font-weight:bold;
        background-size: 40px 20px;
        -webkit-background-size: 40px 20px;
}
</style>
<body>
<div>示例文字</div><br>
</body>

效果如图：

如果要维持图像纵横比例，可以在设定图像宽度或高度时，将另一个参数设为auto。

background-break属性

background-break属性指定平铺内联元素背景图像时的循环方式，可以指定bounding-box，each-box和continuous这三种循环方式。
在使用Firefox浏览器时，需要将其书写成-moz-background-inline-policy的形式。
将background-break属性指定为bounding-box的时候，背景图像在整个内联元素中进行平铺。指定为each-box的时候，背景图像在每一行中进行平铺，指定为continuous的时候，下一行中的图像紧接着上一行中的图像继续平铺。

<style type="text/css">
span{
    background-color: #888888;
    background-image: url(flower-green.png);
    padding: 0.2em;
    color:gray;
    line-height: 1.5;  
    font-size:1em;    
    font-weight:bold;  
}
div.div1 span{
    -moz-background-inline-policy: bounding-box; 
}
div.div2 span{
    -moz-background-inline-policy: each-box; 
}
div.div3 span{
    -moz-background-inline-policy: continuous;
}
</style>
<body>
<div class="div1" >
    <span>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</span>
</div><br/>
<div class="div2">
    <span>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</span>
</div><br/>
<div class="div3">
    <span>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</span>
</div>
</body>

圆角边框的绘制

border-radius属性

只要使用border-radius属性指定好圆角的半径，就可以绘制圆角边框了。

<style type="text/css">
div{
    border: solid 5px blue;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    -webkit-border-radius: 20px;
    background-color: skyblue;
    padding: 20px;
    width: 180px;
}
</style>
<div>
示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。示例文字。
</div>

效果如图：

在border-radius属性中指定两个半径

border-radius: 40px 20px;

针对这种情况，各种浏览器的处理方式并不一致。在Chrome与Safari中，会绘制出一个椭圆形边框，第一个半径为椭圆的水平方向半径，第二个半径为椭圆的垂直方向半径。在Firefox与Opera中，将第一个半径作为边框左上角与右下角的圆半径来绘制，将第二个半径作为边框右上角与左下角的圆半径来绘制。

div{
        border: solid 5px blue;
        border-radius: 40px 20px;
        -moz-border-radius:40px 20px;
        -o-border-radius:40px 20px;
        -webkit-border-radius: 40px 20px;
        background-color: skyblue;        
        padding: 20px;
        width: 180px;
}

效果如图：

Chrome

不显示边框的时候

如果使用了border-radius属性但是把边框设定为不显示的时候，浏览器将把背景的四个角绘制为圆角。

div{
    border: none;
    border-radius: 20px;
    -moz-border-radius:20px;
    -o-border-radius:20px;
    -webkit-border-radius: 20px;
    background-color: skyblue;       
    padding: 20px;
    width: 180px;
}

效果如图：

修改边框种类的时候

使用了border-radius属性后，不管边框是什么种类，都会将边框沿着圆角曲线进行绘制。

div{
    border: dashed 5px blue;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    -webkit-border-radius: 20px;
    background-color: skyblue;
    padding: 20px;
    width: 180px;
}

效果如图：

绘制四个角不同半径的圆角边框

如果要绘制的圆角边框的四个角半径各不相同，可以将border-top-left-radius属性、border-top-right-radius属性、border-bottom-right-radius属性、border-bottom-left-radius属性结合起来使用。

div{
    border: solid 5px blue;
    border-radius-topleft: 10px;
    border-radius-topright: 20px;
    border-radius-bottomright: 30px;
    border-radius-bottomleft: 40px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 30px;
    -moz-border-radius-bottomleft: 40px;
    -o-border-radius-topleft: 10px;
    -o-border-radius-topright: 20px;
    -o-border-radius-bottomright: 30px;
    -o-border-radius-bottomleft: 40px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 30px;
    -webkit-border-bottom-left-radius: 40px;
    background-color: skyblue;
    padding: 20px;
    width: 180px;
}

使用图像边框

border-image属性

border-image属性，可以让处于随时变化状态的元素的长或宽的边框统一使用一个图像文件来绘制。使用border-image属性，会让浏览器在显示图像边框肘，自动将所使用到的图像分割为9部分进行处理。

<style type="text/css">
div{
    border-image: url(borderimage.png) 20 20 20 20 / 20px;
    -webkit-border-image: url(borderimage.png) 20 20 20 20 / 20px;
    -moz-border-image: url(borderimage.png) 20 20 20 20 / 20px;
}
</style>

<div>
示例文字
</div>

效果如图：

borderimage.png

border-image属性最简单的使用方法

border-image:url(图像文件的路径) A B C D
-webkit-border-image:url(图像文件的路径) A B C D
-moz-border-image:url(图像文件的路径) A B C D

border-image属性值中至少必须指定五个参数，其中第一个参数为边框所使用的图像文件的路径，A、B、C、D四个参数表示当浏览器自动把边框所使用到的图像进行分隔时的上边距、右边距、下边距及左边距。
边框使用的图像会被自动分割成9个部分。具体显示的时候，四个角上的部分没有任何展示效果的，不会平铺、不会重复、也不会拉伸。上下左右四个边框使用的图像可以行平铺或伸缩。

<style type="text/css">
div{
    border: solid 5px;
    border-image: url(borderimage.png) 18 18 18 18;
    -webkit-border-image: url(borderimage.png) 18 18 18 18;
    -moz-border-image: url(borderimage.png) 18 18 18 18;
    width:300px;
}
</style>

<div>
示例文字
</div>

效果如图：

borderimage.png

使用 border-image属性来指定边框宽度

border-image:url( 图像文件的路径) A B C D/border-width

border-width可以指定一个参数，也可以指定四个参数。一个参数表示四个值相同。

div{
    border:solid;
    border-image: url(borderimage.png) 18/5px 10px 15px 20px;
    -webkit-border-image: url(borderimage.png) 18/5px 10px 15px 20px;
    -moz-border-image: url(borderimage.png) 18/5px 10px 15px 20px;
    width:300px;
}

效果如图：

中央图像的自动拉伸

浏览器将边框所用图像自动分割为9部分后，除了上下左右四个边框自动分配为四条边所用的图像之外，将位于中间部分的图像分配给元素边框所包围的中间区域，随着div元素的内容变化的同时，或在修改div元素的宽度或高度的同时，中间部分的图像也会自动进行伸缩，以填满该中间区域。

<style type="text/css">
div{
    border:solid;
    border-image: url(borderimage.png) 18/5px;
    -webkit-border-image: url(borderimage.png) 18/5px;
    -moz-border-image: url(borderimage.png) 18/5px;
    width:300px;
}
</style>

<div>
示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
</div>

效果如图：

指定四条边申图像的显示方法

border-image: url( 文件路径) A B C D/border-width topbottom leftright

其中，topbottom表示元素的上下两条边中图像的显示方法，leftright表示元素的左右两条边中图像的显示方曲。在显示方法中可以指定的值为repeat、stretch与round三种。
将显示方法指定为repeat时，图像将以平铺的方式进行显示。如果四条边中图像均以平铺方式进行显示，则中间图像也以平铺方式进行显示。

div{
    border-image: url(borderimage.png) 18/5px repeat repeat;
    -webkit-border-image: url(borderimage.png) 18/5px repeat repeat;
    -moz-border-image: url(borderimage.png) 18/5px repeat repeat;
    width:300px;
    height:200px;
}

效果如图：

将显示方能指定为stretch时，图像将以拉伸的方式进行显示。如果四条边中的图像均以拉伸方式进行显示，则中间图像也以拉伸方式进行显示。

div{
    border-image: url(borderimage.png) 18/5px stretch stretch;
    -webkit-border-image: url(borderimage.png) 18/5px stretch stretch;
    -moz-border-image: url(borderimage.png) 18/5px stretch stretch;
    width:300px;
    height:200px;
}

效果如图：

可以将上下两条边中的图像的显示方式指定为平铺显示，左右两条边中的图像的显示方式指定为拉伸显示，或者将上下两条边中的图像的显示方式指定为拉伸显示，左右两条边中的图像的显示方式指定为平铺显示。使用第一种指定方式时，中央图像在水平方向为平铺显示，垂直方向为拉仰显示，使用第二种指定方式时，中央图像在水平方向为拉伸显示，垂直方向为平铺显示。

div{
    border-image: url(borderimage.png) 18/5px repeat stretch;
    -webkit-border-image: url(borderimage.png) 18/5px repeat stretch;
    -moz-border-image: url(borderimage.png) 18/5px repeat stretch;
    width:300px;
    height:200px;
}

效果如图：

将显示方法指定为round时与指定为repeat时类似，都是将图像进行平铺显示，区别在于如果最后显示的一幅图像不能被完全显示，且能够显示的部分不到图像的一半，就不显示最后的图像，然后扩大前面的图像，使显示区域正好完整平铺全部图像，如果能够显示的部分超过图像的一半，就显示最后的图像，但是将全部显示的图像缩小，使显示区域正好完整平铺全部图像。

div{
    border-image: url(borderimage.png) 18/5px round round;
    -webkit-border-image: url(borderimage.png) 18/5px round round;
    -moz-border-image: url(borderimage.png) 18/5px round round;
    width:300px;
    height:200px;
}

效果如图：

使用背景图像

在使用border-image属性的时候，仍然可以正常使用背景图像，但是为了不让边框图像挡住背景图像，需要使用中间为透明的边框图像，否则背景图像就有可能被边框图像的中央部分挡住部分或全体了。

最后编辑于：2017.12.05 05:35:54

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,378评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,356评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,702评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,259评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,263评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,036评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,349评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,979评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,469评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,938评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,059评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,703评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,257评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,262评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,485评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,501评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,792评论 2赞 345

CSS3背景和边框

与背景相关的新增属性

background-clip属性

background-origin属性

background-size属性

background-break属性

圆角边框的绘制

border-radius属性

在border-radius属性中指定两个半径

不显示边框的时候

修改边框种类的时候

绘制四个角不同半径的圆角边框

使用图像边框

border-image属性

border-image属性最简单的使用方法

使用 border-image属性来指定边框宽度

中央图像的自动拉伸

指定四条边申图像的显示方法

使用背景图像

推荐阅读更多精彩内容