边框的倒角(圆角)
【将直角倒成圆角】
border-radius:50%
取值 以px为单位的数字
% 设置圆形(50%)
单角设置:
使用两条边去确认一个角,先写上下后写左右
border-top-left:左上
border-top-right:右上
border-bottom-left:左下
border-bottom-right:右下
【例子:画柠檬】
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .d1{ width: 200px; height: 200px; background: #ff0; border-radius: 20px; border-top-left-radius: 70%; border-bottom-right-radius: 70%; } </style> </head> <body> <div class="d1"></div> </body> </html>
边框阴影
box-shadow: a b c d color;
a——x轴的偏移量:10px
b——Y轴的偏移量: 10px
c——阴影的模糊距离,可选值,越大模糊距离越明显
d——阴影的尺寸,指定要在基础阴影上扩出的大小
color——阴影颜色;
inset:把默认的外部阴影设置为内部阴影