1、为元素创建圆角
（1）、为元素创建四个相同的圆角birder-radius:r
.all-corners {
-webkit-border-radius: 20px; /* 可选*/
border-radius:20px;
}
（2）、为元素创建一个圆角border-top-left-radius:r
.one-corner {
-webkit-border-top-left-radius:75px; /* 可选 */
border-top-left-radius: 75px;
}
- top-right（右上方圆角）、bottom-right（右下圆角）、top-left（左上圆角）、bottom-left（左下圆角）
（3）、创建椭圆形圆角border-radius:x/y
.elliptical-corners {
-webjit-border-radius: 50px/20px;/*可选*/
border-radius: 50px/20px;
｝
（4）、使用border-radius创建圆形-webkit-border-radius:r; border-radius:r; r的值为元素高度或宽度的一半
.circle {
-webikt-border-radius:50%;
border-radius:50%;
}
- border-radius仅影响施加该样式的元素的角，不会影响其子元素的角background-clip:padding-box
- 为避免元素的背景透过圆角，在元素的border-radius声明后加一条样式：
background-clip:padding-box
- border-radius不可继承
2、为文本添加阴影
（1）、为元素的文本添加阴影text-shadow
- x-offset（水平偏移量，整数、0）、y-offset（垂直偏移量，整数、0）、blur-radius（模糊半径，必须正整数、0）、color
.basic {
text-shadow: 3px 3px 10px gery;
}
（2）、为元素的文本添加多重阴影
.basic {
text-shadow: 3px 3px 10px gery,
2px 2px 10px white;
}
（3）、将text-shadow改回默认值none
3、为其他元素添加阴影box-shadow
- x-offset、y-offset、blur-radius、spread（扩张或收缩阴影）、color
- 规则同文本阴影，spread为负值时，阴影比应用样式的元素小一些，insert关键字可以让阴影位于元素内部
- border-shadow不可继承
（1）、为元素添加阴影
.about {
border: 1px solid blue;
-webilt-box-shadow: 0 0 3px blue;/* 希望兼容旧版Arodid、mobie safari、safari浏览器*/
box-shadow: 0 0 3px blue;
}
（2）、创建内阴影insert
.about {
border: 1px solid blue;
-webilt-box-shadow:insert 0 0 3px blue;/* 希望兼容旧版Arodid、mobie safari、safari浏览器*/
box-shadow:insert 0 0 3px blue;
}
（3）、为元素应用多重阴影
.about {
border: 1px solid blue;
-webilt-box-shadow: 0 0 3px blue,
1 1 4px white;/* 希望兼容旧版Arodid、mobie safari、safari浏览器*/
box-shadow: 0 0 3px blue,
1 1 4px white;
}
（4）、将box-shadow改回默认值
-webiket-box-shadow: none;
box-shadow:none;
4、应用多重背景
为单个元素应用多重背景图像
background-color: blue;
background-image: url1,
uri2;
background-position: x-offset1 y-offset1,
x-offset2 y-offset2;/* 对于background-image中指定的每个url，都应有一组x-offset、y-offset*/
background-repeat: repeat1-x/no-repeat1,repeat1-y/no-repeat1,
repeat2-x/no-repeat2,repeat2-y/no-repeat2; /*对于background-image中指定的每个url，都对应一个值*/
5、使用渐变背景
（1）、创建备用背景颜色
background/background-color:color;
（2）、定义线性渐变
background: linear-gradient(方向，指定颜色或指定颜色和颜色的停止位置);
- 方向：默认从上往下、to top 、to right、to left、to bottom right、to bottom left 、to top right、to top left、角度值（45deg）
（3）、 定义径向渐变
background：radial-gradient(指定渐变形状，指定渐变尺寸size 指定渐变的位置，指定颜色或指定颜色和颜色的停止位置)
- 指定渐变形状：circle、ellipse、默认（根据后面指定的尺寸自行定义）
- 指定渐变的尺寸size：一个值（不能是百分数）300px代表渐变宽度、高度；两个值300px 175px分别代表宽度、高度；默认（farthest-corner最远的角）；关键字（closest-side、farthest-size、closest-corner、farthest-corner）代表相对于渐变的中心
- 指定渐变的位置：默认（从元素的中心开始）、pos（at top、at right、at left、at bottom right、at bottom left、at top right、at top left）、渐变中心位置的一对坐标（at 200px 4px、at 33% 70%、at 50% -10px）
（4）、指定颜色
- 输入至少两种颜色、每个颜色之间用
逗号分隔
- 第一个颜色出现在渐变的开始位置，最后一个出现在渐变的结束位置
（5）、指定颜色和颜色的停止位置
background:linear(to top right,yellow 10%, green 70%，blue);
6、为元素设置不透明度opacity
opacity: .5/50%;
- 默认1、0.00（完全透明）~1.00（完全透明）
- opacity属性影响的是整个元素包括其内容的透明度，而background-color：rab（）影响背景的透明度
- 不可继承
7、生成内容的效果:after、:before、cintent
.more:after{
content: " >>";
8、使用sprite拼合图像
.icon:befpre {
background-image: url(sprite.png);
content:" ";/* 生成的空格的背景图像*/
display:block;/* 设置与图标大小匹配的高度和宽度*/
height:16px;/* 图标高度 */
position:absolute;
width:16px;/* 图标宽度*/
}
- 每个sprite都可以包含尺寸不同的图像，这些图像之间的距离也可以不同，可以水平排列、也可以竖直排列。
- 可以将sprite背景直接用于元素本身，不一定要使用：before或：after
- 可以在链接或其他元素的hover状态中修改sprite的background-position以实现翻转效果
