HTML5背景和边框相关样式

与背景相关的新增属性
background-clip  指定背景的显示范围
background-origin   指定绘制背景图像时的起点
background-size    指定背景中图像的尺寸  目前得到Firefox4、Safari3、Opera10、Chrome8的支持
background-break    指定内联元素的背景图像进行平铺时的循环方式
在Firefox中,支持除了background-size属性之外的其它三个属性,在书写样式代码时要在属性前面加上-moz字样,但在使用background-break属性时,在样式代码中不是书写-moz-background-break,而是书写-moz-background-inline-policy,这一点需要小伙伴们注意喽。
在Safari、Chrome及Opera中,支持除了background-break之外的其他三个属性,在书写样式代码时需要在属性前加-Webkit-字样。

指定背景的显示范围——background-clip属性:若将属性值设定为border,则背景范围包括边框区域,若设定为padding,则不包括边框区域。
指定绘制背景图像的绘制起点——background-origin属性  绘制背景时默认是从内部补白(padding)区域的左上角开始,但是可以利用该属性指定绘制时从边框的左上角开始,或者从内容的左上角开始。
Firefox写法 -moz-background-origin
Safari或Chrome写法  -Webkit-background-origin
另外:若要维持图像纵横比例的话,可在设定宽或高的同时,将另一个参数设置为auto。

background-break属性,指定平铺内联元素背景图像时的循环方式,可以指定bounding-box、each-box和continuous这三种循环方式。目前只有Firfox支持,书写形式:-moz-background-inline-policy。

在一个元素中显示多个背景图像 ,还可以将多个背景图像进行重叠显示。使用background-image属性指定图像文件时,是按浏览器中显示时图像叠放的顺序从上往下指定的。第一个图像文件是放在最上面的,最后指定的文件是放在最下面的。

圆角边框的绘制  border-radius属性  各浏览器写法
Firefox  -moz-border-radius
Safari和Chrome   -webkit-border-radius
Opera  border-radius

使用图像边框 border-image 属性     用法:border-image:url(图像文件的路径) A B C D
其中后4个参数A B C D分别表示浏览器自动把边框所使用到的图像进行分割时的上、右、下、左边距。具体分为:border-top-image、border-right-image、border-bottom-image、border-left-image 
各浏览器写法如下
Firefox  -moz-border-image
Safari和Chrome   -webkit-border-image
Opera  border-image

使用border-image属性指定边框宽度,border-image:url(图像文件的路径) A B C D/border-width,例如:border-image:url(borderImage.png) 10 10 10 10/10px;

中央图像的自动拉伸,举个例子吧
div{
    border:solid;
    border-image:url(1.png) 18/5px;
    -webkit-border-image:url(1.png) 18/5px;
    -moz-border-image:url(1.png) 18/5px;
    width:300px;
}

指定四条边中图像的显示方式,拉伸,平铺  
用法:border-image:url(文件路径) A B C D/border-width topbottom leftright
topbottom 表示元素的上下两条边中图像的显示方法
leftright表示元素的足有两条边中的显示方法
在显示方法中可以指定的值为repeat stretch与round三种
repeat表示图像以平铺的方式进行显示
stretch表示图像以拉伸的方式进行显示
round同repeat显示类似,区别在于最后显示的一幅图像不能被完全显示,且能够显示的部分不到图像的一半,就不显示最后的图像,然后扩大前面的图像,使显示区域正好完整平铺全部图像。

使用背景图像
在使用border-image属性的时候,仍然可以正常使用背景图像,但是为了不让边框图像挡住背景图像,需要使用中间为透明的边框图像,否则背景图像就有可能被边框图像的中央部分挡住部分或全体了。
举个例子吧
div{
-webkit-border-image:url(border.jpg) 20 20 20 20 / 10px;
-webkit-border-origin:border;
-webkit-border-radius:18px;
-moz-border-image:url(border.jpg) 20 20 20 20 / 10px;
-moz-background-origin:border;
-moz-border-radius:18px;
background-image:url(bg.jpg);
background-repeat:no-repeat;
border-image:url(border.jpg) 20 20 20 20 / 10px;
background-origin:18px;
width:300px;height:300px;margin:100px auto 0;
}
运行结果图示
发表评论
验证码: 点击我更换图片