css 发光_跨浏览器CSS反射，发光和模糊

css 发光

反射可以为对象增加一个有趣的维度，给人一种真实感，并为它们提供周围环境的上下文。 让我们看一下如何使用CSS实现反射，我们还将研究发光和跨浏览器的模糊效果。

---

假设条件

按照本教程进行操作可遵循多种假设：

• 您知道您HTML。
• 您熟悉CSS和CSS2选择器。
• 如果您想精确地重新创建示例，则应了解box-shadow工作方式。 这不是本教程的关键，因此您需要自己弄清楚。 如果您需要解释，建议您看看CSS3与Photoshop：圆角和盒子阴影 。

---

盒子反射与“我的方法”

Box-reflect是CSS属性，正是出于这个目的：进行反射。 我们将不使用box-reflect和mask-image ，因为：

• 在撰写本文时，这两个属性仅受webkit支持（Chrome和Safari）。
• 至少可以说，该实现存在很多问题。

当微软推出其滤镜效果时（例如IE 4时代，嵌套表用于布局，图像用于反射），肮脏的滤镜不适用于任何给定的元素。 我的猜测是，他们从元素的左上角到右下角使用了某种边界框，这是有道理的，因为据我所知，没有办法超越此框。 但是，他们从未纠正过它。

现在，在Chrome 17时代，webkit犯了同样的错误。 遮罩图像是-webkit-box-reflect的关键，它会在边界框中创建某种动态快照，然后将其粘贴到下面并更改其不透明度。 我试图使用-webkit-box-reflect重新创建演示：

我还没有完成，但是问题很明显。 ETBR具有border-radius和box-shadow 。 框阴影在边界框内可见，但在边界框外不可见。

在我的方法矩阵转换中，插入框阴影和不透明度将替换框反射和蒙版图像。 局限性：

• 最大的限制是，内嵌的阴影框不能使反射完全透明。 它是真实和虚假透明性的结合，将在大多数情况下有效，但并非总是如此。
• ETBR中的文本不受插入框阴影的影响。 如果文本的颜色与表面的背景颜色不同，则会发生这种情况。

小提琴 | 全屏

文字颜色不会在背景处变暗。 因此，似乎您不能同时使用其他颜色和矩形阴影。

---

选择…

当我们讨论矩阵和反射的主题时..

您服用蓝色药丸–我向您展示如何重新创建演示单词。 您服用红色药丸-我将向您展示如何对任何事物进行反射，并告诉您在哪里可以以非常有趣的价格购买这些反射阴影。

简单地说; 以下某些步骤是可选的，具体取决于您是否要为像素重新创建演示像素。

---

可选：准备

该演示以HTML5模板开始...

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>CSS3 Reflections</title>
		<meta name="description" content="Reflection..." />
		<meta name="author" content="Bob de Ruiter" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
	</head>
    <body>
	</body>
</html>

...以及这个CSS文件。

style.css

html {
	height: 100%;
}
body {
	text-align: center;
	line-height: 1;
	margin: 0;
	padding: 0;
	height: 100%;
}
p {
	line-height: 1.2;
}

并且，当然，我们将添加一个指向样式表的链接：

<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>CSS reflections!</title>
		<meta name="description" content="" />
		<meta name="author" content="Bob" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		
		<link rel="stylesheet" href="style.css" />
		
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
	</head>

---

2D，但3D

该演示是2D的。 不是单个3D元素。 我们知道这一点，但是我们的目标是让他们认为我们建立了这个，然后拍摄了前视图。

如果我们希望他们相信3D，则应该确定对象在3D空间中的放置和旋转方式。 该演示有一个视野。 前10％为黑色“天空”，其余90％为假3D平面。 要反射的元素（此后在我们的演示中称为ETBR ）与平面彼此垂直（角度为90°），反射要与ETBR平行。

---

步骤1：可选的飞机和ETBR

HTML：

<body>  
	<div id="plane">
		<header><span id="ETBR">reflection</span></header>
	</div>
</body>

ETBR是飞机的孩子。 这样，它保持在从平面看的相同位置，并且辉光停留在平面中。

