如何制作带梯度的css曲线盒阴影

时间:2012-04-02 08:40:42

标签: html css

我正在尝试使用渐变和阴影制作css曲线框。 所以我怎么能用纯css制作它应该只在一个div中没有​​多少代码。

供参考,请参阅附图: -

enter image description here

1 个答案:

答案 0 :(得分:2)

你刚才是这样的边界半径

<强>的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/