CSS3形状比例

当在CSS3中创建一个形状（如下图所示）时，最好的方法是什么？请记住，我希望尽可能保留大部分样式

---

如何将CSS3渐变与

边界半径

属性一起使用？我是白手起家做的，你可以看看

---

哪一部分你不知道该怎么做？非常感谢我还没有掌握的线性梯度on@JessMcKenzie欢迎：）这将对您有所帮助

   div {
        height: 200px;
        width: 200px;
        margin: 50px;
        border: 3px solid #B6801F;
        border-radius: 24px;
        background: #f7d060;
        background: -moz-linear-gradient(top,  #f7d060 0%, #ed8328 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7d060), color-stop(100%,#ed8328));
        background: -webkit-linear-gradient(top,  #f7d060 0%,#ed8328 100%);
        background: -o-linear-gradient(top,  #f7d060 0%,#ed8328 100%);
        background: -ms-linear-gradient(top,  #f7d060 0%,#ed8328 100%);
        background: linear-gradient(to bottom,  #f7d060 0%,#ed8328 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7d060', endColorstr='#ed8328',GradientType=0 );
        box-shadow: 1px 2px 3px #313131;
        position: relative;
    }

    div span {
        position: absolute;
        top: 10px;
        width: 180px;
        left: 10px;
        height: 80px;
        background: -moz-linear-gradient(top,  rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2)));
        background: -webkit-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
        background: -o-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
        background: -ms-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
        background: linear-gradient(to bottom,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#33ffffff',GradientType=0 );
        display: block;
        border-radius: 18px;
}