body {
	text-align: center;
	line-height: 1;
	margin: 0;
	padding: 0;
	background-color: #000;
	height: 100%;
}
p {
	line-height: 1.2;
}
#plane {
	left: 0;
	top: 10%;
	width: 100%;
	bottom: 0;
	min-width: 1080px;
	min-height: 600px;
	position: absolute;
	overflow: hidden;
	overflow-x: visible;
}

注意：

• 该平面具有最小宽度和最小高度，因此ETBR始终可见。
• 溢出y设置为隐藏，因此ETBR的辉光停留在平面中。 （天空必须是黑色的。）
• 飞机没有背景色，但会从发光中获取颜色，这在任何级别上都没有意义，但看起来是最好的。

---

步骤2：反射标记

找到对象（ETBR），将其复制，粘贴到自身中，然后将其重命名为refl（ection）：

<span id="ETBR">reflection<span id="refl">reflection</span></span>

现在，在css中创建对象的选择器。 将#refl添加到选择器，以便将我们的样式应用于这两个元素：

#ETBR, #refl {
	
}

基本上，反射CSS和HTML必须与ETBRCSS和HTML相同。 我们将定位，镜像和整理第5步中的反射。但是，暂时，我们将隐藏该反射。

#ETBR, #refl {
	
}
#refl {
	display: none;
}

Internet Explorer是Internet Explorer，我们必须添加一些条件HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>CSS3 Reflections</title>
		<meta name="description" content="Reflection..." />
		<meta name="author" content="Bob de Ruiter" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		
		<link rel="stylesheet" href="style.css" />
		
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
	</head>
	<!--[if lt IE 9 ]> <body class="oldie"> <![endif]-->
	<!--[if IE 9 ]> <body class="ie9"> <![endif]-->	
	<!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->   
		<div id="plane">
			<header><span id="ETBR">reflection<span id="refl">reflection</span></span></header>
		</div>
	</body>
</html>

您可能想知道为什么，只是跟我裸露。 因为您在住院，所以第一个小提琴将完全变成黑色。 您是否想看看飞机的影响？ 调整大小。

小提琴 | 全屏

---

步骤3：可选的基本样式

这不需要解释：

#ETBR, #refl {
	color: #004;
	
	font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 200px;
	background-color: #FFE;
	font-weight: bold;
	padding: 30px;
	display: inline-block;
}
#refl {
	display: none;
}

好，稍作解释。 text-align: center;的组合text-align: center; 并display: inline-block; 使元素古板居中 ，但这不是圣杯； 内联项不能包含阻止项。 我使用了它，因为我不想为该示例添加数千个浮动容器。 通常， 这是要走的路。

小提琴 | 全屏

---

步骤4：可选的圆角和发光

辉光由三个阴影组成：大的拉伸阴影（看起来更像是平面上的光的反射），真实的辉光（模糊范围更短的白色阴影）和黑色镶嵌阴影（使ETBR看起来像在发光）。 正如我之前提到的，这些天我将不解释盒子阴影如何工作以及边界半径如何说话。

#ETBR, #refl {
	color: #004;
	
	font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 200px;
	background-color: #FFE;
	font-weight: bold;
	padding: 30px;
	display: inline-block;
	
	box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px;
	border-radius: 30px;
}

小提琴 | 全屏

---

步骤5：反射定位

清空#refl选择器，使反射可见。 由于反射不是“真实的”，因此我们的反射不会成为文档流的一部分。 它应该浮动。 显而易见的选择是将位置设置为绝对位置，这意味着该元素相对于其第一个定位（非静态）祖先元素进行了定位。 由于没有反射的第一个定位祖先，因此它将相对于主体标签定位。

相对于真实文本放置反射要容易得多，这也是反射的祖先（巧合？）。 为此，我们首先必须“定位” ETBR：

#ETBR, #refl {
	color: #004;
	
	font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 200px;
	background-color: #FFE;
	font-weight: bold;
	padding: 30px;
	display: inline-block;
	
	box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px;
	border-radius: 30px;
	
	position: relative;
}

