如何在图片上添加CSS边框？

Question

我该如何使用CSS裁剪（600x450）图片并在其周围创建边框？

裁剪成

有可能吗？应该使用哪种方法？创建一些带有border-radius的包装元素吗？

- Maximus Dredoff

---

可以使用border-radius和CSS3魔法来实现。这个链接会帮助你入门 - http://www.1stwebdesigner.com/image-styling-coding-tutorials/ - nykc

像这样的东西：这里？ - Phylogenesis

如果你展示出一些（调查）努力，你甚至可能得到一些帮助。我肯定也会更改主题，使其包含“非矩形边框”。 - Pieter21

@Phylogenesis 这是你示例的下一步：http://jsfiddle.net/pLvvottd/1/ 我建议你将其添加为答案，看起来很不错。 - dfsq

我并不确定，如果楼主想要更接近他的示例样式的话，他需要考虑使用类似SVG的东西。 - Phylogenesis

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。

- Andy Furniss

---

“然后只需添加一个白色边框和一个盒子阴影” - 为什么不自己添加以获得真正好的演示？然后，您可以将其嵌入到stackoverflow片段中 - 这样会更好。 - dfsq

谢谢您的帮助，但看起来不是很好（http://take.ms/ys1yU）。而且我的图片更精确地说是http://take.ms/B0I38。 - Maximus Dredoff

是的，我认为使用 border-radius 总会有一些曲线，但我知道这并不完全符合您的需求。不过我不确定您是否能够通过纯 CSS 实现更好的效果。 - Andy Furniss

@MaximDreddoff，你不能只用纯CSS实现你想要的效果。如果你想要更接近你的示例，那么你需要研究一些像SVG这样的东西——你可以使用它来创建更好的遮罩。 - Phylogenesis

http://www.w3schools.com/svg/default.asp - Andy Furniss

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>

- EJW

---

一些关于编程的内容需要翻译成中文。请仅返回翻译后的文本，不要进行解释。 - enigma

Answer 3

我已更新@Phylogenesis的example以添加边框，阴影并使其响应。

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

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

- Luca Detomi