如何在图像上制作CSS边框？

Question

如何裁剪图像（600х450）并使用CSS在其上创建边框？

到

有可能吗？有什么好用的？使用border-radius？

创建一些包装元素

Answer 1

我认为这是你用css做的最好的事情：

CSS：

img {
    width:400px;
    height:400px;
    border-top-left-radius:50% 50px;
    border-top-right-radius:50% 50px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

http://jsfiddle.net/andyfurniss/rmc4nuu7/

然后只需添加一个白色边框和一个box-shadow。

Answer 2

<style>
    #img{
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 10%;
        border-top-right-radius: 10%;
        width: 600px;
        height: 450px;
    }
</style>

Answer 3

我已更新 @Phylogenesis ＆＃39; example添加边框，阴影并使其响应。

除了未设定固定宽度和高度之外，相关的代码部分如下：

#mask img {
    margin-left: 50%;
    transform:translate(-50%, 0);
    border-bottom-left-radius:100%;
    border-bottom-right-radius:100%;
}