这实际上并不会改变位置，但是会定位。 现在：

#refl {
	position: absolute;
	
	top: 100%;
	left: 0;
}

反射的顶部相对于ETBR的高度和位置。 0％将给它们相同的顶部，200％将留下与ETBR高度一样大的间隙，100％将反射的顶部放在ETBR的底部。 左是相同的，但是占宽度的百分比。

小提琴 | 全屏

---

第6步：现代镜像，模糊和透明度

从IE6到Google Chrome，几乎每种常用的浏览器都具有这些功能。 但是，实现方式有所不同。 现代浏览器非常简单明了，每种功能都有一个特性：变换，模糊和不透明。 我们也将使用box-shadow，但首先进行镜像。

镜射

#refl {
	position: absolute;
	
	top: 100%;
	left: 0;
	
	-moz-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
}

通过转换，我们可以将元素修改为您可以想象的每个平行四边形。 我知道很多平行四边形。 但是我们只需要镜像反射，因此我们将不使用大多数变换函数。

任何设计人员都应该知道在Y轴上按-1缩放与镜像相同。 Y轴上的缩放比例是顶部（和底部）与中心之间的距离乘以。 如果我们在Y轴上按2比例缩放，则顶部到中心的距离将是原来的两倍。 如果按-1缩放，则距离将相同，但是top是底部所在的位置，bottom是顶部所在的位置。 恭喜，您知道如何镜像！

模糊

所有现代的浏览器都将很快支持过滤器-webkit-filter或SVG过滤器。 FF，Opera和IE10已经支持后者，而Safari和Chrome只是在发布之前建立了张力。 SVG滤镜之一是良好的旧高斯模糊。 它很慢，但是有点...

在style.css所在的文件夹中创建文件“ filter.svg”。 其内容：

<?xml version="1.0" standalone="no"?>
<svg width="1" height="1" version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2 3" />
    </filter>
  </defs>
</svg>

除规则6至8以外的形式。称为“模糊”的过滤器（您可以称其为“任意”）会水平模糊2个像素，垂直模糊3个像素。 回到样式表！

#refl {
	position: absolute;
	
	top: 100%;
	left: 0;
	
	-moz-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	
	filter: url(filter.svg#blur); /* FF, IE10 & Opera */
	-webkit-filter: blur(2px);
}

filter.svg#blur表示filter.svg#blur的元素“ blur”。 如果过滤器的ID为“ anything”，则网址为filter.svg#anything 。 模糊半径在SVG文件中定义。 Webkit浏览器将所有这些都放在一条规则中。

透明度

透明度已经更长了，因此我们只需要指定一个属性即可：

#refl {
	position: absolute;
	
	top: 100%;
	left: 0;
	
	-moz-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	
	filter: url(filter.svg#blur); /* FF, IE10 & Opera */
	-webkit-filter: blur(2px);
	
	opacity: .25;
}

我无法将SVG文件放在小提琴中。 （我必须以身作则，以免混淆语义和表示。总之会使事情变得更复杂...）但是我并没有使SVG模糊化……

小提琴 | 全屏

还不完整 苹果在第三天创建反射时，原本打算减少反射。 远离表面的反射应该不太清晰。 让那里黑暗！

这仅在表面具有纯色且字体颜色与此颜色相似时才起作用：我们将通过添加另一个框阴影来使其变暗。 此框阴影将覆盖#ETBR, #refl选择器中的旧阴影。 我们将通过重新声明旧选择器的插入阴影来解决此问题。 第二个阴影是新阴影。 记住，我们添加到反射中的每个阴影都是镜像的。

#refl {
	position: absolute;
	
	top: 100%;
	left: 0;
	
	-moz-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	
	filter: url(filter.svg#blur); /* FF, Opera + IE10*/
	-webkit-filter: blur(2px); /* webkit */
	
	opacity: .25;
	
	box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px; /* first shadow is old */
}

第二个阴影的OffsetY为50像素，但是在应用阴影后 ，该元素始终是镜像的。 阴影不会向下移动，而是向上移动。

看看这个：

小提琴 | 全屏

