在HTML中盒子圆角,盒子阴影与圆角边框.html

盒子阴影、圆角边框

div{width:200px;height:200px;display:inline-block;background:yellowgreen;margin: 20px;}

/*盒子阴影box-shadow*/

div:nth-child(1){

border-radius:50%;

box-shadow:0 0 50px 30px yellow,0 0 50px 40px blue;

}

/*盒子圆角边框*/

div:nth-child(2){border-radius:50%}/*四个角*/

div:nth-child(3){border-radius:50% 20%;} /*左上右下、右上左下*/

div:nth-child(4){border-radius:50% 10% 30%;}/*左上、右上左下、右下*/

div:nth-child(5){border-radius:10% 20% 30% 50%;}/*左上、右上、右下、左下*/

div:nth-child(6){border-radius:50%/20%;}/*水平方向角度/垂直方向角度;*/

div:nth-child(7){border-radius:20%/50%;}/*水平方向角度/垂直方向角度;*/

div:nth-child(8){border-top-left-radius:50%;}/*左上角*/

div:nth-child(9){border-top-right-radius:50%;}/*右上角*/

div:nth-child(10){border-bottom-left-radius:50%;}/*左下角*/

div:nth-child(11){border-bottom-right-radius:50%;}/*右下角*/

div:nth-child(12){width:300px;height:300px;border:70px solid;border-image:url(img/3.jpg) 70 stretch;}

一键复制

编辑

Web IDE

原始数据

按行查看

历史