CSS 来设置旧的 iphone 应用程序图标样式答案

【问题标题】：CSS to style old iphone app icon styleCSS 来设置旧的 iphone 应用程序图标样式
【发布时间】：2014-06-28 22:30:02
【问题描述】：

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

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

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

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

提前致谢！

托马斯

【问题讨论】：

查看CSS Pie 以获得旧版浏览器支持。

标签： html css css-shapes

【解决方案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;
}

【讨论】：