CSS 3图片

本节将介绍的是如何使用 CSS 来布局图片

圆角图片

实例

img{
	border-radius:10px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

缩略图:

使用 border 属性来创建缩略图

实例

img{
	 border: 2px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

响应式图片

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

实例

img{
	max-width: 100%;
    height: auto;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 36.jpg

图片滤镜

CSS filter 属性用为元素添加可视效果

实例

.demo{
	-webkit-filter: grayscale(60%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

未标题-1.jpg

卡片式图片

实例

div.box {
  width:500px;
  background-color: #cfd9cd;
  box-shadow: 0 10px 8px 0 rgba(202, 34, 34, 0.2), 0 6px 20px 0 rgba(127, 7, 7,0.19);
  margin-bottom: 25px;

}
img{
	margin-left: 22px;
	margin-top:18px;
}
div.content {
  text-align: center;
  padding: 10px 20px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

未标题-1.jpg