鍍金池/ 問答/HTML5  HTML/ 為什么我用css漸變繪制出來的圓是這個(gè)鬼樣子？

為什么我用css漸變繪制出來的圓是這個(gè)鬼樣子？

如下圖，一點(diǎn)都不圓，大家?guī)臀铱纯次业拇a是否有問題

clipboard.png

html

 <div class="box"></div>


css

.box{
    position: relative;
    width: 300px;
    height: 140px;
    background: red;

}
.box:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;

    background: radial-gradient(farthest-corner, #fff 50%, transparent 0%);
    background-size: 20px 20px;
    background-repeat: repeat-y;
}
.box:after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;

    background: radial-gradient(farthest-corner, #fff 50%, transparent 0%);
    background-size: 20px 20px;
    background-repeat: repeat-y;
}
回答
編輯回答
何蘇葉

好像沒辦法做到完美的圓。不過你的截圖上看其實(shí)是邊緣太銳利造成的，可以簡單改造一下讓圖形柔和一點(diǎn)，如下：

clipboard.png

.box{
    position: relative;
    width: 300px;
    height: 140px;
    background: red;

}
.box:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;

    background: radial-gradient(farthest-corner, #fff 50%, rgba(255, 255, 255, .5) 53%, rgba(255, 255, 255, 0) 0%);
    background-size: 20px 20px;
    background-repeat: repeat-y;
}
.box:after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;

    background: radial-gradient(farthest-corner, #fff 50%, rgba(255, 255, 255, .5) 53%, rgba(255, 255, 255, 0) 0%);
    background-size: 20px 20px;
    background-repeat: repeat-y;
}
2018年5月27日 00:10