1.圆角边框的常用写法
在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。
border-radius 属性用于设置元素的外边框圆角
语法为:
border-radius: 50%; /*百分比*/
border-radius: 100px; /*数值*/
后面的数值可以是1个2个3个或4个
2个是对角
3个是顺时针从左上角开始,右上角和左下角都是中间的值
4个是顺时针从左上角开始,分别是四个角的值
也可以单独写一个角角:
border-top-left-radius: (左上角) border-bottom-right-radius:(右下角)
2.盒子阴影
常用语法:
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3 );
注意:
- 默认的是外阴影(outset),但是不能画蛇添足写这个单词,否则是无效的
- 盒子阴影不占用空间,不会影响其他盒子的排列
可以做一个鼠标划过就有阴影的功能
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3 );
}
3.文字阴影
常用语法:
text-shadow: h-shadow v-shadow blur color;
div {
font-size: 50px;
color: skyblue;
font-weight: 700;
text-shadow:5px 5px 6px rgba(0,0,0, .3 );
}