css 剪辑图片_[译]用CSS剪切圆形图片

用CSS剪切圆形图片

在这个教程，我们会介绍一下使用CSS技巧来渲染出圆形的元素，主要来实现这个效果的CSS属性是border-radius.

尽管对于正方形的图片来实现圆形这个效果是相当简单的，但是对于长方形来说可能需要多一点点工作。

正方形图片

一个百分百正方形的img标签要变成圆形的只需要一行CSS代码。这个技巧在正方形图片上使用的最方便。

HTML

CSS

.circular--squareP{

border-radius:50%;

}

通过设置img标签的所有的border-radius属性为正方形宽/高的50%，我们就可以把这个img标签变成圆的。

长方形图片

长方形图片会稍微有一点技巧一点。

去渲染一个圆形，必须以圆形图片为基础

要解决这个问题，我们可以通过在img标签外面套一层div，然后我们通过将超过这个外层div的img标签的内容给裁掉来实现。具体的话可以通过将外层div的overflow属性设置为hidden。

为了能够让照片的主题不要被裁掉，我们必须要区别对待水平和垂直方向的图片。

水平方向的图片

HTML

CSS<