怎么样html的边框变色,CSS 实现彩色边框效果

CSS3新增了box-shadow，用于设置盒子的阴影，今天玩了一下！纯CSS实现的彩色边框效果。

效果展示：

完整代码如下：

Document

div.one div {

width: 100px;

height: 100px;

margin: 50px auto;

background-color: rgb(245, 234, 234);

box-shadow:

10px 0 15px -2px rgb(11, 11, 235),

0 -10px 15px -2px rgb(103, 167, 8),

-10px 0 15px -2px rgb(228, 64, 4),

0 10px 15px -2px rgb(241, 7, 132);

}

div.one div:nth-of-type(1) {

border-radius: 5%;

}

div.one div:nth-of-type(2) {

border-radius: 30%;

}

div.one div:nth-of-type(3) {

border-radius: 50%;

}