一些上流的CSS3图片样式

译自：CSS3 Image Styles
中文：CSS3图片样式
请尊重版权，转载请注明来源，多谢～～


直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时，浏览器并不能完美的渲染它们。不过，如果把这个图片用作背景图，你就可以可以给它添加任何样式了，浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程，讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition 来创作不同的图片风格。

先看下demo

问题 (见 demo)

看一下demo，请注意在第一行的图片中使用了border-radius和inset box-shadow。Firefox会直接在图片元素上渲染border-radius，但不会渲染inset box-shadow。chrome/safari则两者都不渲染。

解决方案

要让 border-radius 和 inset box-shadow 正常工作，解决方案就是将实际图片变作background-image.

动态方法

要想动态实现，可以简单的使用jQuery为每个图片元素外面包一个背景图片。下面的jQuery代码会将所有图片外面包一个span标签然后将图片用作其背景图片(jQuery代码由Darcy Clarke编写)。

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	$("img").load(function() {
		$(this).wrap(function(){
			return "<span class="image-wrap " + $(this).attr("class") + ""
				style="position:relative; display:inline-block; background:url(" + $(this).attr("src") + ") no-repeat center center; width: " + $(this).width() + "px; height: " + $(this).height() + "px;" />";
		});
		$(this).css("opacity","0");
	});
});
</script>

输出

上面的脚本将会输出下面的HTML代码：

1
2
3

<span class="image-wrap " style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;">
	<img src="image.jpg" style="opacity: 0;">
</span>

圆形图片(见 demo)

现在，图片被用作背景图了，你可以给它添加任意你想要的样式上去。下面是一个简单的使用border-radius实现的圆形图片。如果你对CSS3不太了解，可以阅读下Basics of CSS3，也可以搜索一下前端观察。

CSS

1
2
3
4
5

.circle .image-wrap {
	-webkit-border-radius: 50em;
	-moz-border-radius: 50em;
	border-radius: 50em;
}

卡片风格(见 demo)

下面是一个像卡片的图片风格，用了多个inset box-shadow。

CSS

1
2
3
4
5
6
7
8
9

.card .image-wrap {
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
	box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

浮雕风格 (见 demo)

通过一点儿改变，我可以将卡片风格转换为浮雕。。。

CSS

1
2
3
4
5
6
7
8
9

.embossed .image-wrap {
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
	box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

软浮雕风格 (见 demo)

和浮雕风格真的很像，我只是加了1px的虚化～～

CSS

1
2
3
4
5
6
7
8
9

.soft-embossed .image-wrap {
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
	box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

剪贴画风格(见 demo)

同样只是inset box-shadow，我可以让它看起来像剪贴画。

CSS

1
2
3
4
5
6
7
8
9

.cut-out .image-wrap {
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
	box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

变形和发光 (见 demo)

这个例子中，我为图片外容器增加了变形。mouseover的时候，它将从圆角形状变为圆形，然后增加了发光效果。发光效果通过多重box-shadow实现。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.morphing-glowing .image-wrap {
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
 
.morphing-glowing .image-wrap:hover {
	-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
	-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
	box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
 
	-webkit-border-radius: 60em;
	-moz-border-radius: 60em;
	border-radius: 60em;
}

发光遮罩 (见 demo)

发光渐变遮罩是通过:after伪元素实现的。。。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.glossy .image-wrap {
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
 
.glossy .image-wrap:after {
	position: absolute;
	content: " ";
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
 
	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}

倒影 (见 demo)

这个例子中，我将遮罩渐变移动到底部，于是它就成了倒影。。。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.reflection .image-wrap:after {
	position: absolute;
	content: " ";
	width: 100%;
	height: 30px;
	bottom: -31px;
	left: 0;
 
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
 
	background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
	background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}
 
.reflection .image-wrap:hover {
	position: relative;
	top: -8px;
}

光泽和倒影(见 demo)

这个例子中，我同时使用了:before和:after伪元素来实现带倒影的光泽效果。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

.glossy-reflection .image-wrap {
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
 
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
 
.glossy-reflection .image-wrap:before {
	position: absolute;
	content: " ";
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
 
	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}
 
.glossy-reflection .image-wrap:after {
	position: absolute;
	content: " ";
	width: 100%;
	height: 30px;
	bottom: -31px;
	left: 0;
 
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
 
	background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));
	background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);
}

胶带风格(见 demo)

这里使用了:after伪元素来在图片顶部实现了胶带风格的渐变。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.tape .image-wrap {
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
	box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}
 
.tape .image-wrap:after {
	position: absolute;
	content: " ";
	width: 60px;
	height: 25px;
	top: -10px;
	left: 50%;
	margin-left: -30px;
	border: solid 1px rgba(137,130,48,.2);
 
	background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));
	background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);
}

变形和着色 (见 demo)

在下面的这个例子中，我用了 :after元素来在mouseover的时候添加发光渐变。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.morphing-tinting .image-wrap {
	position: relative;
 
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
 
.morphing-tinting .image-wrap:hover {
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}
 
.morphing-tinting .image-wrap:after {
	position: absolute;
	content: " ";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
 
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
 
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}
.morphing-tinting .image-wrap:hover:after  {
	background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
	background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);
}

羽化边缘的圆形(见demo)

发散渐变也可以用作遮罩层来实现圆形羽化效果。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.feather .image-wrap {
	position: relative;
 
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}
 
.feather .image-wrap:after  {
	position: absolute;
	content: " ";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
 
	background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
	background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);
}

