CSS3设计网页案例:漂亮的网页图片设计CSS实例

文章简介：今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition 来创作不同的图片风格。

译自：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实现的效果来说，双冒号更安全一些。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索background
， px
， rgba
box-shadow
，以便于您获取更多的相关知识。

时间： 2024-09-20 18:12:52

CSS3设计网页案例:漂亮的网页图片设计CSS实例的相关文章

网页设计中保持清晰简洁的图片设计技巧

平面设计,网页设计中使用精美图片插图是经常有的事.我们通过观赏许多大师的设计作品会发现,他们使用图片的时候都能给人一种十分合理的感觉,不仅能突出重点,同时也给人比较好的视觉享受. 你如何展示一张非常不错的照片?非常简单,保持清晰,所有无关的元素都不要出现在页面上. Ambient摄影俱乐部出版了它们自己的月刊杂志来提升俱乐部的影响力.因此,他们希望杂志的视觉效果能够显得更加专业,以迎合范围更广的读者.Ambient是一本内部自己使用大幅激光打印机打印的杂志,这也意味着打印的质量相当高,而且能够使

CSS3和HTML5网页设计:响应式网页图片设计

文章简介:HTML5与CSS响应式图片. 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状.那么到底什么是响应式图片呢? 什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片. CSS 响应式图片 对于很多 IOS 开发者来

网页设计技巧:网页实用字符图标代替图片

文章简介:上一周我提出一个关于"在'响应式设计'中图像处理的关键问题"的概述:尤其是如何为各种尺寸的设备提供相适应的的图片?而今天我会认真考虑一下"字符图标",并且我们可以在我们的网页中使用"字符图标"来代替一些图片,达到一样的效果. 图片是有诸多优点的,然而目前在网站设计这行业面临各种各样的挑战.图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.图片还有一个缺点就是不能很好的进行&q

设计经验分享:漂亮又特别的网页按钮

网页制作Webjx文章简介:作为一篇关于设计经验分享的博文,我只有靠自己浅薄的经验写出自己个人的看法,关于界面视觉设计,要分类的话能分得很细,所以能写的就很多,所以我打算先从局部来谈谈我总结的一些设计方法. 作为一篇关于设计经验分享的博文,我只有靠自己浅薄的经验写出自己个人的看法,关于界面视觉设计,要分类的话能分得很细,所以能写的就很多,所以我打算先从局部来谈谈我总结的一些设计方法. 经常有同学问我一些关于按钮设计的问题,怎么样做些漂亮又特别的按钮,我常常会告诉他们怎么画按钮的技法.但是我觉得一

设计整洁漂亮的网页的4项原则

我最喜欢的设计书籍之一就是<Robin Williams Design Workshop>.它深入实际的设计理论,并且包含许多极棒的设计实例.其中一个值得关注的地方就是4项主要的设计原则,它们已经在设计中为我所用.这4项原则就是:反差, 重复, 排列, 和分类. 本文将讨论这4项与web设计相关的原则.只要在脑海中牢牢记住了这4项原则,你就一定可以设计出更加整洁漂亮的网页. 1.反差效果 好的反差效果设计可以给用户一个极好的第一印象.如果用户的眼睛没有焦点,注意力就会在处处是相同尺寸的元素和排

Photoshop设计漂亮的网页页脚模板

  本文介绍一篇制作网页页脚的PS教程,这个页脚的设计很有层次感,同时用网格空格背景纹理修饰,是一个十分漂亮的网页页脚 自从Web2.0冲击互联网以来,页脚就变得比以前任何时候都显得重要了,出现了许多非常漂亮的页脚设计.在这个教程中,我将会教给你如何在Photoshop中创建一个简洁.光滑的网站页脚. 页脚 这就是我们将要创建的页脚.点击下面的截图查看原图. 第1步 和液体感的页首和页脚一样,渐变通常是web2.0设计风格的标志.在这个教程中我们将使用到一组模拟3D材质的渐变文件包.你可以从ex

网页设计技巧案例:借助数学原理构建视觉效果

文章描述:让这些数学理论来为你网页设计撑腰. 古老的数学原理已经存在了成百上千年,但是依然能够帮助我们提高设计水平,你相信吗?这些数学原理经得起时间的检验,能够在构图上给予我们指导,帮助我们构建更加和谐的视觉效果. 你可能在设计中曾经用到过数学原理,也可能没有.无论如何,数学规律适用于各种设计,从印刷设计再到网页设计.因此理解这些数学的原理,就能让你的设计更加的好看.更高瞻远瞩. 黄金比例 黄金比例,也可以说是黄金矩形或者黄金分割,最理想的比例是1.618.这种原理的起源上不知晓,但是黄金比例无

网页设计技巧:使用模糊的背景进行漂亮的网页设计

文章描述:网页设计中的模糊背景. 全尺寸背景在网页设计中已经越来越受欢迎,几年来,这一趋势的另一个变化是模糊的背景图像. 最近似乎有更多的模糊背景设计雨后春笋般冒出来,在使用某种类型的模糊图像的大背景下或者一个全尺寸的背景,不仅让整个网站下显得非常的人性化,烘托出网站所要给用户的氛围,也能更够突出产品或者人物本身特质,在配合新的CSS技术的情况下 更能到给用户舒适的用户体验! 有多种不同类型的网站使用这种方法,有许多非常好的的设计,这种风格,我们已经看到许多Web应用程序或iPhone应用程序.

网页视觉设计:光亮风格的网页设计作品案例

文章描述:强质感高光风格网页欣赏及其表现手法总结. 经常能见到这一类的风格的网页设计作品,它们有如下共同的特点.背景通常是纯色的柔和渐变,不添加任何的材质,色块的边缘部分通常会添加1像素的高光:在页面元素的边缘部分有着强烈的1像素高光:元素表面有如玻璃般的明显反光:底部和背景接触的部分经常会设计出倒影.这种风格的设计经常会出现在商业和企业的网页设计中,会给人留下干净清爽的印象. 我这里将这些常用的表现方法提取了出来,共有6种样式,分别是:1.镜面的内容背景:2.光亮的按钮:3.浮动的圆角水晶按钮