大！ 现在，用IE8来看看它（或者说我的话）：基本上是ETBR的两个副本，它们不是镜像，透明或模糊的。

---

步骤7：肮脏的过滤

开始时我们添加了一些条件注释。 三组。

• 现代的浏览器和IE10不支持旧的IE过滤器（已放弃IE10的支持），但确实支持新的IE过滤器。
• IE8及更低版本的旧IE支持肮脏的过滤器，不支持新的过滤器。
• IE9，两者都支持一点点。

如果IE9不支持新的东西，那就容易多了。 （不要误会我的意思，我很高兴Internet Explorer尝试进行更改。但这会更容易...。）并且使其变得更加复杂，IE9和IE8中的肮脏过滤器之间也存在差异。 抱怨够了，让我们来做些什么。 为每个组添加一个#refl选择器，并将opacity属性移动到modern。

#refl {
	position: absolute;
	
	top: 100%;
	left: 0;
	
	-moz-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	
	filter: url(filter.svg#blur); /* FF, Opera + IE10*/
	-webkit-filter: blur(2px); /* webkit */
	
	box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px;
}
.modern #refl {
	opacity: .25;
}
.ie9 #refl {
	
}
.oldie #refl {
	
}

肮脏的过滤器不喜欢CSS2不透明度。 说到肮脏的过滤器，我们将使用这些过滤器：

• DXImageTransform.Microsoft.BasicImage使我们能够镜像图像并更改其不透明度
• DXImageTransform.Microsoft.MotionBlur和DXImageTransform.Microsoft.MotionBlur很棒。
• DXImageTransform.Microsoft.Gradient替代第二个盒子阴影。

镜射

第一个过滤器BasicImage实际上具有“ mirror”属性！ 是！ 不幸的是，将此属性设置为1会在水平而非垂直方向上镜像内容。 但这并不意味着它对我们没有用。 将元素旋转180°并水平镜像与垂直镜像相同。 这是可能的：

.oldie #refl {
	filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2);
}

此旋转的度数不是：0是0°，1是90°，2是180°，而3是270°。 只有老歌需要这个。 IE9支持-ms-transform 。

不透明度

我们可以在同一过滤器中指定不透明度...

.ie9 #refl {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25);"
}
.oldie #refl {
	filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2,  opacity=.35);
}

IE9（和IE8，但我认为Internet Explorer已经引起足够的重视）支持-ms-filter。 该值是一个大字符串。 这会引起其他浏览器的理解（由于Internet Explorer，Firefox每个星期五都会去看心理医生）。

模糊

...但是我们需要一个用于模糊的新滤镜。 多个过滤器，如果我们想使其看起来更好。 没有逗号，没有filter:过滤器之间只有一个空格或一个新行。 -ms-filter不再换行...

.ie9 #refl {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
}
.oldie #refl {
	filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35)
	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false')
	progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0)
	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
}

如果我们以6像素的半径对其进行一次模糊处理，则好像有人拍摄了4个反射副本，并在上方移动了6个像素，在下方移动了6个像素，向左移动了6个像素，向右移动了6个像素。 如果要在酒吧炫耀，您应该知道名称：Box Blur。 添加迭代（对模糊对象进行模糊处理）会使“盒子模糊”看起来像普通的模糊。 第二个迭代是运动模糊，因为它看起来不错。

小提琴 | 全屏

这次，不是一回事，而是两件事是错误的：

1. 模糊在IE9中将反射向上和向右移动了几个像素，但在IE8中，它将反射向下移动了。 为什么？ 这是一个谜。
2. 在IE7和IE8中，反射到处都是透明的。

首先要解决的第二个问题：由于旧版本不支持盒阴影，因此我们将使用肮脏的alpha渐变作为替换。 据我所知，这些是CSS中的第一个类似RGBA的值，但是如果w3c规范在那个时候完全说不出rgba值的话，Internet Explorer不会听。 他们使用8个十六进制位代替6。前两个代表字母。 肮脏的渐变采用ARGB而不是RGBA，我必须承认，这听起来要好得多：

