CSS3 Border属性介绍

2023-01-31 01:01:00 属性 介绍 css3

通过边框属性,我们可以实现一些类似按钮或者背景图片的替代效果。因为大量的图片素材对网页的加载速度影响也很大,但是由于现在的浏览器对css3的兼容与支持各有不同,所以现在要用CSS替代 配合图片达到的效果还是不太现实。

言归正转,来看看css3下 border提供了那些新特性。

1、border-color

  1. <style type="text/css"> 
  2. <!-- 
  3. .border-style1 { 
  4. border: 8px solid #000; 
  5. -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; 
  6. -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; 
  7. -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; 
  8. -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; 
  9. padding: 5px 5px 5px 15px; 
  10. --> 
  11. </style> 
  12. <div class="border-style1">只有在Firefox3.0以上版本浏览器中能看到边框颜色渐变效果,其他浏览器中为纯黑色边框</div> 

2、border-p_w_picpath

  1. <style type="text/css"> 
  2. <!-- 
  3. .border-style2 { 
  4. -WEBkit-border-p_w_picpath: url(img/bt_blue.png) 0 12 0 12 stretch stretch; 
  5. -moz-border-p_w_picpath: url(img/bt_blue.png) 0 12 0 12 stretch stretch; 
  6. display: block; 
  7. border-width: 0 12px; 
  8. padding: 10px; 
  9. text-align: center; 
  10. font-size: 16px; 
  11. text-decoration: inherit; 
  12. color:white;+color:black; 
  13. --> 
  14. </style> 
  15. <div class="border-style2">在safari3+、Chrome和FF3.5浏览器里能看到边框背景图</div>  

使用这种图片配合css     可以实现如下效果 

3、border-radius 

border-radius: 11px 11px 11px 11px; 顺序: 左上、右上、右下、左下      值越大,对应的圆角越大
  1. <style type="text/css"> 
  2. <!-- 
  3. .border-style3 { 
  4. border-width: 1px; 
  5. border-style: solid; 
  6. border-color: #f00; 
  7. -moz-border-radius: 11px; 
  8. -khtml-border-radius: 11px; 
  9. -webkit-border-radius: 11px; 
  10. border-radius: 11px; 
  11. padding:5px;background:#DDD
  12. --> 
  13. </style> 
  14. <div class="border-style3">在safari3+、Chrome和FF3.5浏览器里能看到圆角边框</div>  

4、box-shadow

-moz-box-shadow:5px 2px 6px #000; 5px: 与左边线相对距离 2px: 与上边线相对距离 6px: 阴影扩散像素     #000 为阴影颜色
  1. <style type="text/css"> 
  2. <!-- 
  3. .border-style4 { 
  4. -webkit-box-shadow:5px 2px 6px #000; 
  5. -moz-box-shadow:5px 2px 6px #000; 
  6. padding:4px 10px; 
  7. background:#ddd; 
  8. --> 
  9. </style> 
  10. <div class="border-style4">在safari3+、Chrome和FF3.5浏览器里能看到边框阴影</div>  

如将扩散像素调大至16px 阴影颜色换为红色  则有如下效果

 

由于国内的ie比重一直较大,甚至相当一部分还是ie6 ,所以如果要是考虑到兼容行的化,采用css3处理border特效还是不太合适的

 

相关文章