CSS3 Border属性介绍
通过边框属性，我们可以实现一些类似按钮或者背景图片的替代效果。因为大量的图片素材对网页的加载速度影响也很大，但是由于现在的浏览器对css3的兼容与支持各有不同，所以现在要用css替代 配合图片达到的效果还是不太现实。
言归正转，来看看css3下 border提供了那些新特性。
1、border-color
<style type="text/css"> <!-- .border-style1 { border: 8px solid #000; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; padding: 5px 5px 5px 15px; } --> </style> <div class="border-style1">只有在Firefox3.0以上版本浏览器中能看到边框颜色渐变效果，其他浏览器中为纯黑色边框</div> 2、border-p_w_picpath
<style type="text/css"> <!-- .border-style2 { -webkit-border-p_w_picpath: url(img/bt_blue.png) 0 12 0 12 stretch stretch; -moz-border-p_w_picpath: url(img/bt_blue.png) 0 12 0 12 stretch stretch; display: block; border-width: 0 12px; padding: 10px; text-align: center; font-size: 16px; text-decoration: inherit; color:white;+color:black; } --> </style> <div class="border-style2">在safari3+、Chrome和FF3.5浏览器里能看到边框背景图</div> 使用这种图片配合css
可以实现如下效果
3、border-radius
border-radius: 11px 11px 11px 11px; 顺序： 左上、右上、右下、左下 值越大，对应的圆角越大<style type="text/css"> <!-- .border-style3 { border-width: 1px; border-style: solid; border-color: #f00; -moz-border-radius: 11px; -khtml-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; padding:5px;background:#ddd; } --> </style> <div class="border-style3">在safari3+、Chrome和FF3.5浏览器里能看到圆角边框</div> 4、box-shadow
-moz-box-shadow:5px 2px 6px #000; 5px: 与左边线相对距离 2px: 与上边线相对距离 6px: 阴影扩散像素 #000 为阴影颜色<style type="text/css"> <!-- .border-style4 { -webkit-box-shadow:5px 2px 6px #000; -moz-box-shadow:5px 2px 6px #000; padding:4px 10px; background:#ddd; } --> </style> <div class="border-style4">在safari3+、Chrome和FF3.5浏览器里能看到边框阴影</div> 如将扩散像素调大至16px 阴影颜色换为红色 则有如下效果
由于国内的ie比重一直较大，甚至相当一部分还是ie6 ，所以如果要是考虑到兼容行的化，采用css3处理border特效还是不太合适的
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/07/04 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
