如何在图像上制作 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' example 添加边框、阴影并使其响应。

除了不设置固定宽高外，相关部分代码如下：

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

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

How to make CSS border on an image?

html

css

image

border