CSS深入之第四天

一、盒子样式——边框：

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;}