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



相关阅读:
安装Windows Vista SP1需注意3点
AJAX初体验之上手篇
EasyASP v1.5发布(包含数据库操作类,原clsDbCtrl.asp)
PHPCMS 2008 SP3 常用函数
ASP视频教程:制作在线订购页面
JavaScript调试工具
CSS教程:设计制作网页的CSS经验
DEDECMS系统后台会员功能漏洞解决方法
Oracle Faq(Oracle的字符集问题)
php的正则表达式完全手册
SQL Server 2008 数据挖掘的ADOMD.NET概述
CSS实例教程:网页区块中标题右侧更多
Vbs脚本实现radmin终极后门代码_删除自身
JavaScript 判断日期格式是否正确的实现代码
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4