css 渐变。这个渐变怎么写

img

背景色可用background+linear-gradient实现,环形用border来实现

题主要的代码如下,有帮助麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~

img

<style>
    .linegradient {
        border: solid 1px #f00;
        position: relative;
        background: linear-gradient(0,yellow,#ffc2c6);
        width: 300px;
        height: 300px;
        overflow: hidden;
    }

    .linegradient div {
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%
    }

    .linegradient div.circle {
        width: 60px;
        height: 60px;
        margin-left: -30px;
        margin-top: -30px;
        background: #f00;
    }

    .linegradient div.ring {
        border: solid 30px #f00;
        width: 120px;
        height: 120px;
        margin-top: -90px;
        margin-left: -90px;
    }
    .linegradient div.ring1 {
        width: 240px;
        height: 240px;
        margin-top: -150px;
        margin-left: -150px;
    }

    .linegradient div.ring2 {
        width: 360px;
        height: 360px;
        margin-top: -210px;
        margin-left: -210px;
    }
</style>
<div class="linegradient">
    <div class="circle"></div>
    <div class="ring"></div>
    <div class="ring ring1"></div>
    <div class="ring ring2"></div>
</div>

参考: