css属性box-shadow 用法写的一个彩虹桥

昨天研究了一下css的一些属性，闲来摸鱼

话不多说进入正题 哈哈哈 瞎写

下面是HTML

<div class="main">

<div class="content"></div>

</div>

最重要的就是css了

.main{

display: flex;

min-height: 100vh;

}

.content{

margin: auto;

width: 300px;

height: 300px;

border-radius: 50%;

box-shadow:

0 0 0 5px inset red,

0 0 0 10px inset orange,

0 0 0 15px inset yellow,

0 0 0 20px inset lime,

0 0 0 25px inset aqua,

0 0 0 30px inset blue,

0 0 0 35px inset magenta;

clip-path: polygon(0 0,100% 0,100% 50%,0 50%);

}

上图喽

 

主要还是用的box-shadow的

inset

可选。将外部阴影 (outset) 改为内部阴影。