.ie9 #refl {
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
}
.oldie #refl {
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99000000, endColorstr=#00000000)
	progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35)
	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false')
	progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0)
	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
}

渐变也必须模糊，所以首先。 默认情况下，污秽过滤器梯度是垂直的。 startColorstr是在顶部和渐变色startColorstr的颜色在底部，但它的镜像！ ＃99000000与rgba（0，0，0，153）相同。 请记住：设置渐变的不透明度越高，反射的不透明度似乎越低。

定位只是反复试验的问题。 由于反射已经以百分比设置了位置，因此无法使用left和top属性将其调整到像素内。 相反，我们将使用margin：

.ie9 #refl {
	margin-top: 20px;
	margin-left: -10px;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
}
.oldie #refl {
	margin-top: -20px;
	margin-left: -7px;
	
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99000000, endColorstr=#00000000)
	progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35)
	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false')
	progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0)
	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
}

小提琴 | 全屏

---

步骤8：完成修饰

在您花一些时间做一些更好的事情之前，我们将做两件事，例如在youtube上打喷嚏的熊猫 。

• 将反射放置在ETBR之外（在z空间中），因为模糊的反射位于ETBR上方和辉光上方。
• 向下移动ETBR。 ETBR的顶部与地平线完美对齐，这看起来很奇怪。

解决方案：

• 通常，我们将ETBR和反射的z-index分别设置为2和1。但是由于在此演示中，反射中没有其他元素（同样在z空间中），因此我们可以简单地将z-反射的索引为-1。
• 在平面的顶部添加填充。 由于ETBR是飞机的子代，它将向下移动。

这是CSS文件。 最后的更改突出显示：

style.css

html {
	height: 100%;
}
body {
	text-align: center;
	line-height: 1;
	margin: 0;
	padding: 0;
	background-color: #000;
	height: 100%;
}
p {
	line-height: 1.2;
}
#plane {
	padding-top: 5%;
	
	left: 0;
	top: 10%;
	width: 100%;
	bottom: 0;
	min-width: 1080px;
	min-height: 600px;
	position: absolute;
	overflow: hidden;
	overflow-x: visible;
}
#ETBR, #refl {
	color: #004;
	
	font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 200px;
	background-color: #FFE;
	font-weight: bold;
	padding: 30px;
	display: inline-block;
	
	box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px;
	border-radius: 30px;
	
	position: relative;
}
#refl {
	position: absolute;
	z-index: -1;
	
	top: 100%;
	left: 0;
	
	-moz-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	
	filter: url(filter.svg#blur); /* FF, Opera + IE10*/
	-webkit-filter: blur(2px); /* webkit */
	
	box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px;
}
.modern #refl {
	opacity: .25;
}
.ie9 #refl {
	margin-top: 20px;
	margin-left: -10px;
	
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
}
.oldie #refl {
	margin-top: -20px;
	margin-left: -7px;
	
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99000000, endColorstr=#00000000)
	progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35)
	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false')
	progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0)
	progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
}

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>CSS3 Reflections</title>
		<meta name="description" content="Reflection..." />
		<meta name="author" content="Bob de Ruiter" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		
		<link rel="stylesheet" href="style.css" />
		
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
	</head>
	<!--[if lt IE 9 ]> <body class="oldie"> <![endif]-->
	<!--[if IE 9 ]> <body class="ie9"> <![endif]-->	
	<!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->   
		<div id="plane">
			<header><span id="ETBR">reflection<span id="refl">reflection</span></span></header>
		</div>
	</body>
</html>

filter.svg

<?xml version="1.0" standalone="no"?>
<svg width="1" height="1" version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2 3" />
    </filter>
  </defs>
</svg>

---

结论

就这样！ 这是最后的小提琴 ， 没有 SVG滤镜模糊。

小提琴 | 全屏

另外，这是使用此技术的纯CSS（背景中的星号除外） Mac Dock 。

我希望您喜欢本教程，也希望您学到新知识。 随时在评论中留下任何问题！

翻译自: https://webdesign.tutsplus.com/tutorials/cross-browser-css-reflections-glows-and-blurs--webdesign-6294

css 发光