CSS3的出现无疑是一个强大的新东西,我现在在一些Web项目中开始在使用,很方便,同也很高兴能开始使用这一种新的技术。其先进的功能,给我们Web的页面制作真的带来极大的方便,比如说圆角、阴影、渐变等。这里我总结了常用的12种CSS3属性的使用,来帮助大家一起学习CSS3的新功能。
一、圆角——border-radius
早期制作元素的圆角都是使用图片来实现,这样需要增加多个标签来实现,而且对于多色的圆角,给我们的页面制作会带来极大的不便。有了CSS3的圆角属性——border-radius后,我们不必会每种不同的圆角制作图片而烦恼了,我们可以直接使用CSS3来制作。
【css12个技巧,12个真正有用的CSS3技巧】.demo {
-moz-border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
-webkit-border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
}
具体效果如下:
文章图片
有关于CSS3的border-radius具体使用大家可以参考本站的教程《CSS3的圆角Border-radius》。众所周知,IE6-8是不支持CSS3的属性的,如果你希望在IE6-8下也能正常使用CSS3的border-radius属性,我在这里给大家准备了几个解决方案,感兴趣的请参考IE-CSS3、Cross-browser CSS3 border-radius、CSS3 PIE,前面几个是关于CSS解决IE兼容问题的,大家还可以考虑使用js来解决,比如:jQuery Corner、Corner.js以及DD_roundies。
二、阴影和背景尺寸
接下来学习如何使用CSS3来制作阴影(box-shadow和text-shadow)以及背景尺寸(background-size):
文章图片
有关于这方面的介绍大家可以点击《CSS3的文字阴影—text-shadow》介绍了有关于text-shadow的使用、《CSS3 box-shadow》介绍了CSS3的box-shadow如何使用、《