CSS3五个技巧给你的网站带来出色的效果


CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持。本文介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不应该用在正式的客户项目,它们更适合你的个人博客站点,Web 设计社区,或者不会有客户向你投诉的场合。

1. 圆角效果

Twitter. 

请参阅:

  • W3C Working Draft
  • Border-radius on CSS3.info
  • The Art of Web

 

 2. 图形化边界

顾名思义,图形化边界就是允许使用图片作为对象的边界,语法如下:

border: 5px solid #cccccc;  
-webkit-border-image: url(/images/border-image.png) 5 repeat;  
-moz-border-image: url(/images/border-image.png) 5 repeat;  
border-image: url(/images/border-image.png) 5 repeat; 

这里,border: 5px   设定了边界的宽度,然后,每个边界的图片定义告诉浏览器,使用图片的多大一部分来充当边界。边界图片还可以针对每一条边单独设置:

border-bottom-rightright-image  
border-bottom-image  
border-bottom-left-image  
border-left-image   
   border-top-left-image   
   border-top-image   
   border-top-rightright-image   
   border-right-image 
 

支持的浏览器: Firefox 3.1, Safari , Chrome.
用例: Blog.SpoonGraphics.

请参考:

  • W3C Working Draft
  • Border-image on CSS3.info
  • Border-image in Firefox


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3