标签：
1. border-width
边框宽度：
div { width:200px; height:200px; border-style:solid; border-width:5px; ｝
/*border-top-width 设置上边框宽度
border-bottom-width 设置下边框宽度
border-left-width 设置左边框宽度
border-right-width 设置右边框宽度*/
2. border-color
边框颜色:
div { width:200px; height:200px; border-style:solid; border-width:5px; border-color:red;｝
/*border-top-color 设置上边框颜色
border-bottom-color 设置下边框颜色
border-left-color 设置左边框颜色
border-right-color 设置右边框颜色*/
3. border-style
边框线：
div { width:300px; height:100px; border-style:solid; ｝
边框线属性值有：
none（无轮廓）
hidden（隐藏边框。IE7及以下尚不支持）
dotted（点状轮廓。IE6下显示为dashed效果）
dashed（虚线轮廓）
solid（实线轮廓）
double（双线轮廓）
groove（3D凹槽轮廓）
ridge （3D凸槽轮廓）
inset（3D凹边轮廓）
outset（3D凸边轮廓）
4. border
边框：
可以将以上面三个样式border-width 、border-style 、 border-color 缩写：
div {
width:200px;
height:200px;
border:1px solid #FF0000;
}
5. border-radius
圆角：
/* 所有角都使用半径为10px的圆角 */ div{ border-radius:10px;} /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ div{ border-radius: 5px 4px 3px 2px; } /*也可以分别设置每个角的垂直半径和水平半径,用斜杠隔开，第一个参数表示左上角开始顺时针的水平半径，第二个参数表示左上角开始顺时针的垂直半径*/ div{ border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; } /*圆*/ div{ border-radius:50% }
/*半圆*/
div{
width: 200px;
height: 100px;
border-style: solid;
border-color:red;
border-width:5px;
border-radius: 100px 100px 0 0 ;
}
半圆效果如下：
6. border-image
边框图片：
div { border: 10px solid gray; border-image: url(1.png) 10/10px; }
/*
<‘ border-image-source ‘>：设置或检索对象的边框是否用图像定义样式或图像来源路径。
<‘ border-image-slice ‘>：设置或检索对象的边框背景图的分割方式。
<‘ border-image-width ‘>：设置或检索对象的边框厚度。
<‘ border-image-outset ‘>：设置或检索对象的边框背景图的扩展。
<‘ border-image-repeat ‘>：设置或检索对象的边框图像的平铺方式。
*/
7. box-shadow（盒子阴影）
使用方法：
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
.outset { box-shadow: 5px 5px rgba(0, 0, 0, .6); } /*外阴影常规效果*/
.outset-blur{ box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6); }/*外阴影模糊外延效果*/
. inset { box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset; } /*内阴影效果*/
1. line-height（行高）
p { line-height:25px;}
p { line-height:150%}
2. text-indent（段落缩进）
p { text-indent:2em;} /*首行缩进个2个字符*/
3. text-align：
p { text-align:right;}
p { text-align:center;}
属性值有：
left（内容左对齐）
center（内容居中对齐）
right （内容右对齐）
justify （内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。）
4. letter-spacing（文字间距）
p { letter-spacing:5px;}/*每个文字与文字之间的距离是5px*/
5. text-overflow（文字溢出）
text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
div,input{ overflow: hidden; /*条件1：超出部分隐藏*/ white-space: nowrap;/*条件2：强制在同一行内显示所有文本*/ text-overflow: ellipsis;/*超出部分显示。。。*/ }
6. word-wrap（段落换行）
normal 允许内容顶开或溢出指定的容器边界。
break-word 内容将在边界内换行。如果需要，单词内部允许断行。
p { word-wrap: break-word; }
1. background-color（背景颜色）
body { background-color:#CCCCCC;}
2. rgba
RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的 颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。
语法：
color：rgba(R,G,B,A)以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的 取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览 器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。
border-color:rgba(255 , 0 , 0 , .7); /*.7是alpha透明度为70%的意思*/ background-color:rgba( 100 , 120 , 60 , .5 ); border-color:rgba(255 , 0 , 0 , .7);
3. linear-gradient（渐变色彩）
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。
由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。
W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。
background-image:linear-gradient(to left, red 30%,blue);
4. background-image（背景图片）
body { background-image:url(images/bg.gif);}
5. background-repeat（背景平铺方式）
body { background-repeat:no-repeat;}/*背景图像不平铺*/
属性值：
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺
repeat：背景图像在横向和纵向平铺
no-repeat：背景图像不平铺
round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）
space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）
6. background-position（背景定位）
body { background-position:left bottom;}
body { background-position:30% 20px;}
7. background
背景样式缩写
.nav { background:#red url(images/icon.jpg) no-repeat left 0px;
/*背景颜色为红色，要定位的背景图像的路径，背景图像不平铺，定位在左边然后上边为0px的位子。*/
}
标签：
原文地址：http://www.cnblogs.com/dadayang/p/5762861.html
