如何使用CSS在图像周围添加非矩形边框？

问题描述

我有三张图像，它们的形状不是正方形或矩形。它们就像任何人的脸。

I have three images, and they are not square or rectangular in shape. They are just like face of anyone.

所以，基本上，我的图像大小为196x196或类似的东西，但完整的正方形或矩形，中间的脸部

So, basically, my images are in the size 196x196 or anything like that, but complete square or rectangle with the face in the middle and transperant background in the rest of the portion.

Don't know if this is possible and mind you, this isn't a programming question.

EDIT（来自评论）：如何使用CSS在图像的形状周围放置边框，而不是边界周围的矩形边框。

EDIT (from comments): How do I put a border around the shape of the image, not a rectangular one around the boundary, using CSS.

推荐答案

回答你关于脸部边框的问题。

To answer your question about borders around the face.

1. 将图片加载到Photoshop或gimp中


2. 制作第二个复制图层


3. 在底部图层上，调整面部大小，使其大于您想要边框的数量


4. 使用低值填充边框颜色的放大面公差，以便面部现在是一种颜色


5. 保存为.png并允许它展平。

1. Load the image into Photoshop or gimp
2. Make a second layer that is a copy
3. On the bottom layer, resize the face so that it is the amount bigger that you want the border to be
4. Fill the enlarged face with the border color using a low tolerance, so that the face is now a single color
5. save to a .png and allow it to flatten.

用我知道的CSS无法做到这一点 - 你可以用ImageMagick或（免责声明，我在Atalasoft工作）写一个程序，一个.NET成像SDK。在其中一个中，您要复制文件，调整大小，颜色，然后将原始图像叠加到其上。

There is no way to do this with CSS that I know of -- you could write a program to do this using ImageMagick or (dislaimer, I work for Atalasoft) DotImage, a .NET imaging SDK. In either, you'd copy the file, do the resize, the color, and then overlay the original onto it.

这篇关于如何使用CSS在图像周围添加非矩形边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！