这篇文章主要讲解了“CSS3中的边框属性怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3中的边框属性怎么使用”吧!
css3边框
(1)边框阴影
box-shadow:h-shadowv-shadowblurspreadcolorinset
h-shadow,v-shadow:水平和垂直方向的阴影位置,可以写负值
blur:模糊距离(值越大越模糊)。
spread:阴影的尺寸
color:阴影的颜色
inset:将外部阴影(outset)改为内部阴影
前面两个值是必选的,后面四个值是可选的
div{
width:100px;
height:100px;
background-color:pink;
box-shadow:10px10px10pxgray;
}
Image16.jpg
(2)边框图片
border-image:srcslicewidthoutsetrepeat
src:图片的路径。
slice:图片边框向内偏移。
width:图片边框的宽度。
outset:边框图像区域超出边框的量。
repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
注意浏览器兼容问题
div{
border:20pxsolidtransparent;
width:100px;
height:50px;
line-height:50px;
text-align:center;
padding:10px20px;
border-image:url(images/12.png)5050round;
-moz-border-image:url(images/12.png)5050round;/*Firefox*/
-webkit-border-image:url(images/12.jpg)5050round;/*Safari和Chrome*/
-o-border-image:url(images/12.png)5050round;/*Opera*/
}
Image21.jpg
(3)边框圆角
border-radius
div{
width:150px;
height:30px;
border:2pxsolid#ccc;
border-radius:25px;
line-height:30px;
text-align:center;
}
感谢各位的阅读,以上就是“CSS3中的边框属性怎么使用”的内容了,经过本文的学习后,相信大家对CSS3中的边框属性怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。