CSS风格旧的iPhone应用程序图标样式

Question

我已经谷歌搜索了好几天了，而我却无法找到可以使用CSS3设置旧版iPhone应用程序图标的好信息。

我一直在尝试做的是，使用CSS3设置这条曲线的样式，如果旧的浏览器不支持它，它会自动回退到一条直线，或根本没有线。< / p>

请参阅此图片我试图制作CSS。我想使其足够灵活，以便在需要更改文本时通过HTML标记轻松替换单词。

Style http://www.beamstyle.com.hk/tmp/sample.png

提前致谢！

托马斯

Answer 1

您可以尝试使用伪元素和插入框阴影：

<强> DEMO

HTML：

<div>content</div>

CSS：

div{
    position:relative;
    overflow:hidden;
    border:1px solid #D5BA76;
    border-radius: 10px;
    background:#E0CB91;
    width:200px;
    height:100px;
    box-shadow: inset 0px 50px 100px -50px #fff;

}
div:before{
    content:'';
    height:500px;
    width:500px;
    position:absolute;
    top:50px;
    left:-155px;
    border-radius:50%;
    background:#AF945C;
}