html - CSS 样式旧 iphone 应用程序图标样式

Question

我已经在谷歌上搜索了好几天了，但我就是找不到可以使用 CSS3 为旧 iPhone 应用程序图标设计样式的好信息。

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

请查看我正在为其制作 CSS 的这张图片。我想让它足够灵活，以便在需要更改文本时可以通过 HTML 标记轻松替换单词。

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

提前致谢!

托马斯

Answer 1

你可以用一个伪元素和 inset box-shadow 试试这个:

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;
}