有趣的样式#CSS3

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>

一件非常有意思的事情啦，当像素值调整到一定程度的时候就会变圆啦

本次的更新就到这里啦，点个关注再走哦！