CSS3必须要知道的10个顶级命令

1.边框圆角&＃xff08;Border Radiuas&＃xff09;

这个是我们在平常很常用的吧&＃xff0c;以前我在用div圆角的时候&＃xff0c;特别特别的痛苦&＃xff0c;不管是用CSS来画圆角&＃xff0c;还是用图片来画圆角都不那么容易&＃xff0c;但是现在好了&＃xff0c;在CSS3中&＃xff0c;直接只需要如下面饿代码&＃xff0c;就能做出美轮美奂的圆角效果了~~~

实例效果图&＃xff1a;

2.盒阴影&＃xff08;Box Shadow&＃xff09;

就是让一个div能够产生阴影效果。代码如下&＃xff1a;

需要注意的是&＃xff0c;它有4个参数&＃xff1a;

第一个参数&＃xff1a;水平偏移的位置&＃xff0c;它有正数或者负数。如果是正数的话&＃xff0c;那么表示边框的右&＃xff08;right&＃xff09;边产生阴影&＃xff1b;否则如果是负数的话&＃xff0c;那么它的左边&＃xff08;left&＃xff09;框产生阴影效果。

第二个参数&＃xff1a;垂直偏移的位置。它也有正数或者负数。如果是正数的话&＃xff0c;那么表示下&＃xff08;bottom&＃xff09;边框有阴影&＃xff1b;否则如果是负数的话&＃xff0c;那么它的上&＃xff08;top&＃xff09;边框有阴影。

第三个参数&＃xff1a;阴影的大小

第四个参数&＃xff1a;颜色&＃xff0c;这个很好理解。

实例效果图&＃xff1a;

注意上面&＃xff0c;第二个参数&＃xff0c;我用的是负数。

有box shadow &＃xff0c;还有一个属性是text-shadow&＃xff0c;这个主要是运用在文字上面的。

代码如下&＃xff1a;

实例效果图&＃xff1a;

很酷吧&＃xff01;

3.透明度&＃xff08;Transparency or RGBA&＃xff09;

设定元素的透明度一直以来都是比较棘手的问题&＃xff0c;不同的浏览器之间有不同的使用方法。

比如我以前需要如下进行设置透明度&＃xff1a;【注意&＃xff1a;此方法不建议用】

Firefox, Safari, Chrome和Opera下的CSS透明度

IE下的CSS透明度

IE8的CSS透明度的方法语法如

Firefox和Safari旧版本所需的透明度设置&＃xff1a;

是不是特别特别的坑爹啊&＃xff01;~~。

还好&＃xff0c;我们现在生活在一个开始完美的时代&＃xff0c;CSS 3出来之后&＃xff0c;有了新的一个名词就是透明度&＃xff08;transparency&＃xff09;的属性。

代码如下&＃xff1a;

里面有4个参数&＃xff0c;前3个参数特别好理解&＃xff0c;就是rgb颜色的&＃xff08;别告诉我&＃xff0c;还不知道什么叫rgb颜色值&＃xff0c;不知道的拉出去打屁屁&＃xff09;&＃xff0c;最最重要的就是第四个值了。它的值在0到1之间&＃xff0c;值越大表明越不透明。

不过&＃xff0c;也别高兴的太早&＃xff0c;在这里还是有一个特别的例子&＃xff0c;可能大家也想到 就是微软的IE。微软老喜欢整个和别人不一样的东西&＃xff0c;累死的是我们程序员。

IE理解上面的语句&＃xff0c;直接的理解为背景颜色&＃xff0c;而不会理解为 rgba。为了我们在开发的时候确保在所有的浏览器中实现完美兼容&＃xff0c;我们需要如下进行修正&＃xff1a;

:last-child 是伪选择器&＃xff0c;在CSS2开始在css中使用选择器。IE 对这个是不认识&＃xff0c;所以它不会执行它后面的代码。


所以&＃xff0c;上面就实现了完美兼容。

实例效果图&＃xff1a;

4.列数&＃xff08;Columns&＃xff09;布局

就是说可以把框框内部的内容分成几个列数。

先上代码&＃xff1a;

-moz-column-count:表示列的数目&＃xff0c;比如2&＃xff0c;那么表示2分成2列。

-moz-column-rule:表示中间分割线的样式。

实例效果图&＃xff1a;

上面第一个我分层2列&＃xff0c;而第二个我是分成3列的。

还有就是第一个的  -webkit-column-rule: 3px solid #6e8eb9;我这样设置&＃xff0c;所以它的分割线就是加粗的。

