誰(shuí)能用css畫出來這種??？

https://jsfiddle.net/3m8fhc01/
雖然是可以這樣做,不過目前瀏覽器支持不佳

更新

我用的是radial-gradient,瀏覽器支持不算好,不過我看到答案里有用linear-gradient和box-shadow的,這兩個(gè)的瀏覽器支持還算可以,不過凹進(jìn)去的區(qū)域并不是透明的,就看有沒有這個(gè)需要

切一塊圖片平鋪?zhàn)鳛楸尘皝硖幚戆伞?br>

可以用樣式控制，拆分為一個(gè)小塊，每個(gè)小塊都由外框的大矩形和內(nèi)部的小矩形以及半圓組成

<div>
   /**褐色矩形**/
    <span>頂部淺褐色矩形</span>
    <span>半圓，做border-radius處理</span>
</div>

這個(gè)主要就是用到css3中的背景漸變來做。

這樣的用css做也能做，就是很麻煩而已，要是需要這樣的圖，還不如直接去找ui拿個(gè)圖方便

.radialGradient {
    position: relative; 
    width: 300px; 
    height: 50px; 
    background: radial-gradient(4px circle, #dabd4e, #dabd4e 4px, transparent) 0 21px repeat-x, 
                linear-gradient(to bottom, #dabd4e 0px, #dabd4e) 0 0 no-repeat #ce9828; 
    background-size: 13px 8px, 100% 25px;
  }

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

.box{
            width:210px;
            height: 50px;
            margin: 100px auto;
            background: linear-gradient(to bottom,#dcba51 0%,#dcba51 40%,#cf942c 40% ,#cf942c 100% );
            position: relative;
        }
        .box:after{
            content:"";
            position: absolute;
            top:25%;
            left:10px;
            width:15px;
            height:15px;
            border-radius: 50%;
            background: #dcba51;
            box-shadow: 25px 0 0 #dcba51,50px 0 0 #dcba51,75px 0 0 #dcba51,100px 0 0 #dcba51,125px 0 0 #dcba51,150px 0 0 #dcba51,175px 0 0 #dcba51;
        }