一、盒子样式——边框：
1．border-width 边框宽度
如：div{width:200px;height:100px;border-width:1px;}
2.border-color 边框颜色
如：div{width:200px;height:100px;border-color:#ccc;}
3.border-style 边框线
如：div{width:200px;height:100px;border-style:solid}
以上三个可以写成缩写形式：div{width200px;height:100px;border:1px solid #ccc;}
4.border-radius 圆角效果
如：div{width:200px;height:100px;background-color:#000;border-radius:10px;} 即左上、右上、右下、左下角圆角效果都为10px，当为50%时是一个圆。
扩展：
5.border-image 边框图片
如：div{border:10px solid gray;border-image:url(...) 10/10px;}
6.box-shadow 盒子阴影
如：.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; } /*内阴影效果*/
结合内外阴影，可用伪类hover写出按钮按下凹陷效果
二、段落样式：
1.line-height行高
如：p{line-height:27px;} 也可以用百分比，如150%
2.text-indent段落缩进
如：p{text-indent:2em;}
3.text-align：段落对齐
如：p{text-align:right;}
4.letter-spacing文字间距
如：p{letter-spaacing:5px;} 注:英文单词之间用word-spacing
5.text-overflow：文字溢出
如：div,input{
overflow: hidden; /*条件1：超出部分隐藏*/
white-space: nowrap;/*条件2：强制在同一行内显示所有文本*/
text-overflow: ellipsis;/*超出部分显示。。。*/
}
6.word-wrap：段落换行
如：p{word-wrap:break-word;}
三、背景样式：
1.background-color 背景颜色
如：body{background-color:#ccc;}
另：
1.1颜色之rgba
如：div{width:200px;height:100px;background-color:rgba(255,0,0,.5);} 注：a为透明参数，取值在0~1之间，不可为负值。
1.2渐变色彩
如：div{background-image:linear-gradoent(to left,red 30%,blue);}
2.background-image背景图片
如：body{background-image:url(...);}
3.background-repeat背景平铺方式
如：body{background-repeat:no-repeat;}
4.background-position 背景定位
如：body{background-position:left bottom;}
上面2、3、4点可写成缩写模式：body{background:url(...) no-repeat left bottom;}