Hellow大家好!今天我们来学习两个新的样式,分别是圆角边框和阴影,内容都不是很难哦勤加练习就都能熟练掌握啦!
我们先来看圆角边框,话不多说上案例
div{
width: 300px;
height: 300px;
border: 3px solid red;
}
<div></div>
然后我们就会得到
是一个方方正正的四边形哈,然后我们想要让第一个角变圆该怎么做呢
div{
width: 300px;
height: 300px;
border: 3px solid red;
border-top-left-radius: 10px;
}
<div></div>
这样我们就看到了左上边框变圆啦
border-top-left-radius同理昂,top可以换成bottom,left可以换成right,我可以通过置换这些单词达到改变四个角的圆角
我们还可以一键设置四个角
div{
width: 300px;
height: 300px;
border: 3px solid red;
border-radius: 10px;
}
<div></div>
这样四个角都变圆啦
我们还可以通过调整像素大小去改变圆角的角度
div{
width: 300px;
height: 300px;
border: 3px solid red;
border-radius: 30px;
}
<div></div>
是不是很有意思呢!
再来看一个有意思的
div{
width: 300px;
height: 300px;
border: 3px solid red;
border-radius: 150px;
}
<div></div>
一件非常有意思的事情啦,当像素值调整到一定程度的时候就会变圆啦
本次的更新就到这里啦,点个关注再走哦!