12个真正有用的CSS3技巧

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

CSS3的出现无疑是一个强大的新东西,我现在在一些Web项目中开始在使用,很方便,同也很高兴能开始使用这一种新的技术。其先进的功能,给我们Web的页面制作真的带来极大的方便,比如说圆角、阴影、渐变等。这里我总结了常用的12种CSS3属性的使用,来帮助大家一起学习CSS3的新功能。

一、圆角——border-radius

早期制作元素的圆角都是使用图片来实现,这样需要增加多个标签来实现,而且对于多色的圆角,给我们的页面制作会带来极大的不便。有了CSS3的圆角属性——border-radius后,我们不必会每种不同的圆角制作图片而烦恼了,我们可以直接使用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-CSS3Cross-browser CSS3 border-radius CSS3 PIE,前面几个是关于CSS解决IE兼容问题的,大家还可以考虑使用js来解决,比如:jQuery CornerCorner.js以及DD_roundies

二、阴影和背景尺寸

接下来学习如何使用CSS3来制作阴影(box-shadow和text-shadow)以及背景尺寸(background-size):

有关于这方面的介绍大家可以点击《CSS3的文字阴影—text-shadow》介绍了有关于text-shadow的使用、《CSS3 box-shadow》介绍了CSS3的box-shadow如何使用、《

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/blog/183.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部