软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

10个实用的CSS3技巧

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

CSS3相关属性:

    CSS3基本选择器CSS3属性选择器CSS3伪类选择器CSS3渐变——GradientCSS3颜色——RGBACSS3透明——OpacityCSS3圆角——border-radiusCSS3文字阴影——text-shadowCSS3盒子阴影——box-shadowCSS3变形——transformCSS3动画——transitionCSS3动画——animationCSS3边框色——border-colorCSS3图像边框——border-imageCSS3截取文本——text-overflowCSS3 word-wrap和CSS3 white-spaceCSS3盒模型——box-sizingCSS3本地字体——@font-faceCSS3背景尺寸——background-sizeCSS3背景裁剪——background-clipCSS3多背景——Multiple backgroundsCSS3媒体——Media QueriesCSS3多列——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;