用css制作圆角图像

 

资源下载地址：http://www.gbtags.com/gb/share/9435.htm

 

在本教程中，我们将介绍绘制圆形的< IMG >元素的一些CSS技巧，这一技巧需要是用到border-radius这一属性。

在正方形上应用这个效果很简单。在矩形图形中应用这一比正方形稍微复杂一点点。

 

正方形图形

一个正方形的img元素只需要一行css代码，非常适合在正方形图形上应用

HTML

1. <imgclass="circular--square"src="woman.png"/>

CSS

1. .circular--square {
2. border-radius:50%;
3. }

上边的样式规则展开来写就是：

1. .circular--square {
2. border-top-left-radius:50%50%;
3. border-top-right-radius:50%50%;
4. border-bottom-right-radius:50%50%;
5. border-bottom-left-radius:50%50%;
6. }

通过设置正方形图形的border-radius的属性值是宽和高的50%，正方形图形元素会变成一个圆。

 

矩形图像

矩形图片稍微有一点复杂。

要渲染一个圆，图像必须从正方形开始。

要解决此问题，我们可以把IMG元素包裹在在一个正方形的div元素中。然后通过设置容器div的溢出的部分设置隐藏属性。

为了不让照片的表达的主题被切掉，我们还必须处理有景色的照片（这是水平方向的矩形）不同的人物照片（这是垂直方向的矩形）。

 

景物图像

HTML

1. <divclass="circular--landscape">
2. <imgsrc="images/barack-obama.png"/>
3. </div>

CSS

1. circular--landscape {
2. display:inline-block;
3. position: relative;
4. width:200px;
5. height:200px;
6. overflow: hidden;
7. border-radius:50%;
8. }
9. .circular--landscape img {
10. width:auto;
11. height:100%;
12. margin-left:-50px;
13. }

高度和宽度属性值必须相同，以便容器div（class为.circular--landscape）呈现为一个正方形。

此外，高度和宽度属性值必须等于或小于的IMG的高度。这可以确保IMG元素能够占据容器div没有溢出。

一般而言，景观照片的主题，并不总是-位于围绕中心的组成。为了展现更好图片主题，不至于被剪裁后失去表达的内容。我们可以横向水平移动IMG元素外边的div容器来显示照片的主要内容。

我们移动图像元素的距离是外边框div宽高的25%，这个例子中就是移动50px（200px*25%），我们可以用负margin技术实现图像的移动。

1. margin-left:-50px;

 

照片的内容的并不都是像之前那个图片一样人物图像在正中间的位置。当你用这项技术调整或者编辑图像时，时刻记住图片要确保要表达的人物或是景物在中心的位置

 

人物图像

HTML

1. <divclass="circular--portrait">
2. <imgsrc="images/woman-portrait.png"/>
3. </div>

CSS

1. .circular--portrait {
2. position: relative;
3. width:200px;
4. height:200px;
5. overflow: hidden;
6. border-radius:50%;
7. }
8. .circular--portrait img {
9. width:100%;
10. height:auto;
11. }

我们假设人物肖像中人物处于图像中的中间靠上的位置，但是并不是每一张图片都是这样的。

和景观图片类似，人物图像的外边的div容器必须也是宽和高相等的，确保他是一个正方形。

同样的，宽度/高度属性值必须等于或小于的IMG元素的宽度使图像能够覆盖容器div没有溢出。

对于人像肖像的图像，我们指定一个高度为auto，宽度为100%。（我们对景物图像进行相反的操作。）

我们不需要移动IMG元素，因为我们的期望是，照片的主题是在顶部中心的位置。

 

回顾一下

这种方法最好用在正方形的IMG元素中，想要表达的图片内容在中心位置。但是，并不是所有的事情都会如我们所愿，所以如果需要的话，你可以使用一个容器div把IMG元素变成正方形。

主要的CSS代码是border-radius属性变成一个圆。设置这个角的半径是50%的宽度/高度。

 

 阅读原文：点我

翻译难免有不当之处，欢迎评论吐槽~