圆角边框及阴影

圆角边框

我们在body里面输入一个div标签

然后在style里面给div 赋值

长宽设置100px 设置一个边框

我们给他加一个标签

    div{
        width:100px;
        height: 100px;
        border: 10px solid red;

        border-radius: 10px;
    }

我们在里面输入一个border-radius：10px

浏览器打开一下

就会发现这个边框的四个角有点圆润

100px的话就会彻彻底底的变成一个圆形

 border-radius: 50px 20px;

我们在里面输入一个50px 和一个20px

浏览器打开一下就会发现

这个圆形左上角，右下角 是50px 的

而右上角，左下角是20px的

说明值只有2个的时候，分别对应左上，右下 和 右上，左下

值为1个的时候，是上下左右

盒子阴影

 div{

   width: 100px;
   height: 100px;
   border: 10px solid red;

   box-shadow: 10px 10px 10px red;
 }

我们在div里面输入box-shadow:10px 10px 10px red;

浏览器打开一下

就会发现，框框多了一个阴影

第一个px 是X轴的阴影

第二个px 是Y轴的阴影

第三个px是阴影半径模糊

第四个的阴影颜色

当然头像也是可以进行发光的

我们把图片放进去

然后用浏览器打开试一下

就会发现图像后面有着红色的阴影

这样图片就有阴影了