不如圖片寫出來特別復(fù)雜

不嫌麻煩的話也可以用css直接實(shí)現(xiàn)。具體辦法是在一個(gè)方形盒子四角用圓做疊加，用定位的方式實(shí)現(xiàn)內(nèi)凹圓角。

可以用radial-gradient切圓角：

<div id="container"></div>
#container{
        width: 300px;
        height: 100px;
        background: radial-gradient(50px 50px at top left ,transparent 50%, #f00 50%) top left,
                    radial-gradient(50px 50px at bottom left ,transparent 50%, #f00 50%) bottom left,
                    radial-gradient(50px 50px at top right ,transparent 50%, #f00 50%) top right,
                    radial-gradient(50px 50px at bottom right ,transparent 50%, #f00 50%) bottom right;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }

在圖片的每個(gè)角上放兩個(gè)div,下面的那個(gè)背景設(shè)置成白色的上面那個(gè)設(shè)置成半透明

最好的辦法，讓ui改圖，前端做這個(gè)沒啥意義。

樓上用圓形漸變那位寫的不錯(cuò)，不過人家有陰影，這樣依然無法實(shí)現(xiàn)。

只能用 SVG，建議直接把原圖導(dǎo)出 SVG。

用css有點(diǎn)兒復(fù)雜啊。還不如直接把圖片做成這樣

直接ps扣一下就好了嘛