HTML5基础之六(CSS3属性border-image解析)

完整的CSS属性列表可以在MDN上查找,这里把一些我不熟悉但是平时可能有用的整理出来。

background-attachment:fixed(背景不会滚动)(默认值为scroll,背景随着滚动)

background-clip:表示背景的覆盖范围(3种取值border-box(默认),padding-box(padding+内容),content-box(只是内容))(CSS3)

background-size:contain(表示背景在box内伸缩,这个在移动端用的多一些)(CSS3)

border-radius:设置边框圆角半径(可以分别设置border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius,border-top-right-radius)(CSS3)

 

border-image:给元素边框添加背景图片(参数border-image: source slice width outset repeat

这里针对3个属性值进行说明,示例图片为

border(图片大小81*81px)

border-image-slice:对图片进行裁切(初始值为100%也就是整张图片)

具有4个偏移量分别表示(top,right,bottom,left),把图片分割为9个区域,如下图:

border-image-slice

 

默认示例样式代码如下

设置border-image-slice:20%,如下图:

4个值切了4块放到了对应的位置,中间的填充部分有另外一个属性来设置(border-image-repeat:stretch(默认))。这里的划分可以通过PS来进行演示

 

border-image-repeat:切掉4个角以后中间部分内容填充到对应位置的样式

(默认stretch(伸缩),round(会重复连接处圆润),repeat(简单的重复))

对照下

 

 

border-image-outset:用来背景图片超出元素的盒子,而且不会触发滚动条。取值有4个方向的值,单位(px,sides(边))

例如设置border-image-outset:1;则出现下面的图

css3
作者:张雪飞
出处:https://zhangxuefei.site/p/1225
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注