（四）CSS常用特效属性

为什么80%的码农都做不了架构师？>>>   

前言：我们这里只总结一些主流的属性，即我们经常用的属性，如圆角，渐变，动画，阴影，透明度等等。因为css3这些高级属性或规则尚未成为W3C标准一部分，所以我们在使用这些高级css属性时，需要专门指定这些浏览器，即在属性的前面加上这些主流浏览器的标识符。例如：-webkit-代表Chrome、Safari，-moz-代表Firefox，-ms-代表IE，-o-代表Opera。需要注意的是我们先写私有属性，再写标准的属性。下面我们分别说明一些这些特效。

1.圆角边框特效：

border-radius：x/y；/*x:水平，y:垂直，其中y可以不写，默认与x值相同，而且"x/y"这个可以有1-4个参数*/

• 1个参数：4个角效果都一样
• 2个参数：上左(top-left)和下右(bottom-right)代表第1个参数，上右(top-right)和下左(bottom-left)代表第2个参数。
• 3个参数：第1个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。

2.多背景特效：

background：url(image) position/size repeat,url(image) position size repeat,url(image) position size repeat;

• image：指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
• postion：指定对象的背景图像位置。x y
• size：指定对象的背景图像的尺寸大小。和position一起定义x y/m n(auto,contain,cover)
• repeat：指定对象的背景图像如何铺排填充。no-rapeat | repeat | repeat-x | repeat-y | space | round,round:背景图像自动缩放直到适应且填充满整个容器。space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）

3.字体阴影特效：

text-shadow：x y z color，{1-n}?

• x：代表阴影向右偏移量
• y：代表阴影向左偏移量
• z：代表阴影的半径多大
• color：代表阴影的颜色，可以用rgba模式
• {1-n}?：代表整个可以设置多个阴影，中间用逗号隔开

                       

转载于:https://my.oschina.net/hpuwxy/blog/777554