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

时间:2023-03-08 17:11:50
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点钟方向