一、盒子样式——边框:
1.border-width 边框宽度
如:div{200px;height:100px;border-1px;}
2.border-color 边框颜色
如:div{200px;height:100px;border-color:#ccc;}
3.border-style 边框线
如:div{200px;height:100px;border-style:solid}
以上三个可以写成缩写形式:div{width200px;height:100px;border:1px solid #ccc;}
4.border-radius 圆角效果
如:div{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{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;}