1.文字阴影
text-shadow 文字阴影
参数1: X轴的偏移量
参数2: Y轴的偏移量
参数3: 阴影的大小
参数4: 阴影的颜色
给负值为反方向,阴影可以叠加,不建议用叠加
div{
font: 100px/200px "微软雅黑";
text-align: center;
text-shadow: 5px 5px 10px red,-5px -5px 10px green;
}
<div>kaivon</div>
2.文字描边
-webkit-text-stroke 文字描边 (只适用于webkit内核的浏览器)
参数1: 描边的大小
参数2: 颜色
div{
font: 100px/200px "微软雅黑";
text-align: center;
color: #000;
-webkit-text-stroke: 3px red;
}
<div>kaivon</div>
3.盒模型阴影
box-shadow 盒模型阴影
参数1: 阴影的方向
inset 内阴影
省略的话是外阴影
参数2: X轴的偏移量
参数3: Y轴的偏移量
参数4: 阴影的扩展半径(先扩展再模糊,可先参数)
参数5: 阴影的大小
参数6: 阴影的颜色
盒模型的阴影也可以叠加
div{
300px;
height: 300px;
margin: 100px auto;
background: red;
box-shadow: inset 10px 10px 20px 10px green;
}
<div></div>
4.圆角 border-radius:
border-radius 圆角
一个值(20) 四个角都是20,一样大
两个值(20 40) 上下(20)、左右(40)各一样
三个值(20 40 60) 上(20)、右左(40)、下(60)
四个值(10 20 30 40) 上(10)、右(20)、下(30)、左(40)
div{
200px;
height: 200px;
margin: 100px auto;
border: 10px solid #000;
border-radius: 10px 20px 30px 40px;
/*border-radius: 50%;(矩形是正方形就变成圆形,不是正方形就变成椭圆)*/
}
<div></div>