How do I use CSS to add a non-rectangular border around an image?

问题

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

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.

Now, I want to remove the transperant background too and just keep the faces.

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

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

回答1:

To answer your question about borders around the face.

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.

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.

来源：https://stackoverflow.com/questions/2795196/how-do-i-use-css-to-add-a-non-rectangular-border-around-an-image