几日，随着小白对HTML5认识的提升，他自己没事浏览网页的时候总会注意一些特殊的展示效果，让他印象最深刻的一个效果就是用户头像了，一个矩形的图片怎么就显示成圆形了呢？一上午没想明白，下午看着老朱没什么事，就去向老朱请教：“朱哥！网页上的图片怎么能显示成圆角呢？特别是正圆形是怎么做出来的啊？”

老朱随口说道：“border-radius啊！之前我们已经用过几次了啊！”

小白说：“这不是控制容器圆角的么？图片也可以控制么？”

老朱说：“讲图片的时候我不是告诉过你了么？肯定是没好好听，图片标签img也是一个容器，它是一个放图片的容器，在img里面显示什么图片是靠src属性来决定的。既然是容器你不是就可以用border-radius来控制了么？你试试！”

小白高兴的说道：“真的成圆角了啊！我要把他变成正圆，是不是圆角设置成它宽度的一半就可以了？”

老朱说：“你先试试吧！试玩就知道了！”

“不行啊！这是怎么回事？”

老朱跟小白说：“css的圆角属性值最多是边的一半！你的图片宽比高大，所以圆角值最多位高的一半！你可以先尝试把图片的宽高设置成一样的看看！”

“果然变成正圆了，可是这样的话图片就有变形了，如果小头像的话还好说，大头像可就不好看了！”

老朱说道：“所以现在很多网站头像上传的时候都会让用户截取一个正方形的图片生成头像，就是为了方便进行圆角控制！”

小白说：“有没有折中的方法？假如网站没有用户设置正方形头像的功能，还不想让图片变形呢？”

老朱说：“正圆显示的肯定是一个高和宽一样的区域，所以图片被截取肯定是不可避免的了。你可以给图片外部套一个div容器，让这个div容器的宽度高度一致，并且设置超出隐藏。这样设置一下div的圆角就可以了！你试试看”

小白做好以后说道：“我又发现一个问题，div设置宽和高一样以后，图片如果高比宽小，图片高度得跟父容器高度一致才能出来效果！而图片高比宽大，则需要设置图片宽度和父容器宽度一致。我觉得要把它完善必须使用js来判断图片宽和高的比例进行动态设置。”

“嗯，你可以试试！”

聪明的大家，你们有没有什么更好的图片圆角方式呢？

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！

为大家介绍如何使用 CSS 来布局图片。

圆角图片

实例

圆角图片:

img {

border-radius: 8px;

}

实例

椭圆形图片:

img {

border-radius: 50%;

}

尝试一下 »

缩略图

我们使用 border 属性来创建缩略图。

实例

img {

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

}

<img src="paris.jpg" alt="Paris">

尝试一下 »

实例

a {

display: inline-block;

border: 1px solid #ddd;

border-radius: 4px;

padding: 5px;

transition: 0.3s;

}

a:hover {

box-shadow: 0 0 2px 1px rgba

(0, 140, 186, 0.5);

}

<a href="paris.jpg">

<img src="paris.jpg" alt="Paris">

</a>

响应式图片

响应式图片会自动适配各种尺寸的屏幕。

实例中，你可以通过重置浏览器大小查看效果:

如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

实例

img {

max-width: 100%;

height: auto;

}

尝试一下 »

提示: Web 响应式设计更多内容可以参考 CSS 响应式设计教程。

图片文本

如何定位图片文本:

实例

左下角左上角右上角右下角居中

尝试一下:

左上角 » 右上角 » 左下角 » 右下角 » 居中 »

卡片式图片

实例

div.polaroid {

width: 80%;

background-color: white;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

img {width: 100%}

div.container {

text-align: center;

padding: 10px 20px;

}

图片滤镜

CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。

注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。

实例

修改所有图片的颜色为黑白 (100% 灰度):

img {

-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */

filter: grayscale(100%);

}

提示: 访问 CSS 滤镜参考手册 查看更多内容。

响应式图片相册

实例

.responsive {

padding: 0 6px;

float: left;

width: 24.99999%;

}

@media only screen and (max-width: 700px){

.responsive {

width: 49.99999%;

margin: 6px 0;

}

}

@media only screen and (max-width: 500px){

.responsive {

width: 100%;

}

}

尝试一下 »

图片 Modal(模态)

本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。

首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。

然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：

实例

// 获取模态窗口

var modal = document.getElementById('myModal');

// 获取图片模态框，alt 属性作为图片弹出中文本描述

var img = document.getElementById('myImg');

var modalImg = document.getElementById("img01");

var captionText = document.getElementById("caption");

img.onclick = function(){

modal.style.display = "block";

modalImg.src = this.src;

modalImg.alt = this.alt;

captionText.innerHTML = this.alt;

}

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal

span.onclick = function() {

modal.style.display = "none";

}

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

度图形在一些网页中会用到，实现方法有很多。可以通过加载背景图或者放img图片来实现，下面说说用css的圆角来实现有弧度的图形！

具体效果图：

实现代码：

通过伪类追加一个半圆效果拼装成一个有弧度的图形