javascript 用于圆形裁剪图像的 CSS/JS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10038668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS/JS for Circular cropping of an image
提问by ming yeow
my designer passed me a look that I would love to be able to replicate, but i am not very sure how to do so.
我的设计师给了我一个我希望能够复制的外观，但我不太确定如何做到这一点。
- the first part is the circular cropping of the avatar (it is a square upload)
- the second part is the speech bubble
- 第一部分是头像的圆形裁剪（是方形上传）
- 第二部分是讲话泡泡
I am open to doing the first part in the backend, but would prefer having a CSS/JS solution.
我愿意在后端做第一部分，但更喜欢有一个 CSS/JS 解决方案。
回答by Tomas Mulder
For the circular image you can use CSS's border-radius: just make it large enough so the rounded corners touch.
对于圆形图像，您可以使用 CSS 的边框半径：只需使其足够大，以便圆角接触。
.profile-img {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
Luke's answer is a good one for the speech bubble: I've created bubbles based on it. I've also adapted this triangle technique using the :before and :after CSS pseudo elements to create some interesting effects on my personal website. You can have one larger than the other and positioned so it looks like a border if you need to.
卢克的回答对对话泡泡来说是一个很好的答案：我已经根据它创建了泡泡。我还使用 :before 和 :after CSS 伪元素调整了这种三角形技术，以在我的个人网站上创建一些有趣的效果。如果需要，您可以将一个比另一个大并定位，使其看起来像一个边框。
回答by Luke
For the speech bubble part I suggest this tutorial. http://nicolasgallagher.com/pure-css-speech-bubbles/I use it often for ideas and learning how to do it myself. I give you a tutorial because I want you to learn how to do it. If you gave me code that needed some help, then I'd give you an answer on how to fix it. Do you have any code for this yet?
对于语音气泡部分，我建议使用本教程。http://nicolasgallagher.com/pure-css-speech-bubbles/我经常使用它来获得想法并学习如何自己做。我给你一个教程，因为我想让你学习如何去做。如果你给了我需要帮助的代码，那么我会给你一个关于如何修复它的答案。你有任何代码吗？
Also for the cropping, I think a quick way to do this is make a square wrapper div around your image then give it a border-radius (css) that is half of the length of one of the sides. Set the overflow to hidden and you're set.
同样对于裁剪，我认为一种快速的方法是在图像周围制作一个方形包装器 div，然后给它一个边框半径（css），它是一侧长度的一半。将溢出设置为隐藏即可。
Cheers!
干杯!
