如何利用css实现圆环效果(2)-木庄网络博客

2022-03-25 00:08:13 PHP中文网 JavaScript 百度已收录

4、使用border-shadow

1	`<div` `class="element4"></div>`

.element4{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px lightpink ;
            margin: auto;
        }

1	`<div` `class="element5">`

.element5{
          width: 200px;
          height: 200px;
          background-color: #009966;
          border-radius: 50%;
          box-shadow: 0 0 0 50px lightpink inset;
          margin: auto;
      }

5、使用radial-gradient

1	`<div` `class="element6"></div>`

.element6{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);
        }

以上就是如何利用css实现圆环效果的详细内容，更多文章请关注木庄网络博客！

返回前面的内容