CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影

圆角边框：

border-radius    一个值时表示四个角用的圆半径，4个值时分别是左上角、右上角、左下角、右下角，单位可以是px和百分比，百分比是半径相对于边框长度的比例

在CSS3中我们终于可以快捷地设置圆角，而且通过这个属性我们还可以做出圆、半圆、四分一圆、椭圆等图形。

常用的圆角效果：

div{border-radius: 15px;}

两个值时，分别指水平方向的半径和垂直方向的半径，用/号隔开,如：

div{border-radius:5px 3px 4px 2px/1px 2px 3px 4px;}

圆：

div{border-radius:50%;}

 

边框图片：border-image
这又是CSS3的新属性，可以直接让元素加上自己喜欢的边框图片，提高网站的性能。不过兼容性有
待提高。
例如，设置一个200×200的div的四个角都有边框图片li.png：

div{
border-image: url(li.png) 20/20px;
width: 200px;height: 200px;
}

　　

盒子阴影：
box-shadow 可以对整个元素设置外阴影或内阴影，与字体阴影类似，可设置一个或多个
格式：
box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径][阴影扩散半径][阴影颜色][投影方式]

**[]里面的属性值可以不写
例如，要让一个200×200的div设置一个X轴偏移5px Y轴偏移8px 模糊4px 扩散3px，颜色为红色的
内阴影：

div{
width: 200px;height: 200px;
box-shadow: 5px 8px 4px 3px red inset;
}

　　

段落样式：
line-height 行高（设置字体垂直居中可以通过调整行高实现）
text-indent 首行缩进（常见为2em，一个em单位相对于文本一个字体大小）
text-align 水平对齐方式（left,center,right,justify，其中justify多用于英文网站的两端
对齐）
letter-spacing 文字水平间距，看起来太紧凑的字体会用这个调整
word-wrap 控制内容超过边界时是否断行，英文网站用得比较多

例如，设置P的行高为20px，首行缩进2单位，向左对齐（默认） 文字间距1px：

p{
line-height: 20px;
text-indent: 2em;
text-align: left;
letter-spacing: 2em;
}

　　

文字溢出处理：
text-overflow 溢出部分（超过元素的边距）的显示方式，clip为剪切掉溢出部分，ellipsis
则是显示为省略号...

**特别注意，text-overflow只是说明溢出的样式，真正的效果需要配合overflow和white-space才
能生效

例如:

div{
overflow: hidden;	/*条件1：超出部分隐藏*/
white-space: nowrap;/*条件2：强制在同一行内显示所有文本*/
text-overflow: ellipsis;/*超出部分显示。。。*/
}

　　

渐变色彩：
background-image:linear-graient(to 方向，颜色1 颜色1比例， 颜色2）可以直接做出从一种颜
色渐渐过渡到另一种颜色的视觉图片，可以自定义颜色和过渡颜色的比例和过渡方向,CSS的新属性
，依然是兼容性有待提高

例如要做出一个红色向左渐渐过渡到蓝色的渐变效果图，且红色占据图片的60%：

div{background-image:linear-gradient(to left, red 60%,blue);}

　　

**方向可以是角度单位（deg），以时钟0点方向为0度顺时针方向递增。如180deg表示6点钟方向

 

转载于:https://www.cnblogs.com/deoem/p/5761782.html