5.显示多个背景图片

你可以在一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法&＃xff0c;但引用图片之间需用“&＃xff0c;”逗号隔开。第一个图片是定位在元素最上面的背景&＃xff0c;后面的背景图片依次在它下面显示&＃xff0c;如下&＃xff1a;

代码如下&＃xff1a;

实例效果图&＃xff1a;

但是&＃xff0c;这里还是别高兴的太早&＃xff0c;又是微软那孩子没事干&＃xff0c;又在这里搞一个不兼容性&＃xff0c;所以你 不得下下面代码&＃xff0c;为了兼容所以浏览器&＃xff1a;

这样子才OK.

6.轮廓&＃xff08;outlines&＃xff09;

也就是在框在的内部在画一个框。

代码如下&＃xff1a;

参数很好理解&＃xff1a; outline: 1px solid #699; 这个画框&＃xff1b;

outline-offset 这个表示里面的偏移量&＃xff0c;通俗点说 就是距离。

实例效果图&＃xff1a;

 

7.背景渐变&＃xff08;Background Gradients&＃xff09;

顾名思义&＃xff0c;渐变就是颜色慢慢的开始变淡。在CSS3中&＃xff0c;渐变效果非常非常的灵活&＃xff0c;而且运用也很方便。

不过&＃xff0c;这里需要注意的一点是在Firfox和chrome浏览器之间的设定没有和上面的那么简单。

Firfox 的代码&＃xff1a;

Chrome or safari的代码&＃xff1a;

参数解释下&＃xff0c;比如在firfox中&＃xff0c;

第一个参数&＃xff1a;bottom 表示运用的位置&＃xff0c;bottom表示在顶部&＃xff0c;当然你也可以有其他地方&＃xff0c;比如left表示在方框的左边&＃xff0c;right在方便的右边&＃xff0c;top就是在顶部啦&＃xff01;~。

而在chrome中&＃xff0c;color-stop&＃xff1a;用来表示开始和结束的值以及里面的颜色。其余参数和上面一样。

实例效果图&＃xff1a;

8.旋转&＃xff08;Rotate&＃xff09;

旋转&＃xff0c;顾名思义就是转动元素的角度&＃xff0c;很好理解。

代码&＃xff1a;

rotate&＃xff08;角度&＃xff09;里面的数组就是角度的意思&＃xff0c;deg是英文单词degree的缩写 度数的意思。

实例效果图&＃xff1a;

注意&＃xff1a;

如果是负数的话&＃xff0c;那么它会向相反方向转动。

如果是超过360度的话&＃xff0c;那么会和360进行求余运算&＃xff0c;比如你写 rotate(380deg)&＃xff0c;那么它的值等效于rotate&＃xff08;20deg&＃xff09;。

9.反射&＃xff08;reflect&＃xff09;

反射&＃xff0c;其实也就是倒影效果。

代码如下&＃xff1a;

实例效果图&＃xff1a;

10.转换&＃xff08;Transitions&＃xff09;

注&＃xff1a;次内容来自zhangxinxu的博客 。谢谢他的努力。

其作用是&＃xff1a;平滑的改变CSS的值。无论是点击事件&＃xff0c;焦点事件&＃xff0c;还是鼠标hover&＃xff0c;只要值改变了&＃xff0c;就是平滑的&＃xff0c;就是动画。于是乎&＃xff0c;只要一个整站通用的class&＃xff0c;就可以很轻松的渐进增强地实现动画效果&＃xff0c;超有实用价值的说。

transition有下面些具体属性&＃xff1a;

transition-property :* //指定过渡的性质&＃xff0c;比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型&＃xff0c;有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

上面的主要用在transition-timing-function里面的参数。表示速度的快慢。

代码&＃xff1a;

HTML

CSS代码&＃xff1a;

此主要实现的效果是从左边移动到右边&＃xff01;~~。根据参数的不同&＃xff0c;进行速度的不同。

实例效果图&＃xff1a;初始化时&＃xff1a;

实例效果图后&＃xff1a;

可能有些朋友对这个5个功能不熟悉&＃xff0c;所以它们的速度如图&＃xff1a;

最后奉献2张有用的图&＃xff1a;

CSS 性质

CSS 选择器

算了&＃xff0c;就先到这里吧&＃xff01;。希望对你们有用&＃xff01;~。哈哈~~。

CSS 3中有很多非常酷的东西&＃xff0c;需要我们共同去挖掘&＃xff01;~。

 

愿你和你的家人一切安好&＃xff01;~。