1 回答

TA貢獻1794條經(jīng)驗 獲得超8個贊
好像沒辦法做到完美的圓。不過你的截圖上看其實是邊緣太銳利造成的,可以簡單改造一下讓圖形柔和一點,如下:
.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;
}
添加回答
舉報