如何制作带有渐变和阴影的css曲线框

Question

我正在尝试使css曲线框与渐变和阴影以及。所以我如何才能使纯css，它应该只在一个div，没有太多的代码。

有关参考资料，请参阅附图：

​

​

Answer 1

你只要像这样做边界半径就行了

Css

div {
width:200px;
margin:auto;
margin-top:20px;
height:200px;
background:red;
border-radius:25px;
box-shadow: inset 0 0 15px rgba(68,68,68,0.8);;
position:relative;
}

div:beforae {
content:"";
position:absolute;
border-left:15px solid blue; 
border-right:15px solid green;
height:200px; 
border-radius:15px 0 0 15px;   
}
​

HTML

<div></div>​

现在查看实况演示http://jsfiddle.net/rohitazad/Vsvg2/74/