10个实用的CSS3技巧

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

CSS3的运用是越来越成熟了,在QQ群时常能看到朋友讨论这方面的技术,我也学习CSS3的相关技术也有一年之久了,收获也不少。在我的blog中也收集了不少这方面的教程。为了更方便的与大家分享,我今天特意将本站的有关于CSS3的运用罗列一下,并列出10个常用的相关属性,最后在以一个实例来与大家再次学习相关的CSS3的应用,希望大家能喜欢。

CSS3相关属性:

  1. CSS3基本选择器
  2. CSS3属性选择器
  3. CSS3伪类选择器
  4. CSS3渐变——Gradient
  5. CSS3颜色——RGBA
  6. CSS3透明——Opacity
  7. CSS3圆角——border-radius
  8. CSS3文字阴影——text-shadow
  9. CSS3盒子阴影——box-shadow
  10. CSS3变形——transform
  11. CSS3动画——transition
  12. CSS3动画——animation
  13. CSS3边框色——border-color
  14. CSS3图像边框——border-image
  15. CSS3截取文本——text-overflow
  16. CSS3 word-wrap和CSS3 white-space
  17. CSS3盒模型——box-sizing
  18. CSS3本地字体——@font-face
  19. CSS3背景尺寸——background-size
  20. CSS3背景裁剪——background-clip
  21. CSS3多背景——Multiple backgrounds
  22. CSS3媒体——Media Queries
  23. CSS3多列——multi-columns

上面列出的主要是我学习了的CSS3相关属性(这些是根据老版本的css3手册学习下来的清单),当然还有很多相关方面的属性介绍,大家可以看看这里(要翻哟^-^)。那么今天我主要是想给大家从上面的列表中推荐大家10个有必要撑握的CSS3属性技巧,以帮助大家在平时的制作是搞高自己的技能,下面我们就开始吧。

1、border-radius

圆角效果可以说现在到处可见,应用也是相当的广,但不知道您还是停留在使用图片制作圆角上呢?也开始使用了CSS3来制作圆角。如果你还没有使用过CSS3制作圆角的话,也不用紧,因为我第一个要向大家推荐的就是使用CSS3 border-radius制作圆角。

上图显示的是border-radius的语法写法,但值得庆幸的是在safari,chrome,ff新版本浏览器中不需要加他们的专有属性中,不过你要兼容老版本的浏览器还是加上为好。大家或许只认为border-radius能帮我们实现圆角效果,其实他还能帮我们制作出一些别的图形效果,比如说半圆,圆之类的,如下面的代码:

		.circles {
			-moz-border-radius: 50px;  
			-webkit-border-radius: 50px;  
			border-radius: 50px; 
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css3/ten-css3-properties-you-need-to-know

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

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