前言:我们这里只总结一些主流的属性,即我们经常用的属性,如圆角,渐变,动画,阴影,透明度等等。因为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}?:代表整个可以设置多个阴影,中间用逗号隔开