文字阴影css_CSS文字阴影

文字阴影css

text-shadow can be applied to any text element, but should not, as a general rule, be applied to paragraphs; the property is best left to major headings and navigation bars.

text-shadow可以应用于任何文本元素，但通常不应该应用于段落； 该属性最好留给主要标题和导航栏。

We will explore the syntax, an example, and some common mistakes; for a full-blown and unusual use of the property, you may wish to read Horizontal Reverse-Focus Navigation With CSS3.

我们将探讨语法，示例和一些常见错误； 有关该属性的全面使用和异常使用，您可能希望阅读CSS3的“水平反向焦点导航” 。

text-shadow is fully supported in all modern browsers, with no requirement for vendor prefixes. The property is supported in IE10, but not previous versions.

所有现代浏览器均完全支持text-shadow ，无需供应商前缀 。 IE10支持该属性，但以前的版本不支持。

The basic syntax is very straightforward:

基本语法非常简单：

text-shadow: horizontal offset vertical offset blur color;

An example would be the following CSS:

下面CSS是一个示例：

h1 {
	color: black;
	text-shadow: 0 4px 2px rgba(0, 0, 0, 0.3);
	text-align: centre;
	letter-spacing: .1em;
	text-align: center;
	font-family: Highway, sans-serif; 
	background: #fffdff;
	width: 10em;
	padding: .5em;
	border: 5px double #222;
	background-image: url('assets/images/excelsior-logo.jpg');
	background-repeat: no-repeat;
	background-position: centre;
}
h1 span { 
	text-transform: uppercase; 
	display: block;
	font-size: .8em;
}

Applied to this markup:

应用于此标记：

<h1> ExcelsioR <span>Corporation</span></h1>

逼真的文字阴影提示 (Tips for realistic text shadows)

• A shadow is never solid black unless you are on stage or the surface of the moon: in the real world, ambient light, as well as that reflected from other sources, will cause a shadow to be somewhat transparent. Most neophyte designers make their drop-shadows far too solid and thick; in reality, a drop-shadow is usually subtle, with a transparency of 30% or so. rgba or hsla works particularly well for this, as shadow colors based on these color models will adapt to changes in background colors.

  除非您在舞台上或月球表面，否则阴影永远不会是纯黑色：在现实世界中，环境光以及其他光源反射的光线会使阴影有些透明。 大多数新手设计师将其阴影变得过于牢固和浓密。 实际上，阴影通常很微妙，透明度大约为30％。 rgba或hsla特别有效，因为基于这些颜色模型的阴影颜色将适应背景颜色的变化。

• Similarly, shadows almost never have perfectly crisp edges. Adding a few pixels of blur will make the shadows far more realistic.
  同样，阴影几乎永远不会具有完全清晰的边缘。 添加一些模糊像素将使阴影更加逼真。

• Because we are typically using very small values, blur and offset are usually specified in pixels, although other CSS measurement systems are supported.

  因为我们通常使用非常小的值，所以尽管支持其他CSS测量系统 ，但是模糊和偏移通常以像素为单位指定。

• Lightweight fonts will cast thin shadows. A letter casting a shadow bigger than the original font-size (i.e. by adding a great deal of blur to the shadow) implies that the projected light source is very close to the letter-form, which is not realistic in most cases. Increasing the weight and / or thickness of the font is usually a better route to take. Extra-black and gothic letter forms typically work particularly well.
  轻型字体会产生阴影。 投射阴影的字母大于原始字体大小的字母(即通过向阴影添加大量模糊)意味着投射的光源非常接近字母形式，这在大多数情况下是不现实的。 通常，增加字体的粗细和/或粗细是更好的选择。 黑色和哥特式字母形式通常效果特别好。

• Living on the planet Earth as most of us do, we expect our most common light source (the Sun) to be above us, and projected shadows to be down. You can give negative values to the vertical offset of text-shadow, but doing so tends to produce the flashlight-held-under-the-chin-effect of spooky camp trips.

  像我们大多数人一样，我们生活在地球上，我们希望最普通的光源(太阳)在我们上方，而投射的阴影会在下方。 您可以为text-shadow的垂直偏移量赋予负值，但这样做会产生手电筒般诡异的露营旅行。

• It is possible to supply multiple text-shadows to an element (demonstrated in the aforementioned Horizontal Reverse-Focus Navigation article) but it is usually not recommended.

  可以为一个元素提供多个文本阴影(在前面的“ 水平反向焦点导航”文章中已演示)，但是通常不建议这样做。

翻译自: https://thenewcode.com/223/CSS-text-shadow

文字阴影css