使用css3进行增强

标签：

  使用css3进行增强

1，为元素创建圆角

border-radius:25px;

.about img{

    border: 5px solid #bebebe;
    float: left;
    margin-right: 5px;
    border-radius: 10px;
}

border-radius的属性值也和margin，padding，border 一样可以有1

~4个，其代表的上下左右也是一样的。

border-top-left-radius：r；（左上，同理可以分别创建四个不同的圆角）

2，为文本添加阴影

1 h1
2 {
3 text-shadow: 5px 5px 5px #FF0000;
4 }

5px 5px 5px #FF0000;  分别代表水平偏移量，垂直偏移量，模糊半径（必须是正整数），颜色

可对文本添加多重阴影：text-shadow: 5px 5px 5px #FF0000,2px 8px 56x #fff;

改回默认值：text-shadow: none;

text-shadow属性是继承的。

3，为元素添加阴影
box-shadow：inset；spread；（有两个属性可以选择）

box-shadow可以接受六个值：水平偏移量，垂直偏移量，模糊半径（必须是正整数）（可选），inset（可选，创建内阴影），spread（可选，创建外阴影），颜色
也可以多重阴影，和文本多重阴影类似。
改回默认值和文本阴影类似。

box-shadow属性是不继承的。

4，应用多重背景
为单个元素应用多重背景：
background-color：b,
background-imge:u,  (u为图形引用的相对或据对URL)
background-position：p,(p是成对的x-offset和y-offset 可正可负)
background-repeat：r;（repeat-x，repeat-y，no-repeat，用逗号隔开，分别对应imge中的u的每个url）

5，使用渐变背景
background：silcer；
background：linear-gradient（to right，silver，black）；（从左往右，从银色到黑色。top right，bottom right。可以从四面八方变过来）
a、创建备用背景色：background：color；
b、定义线性渐变：background：linear-gradient（to top.....（等多方位都可以变化），角度值，颜色）；
c、定义径向变化：background：radial-gradient（变换形状，渐变尺寸，size（如果只有一个值，不能用分数），变换位置，指定颜色）；

6，为元素设置不透明度
oparity：0；（0表示元素的不透明度，一般为两位小数，不带单位）

使用sprite拼合图像

使用css3进行增强

标签：

原文地址：http://www.cnblogs.com/lal-fighting/p/5078772.html