CSS-如何将图像形状从圆形更改为方形或星形？答案

【问题标题】：CSS- How to change images shape from circular to squared or star?CSS-如何将图像形状从圆形更改为方形或星形？
【发布时间】：2014-04-09 05:55:09
【问题描述】：

我有以下 CSS 来制作圆形图像，但是否可以将它们制作成星形或方形？

/* Effect 12: circle */
.cl-effect-12 a::before,
.cl-effect-12 a::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
    transform: translateX(-50%) translateY(-50%) scale(0.2);
}

【问题讨论】：

查看此资源：css-tricks.com/examples/ShapesOfCSS
这可能会有所帮助：html5rocks.com/en/tutorials/masking/adobe

标签： html css image geometry css-shapes

【解决方案1】：

如果您删除 border-radius: 50%，那么它们将是方形的

【讨论】：

【解决方案2】：

对于“它使我的图像呈圆形”，我假设您的意思是它显示了图像的圆形“切口”。考虑到这一点，我认为您想要的称为CSS Masking。以下所有内容均取自该来源，但此处在链接失效的情况下在答案中提供。

很久以前，Apple 将 CSS 掩码添加到 WebKit 引擎中，即早在 2008 年 4 月。口罩提供了控制基于每个像素的元素的不透明度/透明度，类似于如何 “24-bit”-PNG 或 32-bit-TIFF 的 alpha/transparency-channel 工作。

模拟一个简单的 -webkit-mask-image 跨浏览器

假设我们想将一个 HTML 元素屏蔽为右图所示的鼠标头部形状。

使用 WebKit 的专有 CSS 掩码，我们将拥有以下 HTML：

<div class="element">
    <p>Lorem ipsum dolor sit … amet.</p>
</div>

并定义如下CSS：

.element {
    width: 400px;
    height: 300px;
    overflow: hidden;
    color: #fff;
    background: url(background.png);
    -webkit-mask-image: url(mouse.png);
}

现代浏览器

[...] 下一步是在我们的内联 SVG 中定义一个 SVG 掩码，我们可以提供一个掩码图像，然后通过 style="mask:[mask id]" 将其应用到我们的 foreignObject/嵌入式 HTML ：

<!DOCTYPE html>
<html>
<body>

    <!-- SVG begins -->
    <svg>

        <!-- Definition of a mask begins -->
        <defs>
            <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
                <image width="400px" height="300px" xlink:href="mouse.png"></image>
            </mask>
        </defs>
        <!-- Definition of a mask ends -->

        <foreignObject width="400px" height="300px" style="mask: url(#mask);">

            <!-- HTML begins -->
            <div class="element">
                <p>Lorem ipsum dolor sit … amet.</p>
            </div>
            <!-- HTML ends -->

        </foreignObject>
    </svg>
    <!-- SVG ends -->

</body>
</html>

最后我们需要一个合适的蒙版图像。我们不能简单地使用 WebKit 专有的 CSS 掩码中的图像，因为 SVG 掩码不查看透明度值，而是查看亮度值。所以我们需要做的就是将所有不透明的图像像素变成白色阴影。

在 Photoshop 中超级简单：

打开要用作遮罩的透明 24 位 PNG
选择“图层”菜单，然后选择“图层样式”，最后选择“颜色叠加”
在“颜色叠加”对话框中将颜色更改为白色
点击“确定”关闭对话框
选择“文件”菜单、“保存为网络”，然后替换旧文件。

还有卡布姆！ HTML 内容的屏蔽已在 WebKit、Firefox 和 Opera 中启动并运行！不错。

然后为它下面的任何元素创建一个掩码：

【讨论】：