【发布时间】：2021-12-10 18:48:06
【问题描述】：
我一直在拼命想弄清楚如何使用The Code Player's CSS3 Squircles example 在我的网站上创建一个 iOS-7 风格的应用程序图标（在 Safari 浏览器中进行测试）。该示例使用伪标签来裁剪背景颜色，而我需要裁剪 <img>。如果您不熟悉，squircle 就像一个圆角矩形，但边圆角超出圆角半径，如下所示：
.icons img {
width: 100px;
height: 100px;
border-radius: 24%;
}
.icons a {
text-decoration: none;
display: inline-block;
position: relative;
}
/*Now we will create fish-eye shapes using pseudo elements and clip them to add a curve to the sides of the icons*/
.icons a:before, .icons a:after {
content: '';
position: absolute; left: 0; top: 0;
width: 100%; height: 100%;
background: inherit;
border-radius: 100%; /*circle*/
/*time to transform the circle into fish-eye shape. iOS7 style now.*/
-webkit-transform: scaleX(2) scaleY(1.05);
transform: scaleX(2) scaleY(1.05);
/*clipping the left and right sides - 17px from the left and right*/
clip: rect(0, 66px, 100px, 34px);
/*pushing it behind the icon*/
z-index: -1;
}
/*duplicating the :before element and rotating it 90deg and swapping the X/Y transforms*/
.icons a:after {
-webkit-transform: scaleY(2) scaleX(1.05) rotate(90deg);
}<div class="icons">
<a href="#"><img src="http://lorempixel.com/256/256/abstract/2/" /></a>
</div>【问题讨论】：
-
增加边框半径？最终，你会得到一个圆圈。
-
@jmargolisvt 我正在尝试制作一个“松鼠”，而不是一个圆圈。我已经更新了问题以使其更清楚。
-
一种方法是剪辑路径 [link] css-tricks.com/clipping-masking-css
-
我不知道创建一些圆角 div 标签并在其中放置图像有什么问题。与 ios 配合得很好。如果你想让角更圆一点，我会同意@jmargolisvt，只是增加边界半径。