浏览器支持

本文的方法可以在支持border-radius、box-shadow、:before和:after伪元素的浏览器上，比如Chrome/Safari/Firefox等，而在一些落后的浏览器比如IE9(包括IE9)则不能完全支持——IE6/7/8没有任何表现，IE9会有普通的圆角。

发挥你的创造力

正如你看到的，你几乎可以使用:before和:after伪元素实现任何效果。如果你有用CSS3实现更多的创意图片效果，欢迎通过评论与大家分享。

PS,本文中使用:before/:after来实现伪元素，其实我更建议使用双冒号来实现，虽然单冒号有更多的浏览器支持，但是对于这些CSS3实现的效果来说，双冒号更安全一些。更多的原因，可以参考《:before和::before的区别》

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索background
， px
， rgba
box-shadow
css3实现图片抖动样式、纯css3 图片展示样式、css3 图片样式、css3 步骤流程 样式、流行指甲样式图片2016，以便于您获取更多的相关知识。

时间： 2024-08-03 11:02:50

一些上流的CSS3图片样式的相关文章

一些上流的CSS3图片样式 | CSS | 前端观察

来源:http://www.qianduan.net/css3-image-styles.html#jtss-hi

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

图解css3：核心技术与案例实战. 3.3　CSS3图片边框属性

3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出background-image属性的功能,功能比background-image强大,我们可以使用border-image属性给任何元素( 除border-collapse属性值为collapse的table元素之外)设置图片效果边框,还可以使用这个来制作圆角按钮效果.渐变的Tabs效果等. 3.3.1 bor

Word 2010的图形图片样式

Word 2010中新增了针对图形.图片.图表.艺术字.自动形状.文本框等对象的样式设置,样式包括了渐变效果.颜色.边框.形状和底纹等多种效果,可以帮助用户快速设置上述对象的格式. 例如,当在Word 2010文档窗口中插入一张图片,并单击选中该图片后,会自动打开"图片工具|格式"功能区.在"格式"功能区的"图片样式"分组中,可以使用预置的样式快速设置图片的格式.值得一提的是,当鼠标指针悬停在一个图片样式上方时,Word 2010文档中的图片会即

在Word 2007文档中应用图片样式

在Word2007文档中,用户可以为选中的图片应用多种图片样式,包括透视.映像.边框.投影等多种 样式,操作方法如下所述: 打开Word2007文档窗口,选中需要应用图片样式的图片(按住Ctrl键的同时可以选中多个图片).在 "图片工具"功能区的"格式"选项卡中,单击"图片样式"分组中合适的图片样式即可,如图 2009030301所示. 图2009030301 选择合适的图片样式 小提示:在"图片样式"分组中单击"其

PowerPoint教程 快速应用图片样式

  具体操作过程如下: ①启动PowerPoint2007,打开一份插入三张图片的演示文稿,选中其中一张,单击菜单栏--格式--图片样式--圆形对角(白色). ②此时这张图片就立即转变为了圆形对角的样式,在换一张,将其转变为棱台透视的样式效果. ③出了这种方法之外,我们还可以利用插入图形的方法将图片改变形状样式,单击菜单栏--格式--图片形状按钮,选择泪滴形,确定. ④最后我们将三张图片快速改变了样式,整体提高了PPT版式的精美程度.

PowerPoint快速应用图片样式

  ①启动PowerPoint2007,打开一份插入三张图片的演示文稿,选中其中一张,单击菜单栏--格式--图片样式--圆形对角(白色). ②此时这张图片就立即转变为了圆形对角的样式,在换一张,将其转变为棱台透视的样式效果. ③出了这种方法之外,我们还可以利用插入图形的方法将图片改变形状样式,单击菜单栏--格式--图片形状按钮,选择泪滴形,确定. ④最后我们将三张图片快速改变了样式,整体提高了PPT版式的精美程度.

认识Word2007中的图形图片样式

Word2007中新增了针对图形.图片.图表.艺术字.自动形状.文本框等对象的样式设置,样式包括了渐变效果.颜色.边框.形状和底纹等多种效果,可以帮助用户快速设置上述对象的格式. 例如,当在Word2007文档窗口中插入一张图片,并单击选中该图片后,会自动打开"图片工具|格式"功能区.在"格式"功能区的"图片样式"分组中,可以使用预置的样式快速设置图片的格式.值得一提的是,当鼠标指针悬停在一个图片样式上方时,Word2007文档中的图片会即时预览

Word 2007技巧：应用图片样式

在Word 2007文档中,用户可以为选中的Word 2007图片应用多种图片样式,包括透视.映像.边框.投影等多种样式,操作方法如下所述: 打开Word 2007文档窗口,选中需要应用Word 2007图片样式的图片(按住Ctrl键的同时可以选中多个图片).在Word 2007"图片工具"功能区的"格式"选项卡中,单击"图片样式"分组中合适的图片样式即可,如图所示. 选择合适的Word 2007图片样式 电脑教程 小提示:在Word 2007&