8.2.3 CSS3提供的图片边框
CSS3为图片边框提供了如下属性。
border-image:该属性的值比较复杂,应该遵守如下格式:
<border-image-source> <border-image-slice>[/<border-image-width>]? <border-image-repeat>
上面语法格式可以分为4个部分:
border-image-source:指定边框图片。该值可以是none(没有边框图片)或使用url()函数指定图片。
border-image-slice:该属性可以指定1~4个数值或百分比数值,这4个数值用于控制如何对图片进行切割。
假设指定了10 20 30 40,这4个数值分别指定切割边框图片时上边框为10像素,右边框
为20像素,下边框为30像素,左边框为40像素。如果只指定了一个值,那么4个边框的宽度都等于该值。
border-image-width:该属性用于指定图片边框的宽度。该属性值可指定1~4个长度值、数值、百分比值或auto。
border-image-repeat:该属性用于指定边框图片的覆盖方式,支持stretch(拉伸覆盖)、repeat(平铺覆盖)、round(取整平铺)三种
覆盖方式。该属性可指定两个值,分别代表横向、纵向覆盖方式。
代码示范:
//为该div指定图片边框,且边框宽度为27px
div{
border-image:url(图片路径) 27;
}
//为该div指定图片边框,且指定边框宽27px,默认是拉伸边框图片
div{
border-image:url(图片路径) 27/27px;
}
8.3 补丁相关属性
8.3.1 内补丁相关属性
内补丁相关属性有如下几个。
padding:该属性可以同时设置上、下、左、右4个边的内补丁距离。如果只为该属性设置了一个长度,则该值将作为
上、下、左、右4个边的内补丁距离。
padding-top:设置上边的内补丁距离。
padding-right:设置右边的内补丁距离。
padding-bottoom:设置下边的内补丁距离。
padding-left:设置左边的内补丁距离。
6月23号=》201页-205页