CSS边框

1.圆角边框

当 border-radius 只设置一个值时，即

    <style>
        div{
            height: 100px;
            width: 100px;
            border: 2px solid red;
            border-radius: 10px;
        }
    </style>

页面如图所示：

 

 但是当设置两个值时：

 border-radius: 10px 50px;

会发现

 

页面变成了上图，即当radius有两个值时，第一个值控制左上和右下，第二个值控制右上和坐下，

当设置三个值时：

 border-radius: 10px 50px 70px;

页面：

 

 得知，三个值时，第一个值控制左上，第二个依旧控制右上和左下，第三个控制右下，

因此当有四个值时，按顺序分别控制左上，右上，右下，左下

border-radius: 10px 50px 70px 1px;

 

2.盒子阴影

 box-shadow: 10px 10px 10px yellow;

同文本阴影相似