技术贴 用css制作圆角图像

介绍绘制圆形的< IMG >元素的一些CSS技巧，这一技巧需要是用到border-radius这一属性。
在正方形上应用这个效果很简单。在矩形图形中应用这一比正方形稍微复杂一点点。

正方形图形
一个正方形的img元素只需要一行css代码，非常适合在正方形图形上应用
HTML
<img class="circular--square" src="woman.png" />
CSS
.circular--square {
border-radius: 50%;
}
上边的样式规则展开来写就是：
.circular--square {
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-bottom-left-radius: 50% 50%;
}
通过设置正方形图形的border-radius的属性值是宽和高的50%，正方形图形元素会变成一个圆。
矩形图像
矩形图片稍微有一点复杂。
要渲染一个圆，图像必须从正方形开始。
要解决此问题，我们可以把IMG元素包裹在在一个正方形的div元素中。然后通过设置容器div的溢出的部分设置隐藏属性。
为了不让照片的表达的主题被切掉，我们还必须处理有景色的照片（这是水平方向的矩形）不同的人物照片（这是垂直方向的矩形）。
景物图像HTML
<div class="circular--landscape">
<img src="images/barack-obama.png" />
</div>
CSS
circular--landscape {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
.circular--landscape img {
width: auto;
height: 100%;
margin-left: -50px;
}
高度和宽度属性值必须相同，以便容器div（class为.circular--landscape）呈现为一个正方形。
此外，高度和宽度属性值必须等于或小于的IMG的高度。这可以确保IMG元素能够占据容器div没有溢出。
一般而言，景观照片的主题，并不总是-位于围绕中心的组成。为了展现更好图片主题，不至于被剪裁后失去表达的内容。我们可以横向水平移动IMG元素外边的div容器来显示照片的主要内容。
我们移动图像元素的距离是外边框div宽高的25%，这个例子中就是移动50px（200px*25%），我们可以用负margin技术实现图像的移动。
margin-left: -50px;
矩形图像
矩形图片稍微有一点复杂。
要渲染一个圆，图像必须从正方形开始。
要解决此问题，我们可以把IMG元素包裹在在一个正方形的div元素中。然后通过设置容器div的溢出的部分设置隐藏属性。
为了不让照片的表达的主题被切掉，我们还必须处理有景色的照片（这是水平方向的矩形）不同的人物照片（这是垂直方向的矩形）。
景物图像HTML
<div class="circular--landscape">
<img src="images/barack-obama.png" />
</div>
CSS
circular--landscape {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
.circular--landscape img {
width: auto;
height: 100%;
margin-left: -50px;
}
高度和宽度属性值必须相同，以便容器div（class为.circular--landscape）呈现为一个正方形。
此外，高度和宽度属性值必须等于或小于的IMG的高度。这可以确保IMG元素能够占据容器div没有溢出。
一般而言，景观照片的主题，并不总是-位于围绕中心的组成。为了展现更好图片主题，不至于被剪裁后失去表达的内容。我们可以横向水平移动IMG元素外边的div容器来显示照片的主要内容。
我们移动图像元素的距离是外边框div宽高的25%，这个例子中就是移动50px（200px*25%），我们可以用负margin技术实现图像的移动。
margin-left: -50px;