邮政文字录入练习软件"/>
邮政文字录入练习软件
邮政文字录入练习软件
Text shadows – today we are going to investigate in depth the text-shadow css3 property. You probably know, that besides the text-shadow, there is another similar property – ‘box-shadow’. Both the properties are defined in two different modules, however, both properties identically. Thus, if you are already familiar with the box-shadow property, it will be easy for you to learn the ‘text-shadow’. Before all, in order to understand difference, we will read a bit of theory, browser support, and then we will start practicing.
文本阴影–今天，我们将深入研究text-shadow css3属性。 您可能知道，除了文本阴影之外，还有另一个类似的属性–“ box-shadow”。 这两个属性在两个不同的模块中定义，但是，两个属性相同。 因此，如果您已经熟悉box-shadow属性，那么学习“ text-shadow”将很容易。 毕竟，为了理解差异，我们将阅读一些理论，浏览器支持，然后我们将开始练习。
浏览器支持 (Browser Support)
Both properties (text-shadow and box-shadow) are supported by majority of modern browsers ( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10).
大多数现代浏览器(> Chrome 4.0，> Firefox 3.5，> Safari 4.0，> Opera 9.6，> IE10)都支持这两个属性(文本阴影和框阴影)。
“文本阴影”和“框阴影”之间的区别 (Difference between ‘text-shadow’ and ‘box-shadow’)
Syntax of box-shadow is the following:
box-shadow的语法如下：
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
Syntax of text-shadow is the following:
文本阴影的语法如下：
text-shadow: h-shadow v-shadow blur color|none|initial|inherit;
text-shadow: h-shadow v-shadow blur color|none|initial|inherit;
Here are only few differences: first — you can not create an inner shadow for text, second – there is no spread distance for text-shadow. However, you still can create multiple shadows (displayed on top of each other).
这里只有几个区别：首先-您不能为文本创建内部阴影，其次-文本阴影没有扩展距离。 但是，您仍然可以创建多个阴影(彼此叠加显示)。
练习“文本阴影” (Practice with ‘text-shadow’)
颜色和胶印 (color and offsets)
In the following examples we define horizontal and vertical offsets with custom colors
在以下示例中，我们使用自定义颜色定义水平和垂直偏移
text-shadow:10px 10px;
text-shadow:-5px -5px; color:blue;
text-shadow:-1px -1px white; color:blue; background:#888;
text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee;
text-shadow:10px 10px;
text-shadow:-5px -5px; color:blue;
text-shadow:-1px -1px white; color:blue; background:#888;
text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee;
Note, that positive offset value moves the shadow to the right/bottom, negative value moves the shadow opposite – to the left/top
请注意，正偏移值将阴影移到右侧/底部，负值将阴影向右侧移至–左侧/顶部
The shadow color is optional, if the color is missed, it is inherited from parent’s color. However, you should pay attention that it can acts differently in different browsers, so I recommend to define the color (rgb / rgba / hsla etc).
阴影颜色是可选的，如果错过了颜色，则它将从父级的颜色继承。 但是，您应该注意，它在不同的浏览器中的行为可能不同，因此我建议定义颜色(rgb / rgba / hsla等)。
模糊 (blur)
In the following examples we define various blurring
在以下示例中，我们定义了各种模糊
The blur is optional param, it defines distance of blurring. It should be a positive value (because 0 means – no blur). The following image explains how it works:
模糊是可选参数，它定义模糊的距离。 它应该是一个正值(因为0表示–无模糊)。 下图说明了它是如何工作的：
element {text-shadow:5px 5px 3px darkred; color:red;
}
element {text-shadow:4px -4px 10px red; color:azure; background:#333;
}
element {text-shadow:0px 0px 4px ;
}
parent {color:red;
}
element {text-shadow:0px 0px 4px ;
}
parent {color:lightgray; background:#333;
}
element {text-shadow:5px 5px 3px darkred; color:red;
}
element {text-shadow:4px -4px 10px red; color:azure; background:#333;
}
element {text-shadow:0px 0px 4px ;
}
parent {color:red;
}
element {text-shadow:0px 0px 4px ;
}
parent {color:lightgray; background:#333;
}
First two examples use different blur distance, for last two examples we didn’t set the color, but we applied different colors (and background color) for their parents.
前两个示例使用了不同的模糊距离，后两个示例我们没有设置颜色，但是我们为其父母应用了不同的颜色(和背景颜色)。
伸缩 (Expansion and contraction)
Similarly to ‘box-shadow’, the ‘spread’ property is going to be added in CSS4. Currently, it is known, that it is supported in IE10 (probably in more modern browsers). This is forth number parameter for ‘text-shadow’ property. You can use this param to expand or contract the shadow.
与“ box-shadow”类似，将在CSS4中添加“ spread”属性。 当前，已知它在IE10中受支持(可能在更现代的浏览器中)。 这是“文本阴影”属性的第四个数字参数。 您可以使用此参数来扩大或缩小阴影。
text-shadow:5px 5px 0px 3px lightgreen; color:green;
text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900;
text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green; background:#333;
text-shadow:5px 5px 0px 3px lightgreen; color:green;
text-shadow:8px 8px 2px -3px darkgreen; color:green; font-weight:900;
text-shadow:0 0 0 3px rgba(128, 255, 0, 0.75); color:green; background:#333;
Positive value increases the shadow, negative – decreases. Zero value can be used to outline the text (third example).
正值增加阴影，负值减少。 零值可用于概述文本(第三个示例)。
多重阴影 (Multiple shadow)
As we explained before, you can apply multiple shadows to the text:
如前所述，您可以对文本应用多个阴影：
Simple outlining (4.1):
简单概述(4.1)：
text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta; /* example 1: basic outlining */
text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35), /* example 2 */6px -6px 4px 2px rgba(255,255,255,0.25),-3px -3px 4px 6px rgba(255,0,255,0.15);
text-shadow: 0 0 0 3px white, /* example 3: neon - 1 */0 0 2px 6px magenta,0 0 1px 9px white,0 0 6px 12px magenta;
color:magenta;
text-shadow: 0 0 2px #fff, /* example 4: neon 2 */0 0 4px 2px rgba(255,255,255,0.5),0 0 6px 6px #f0f,0 0 4px 7px #fff,0 0 3px 15px #222,-4px 0 2px 9px #f0f,4px 0 2px 9px #f0f,0 -4px 2px 9px #f0f,0 4px 2px 9px #f0f;
color:white;
text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px; /* example 5: text underlining */
color:magenta;
text-shadow: 0 0 0 3px white, 0 0 0 4px gray; color:magenta; /* example 1: basic outlining */
text-shadow: 3px 3px 4px 2px rgba(255,255,255,0.35), /* example 2 */6px -6px 4px 2px rgba(255,255,255,0.25),-3px -3px 4px 6px rgba(255,0,255,0.15);
text-shadow: 0 0 0 3px white, /* example 3: neon - 1 */0 0 2px 6px magenta,0 0 1px 9px white,0 0 6px 12px magenta;
color:magenta;
text-shadow: 0 0 2px #fff, /* example 4: neon 2 */0 0 4px 2px rgba(255,255,255,0.5),0 0 6px 6px #f0f,0 0 4px 7px #fff,0 0 3px 15px #222,-4px 0 2px 9px #f0f,4px 0 2px 9px #f0f,0 -4px 2px 9px #f0f,0 4px 2px 9px #f0f;
color:white;
text-shadow: 0 -3px 3px 15px white, 0 1px 2px 9px; /* example 5: text underlining */
color:magenta;
模拟扩展 (Emulating expansion)
It was already described (that ‘spread’ is supported only in CSS4), however you still can emulate it with CSS3:
已经进行了描述(仅CSS4支持“ spread”)，但是您仍然可以使用CSS3进行仿真：
text-shadow: 0px 0px 0px 4px magenta;
/* is similar to: */
text-shadow: magenta 0px 2px,magenta 2px 0px,magenta -2px 0px,magenta 0px -2px,magenta -1.4px -1.4px,magenta 1.4px 1.4px,magenta 1.4px -1.4px,magenta -1.4px 1.4px;
text-shadow: 0px 0px 0px 4px magenta;
/* is similar to: */
text-shadow: magenta 0px 2px,magenta 2px 0px,magenta -2px 0px,magenta 0px -2px,magenta -1.4px -1.4px,magenta 1.4px 1.4px,magenta 1.4px -1.4px,magenta -1.4px 1.4px;
其他例子 (Additional examples)
Here are other custom examples:
以下是其他自定义示例：
双影 (Twin shadow)
text-shadow: 0 0 2px 2px white,2px 0 2px 5px #222,3px 0 3px 6px #933,5px 0 2px 14px #222,6px 0 5px 16px #533;
background-color:#222;
color:white;
text-shadow: 0 0 2px 2px white,2px 0 2px 5px #222,3px 0 3px 6px #933,5px 0 2px 14px #222,6px 0 5px 16px #533;
background-color:#222;
color:white;
“信报” (‘Letter-press’)
text-shadow: 0px 2px 3px #555;
background-color:#333;
text-shadow: 0px 2px 3px #555;
background-color:#333;
彩虹 (Rainbow)
text-shadow: 0 0 2px 3px yellow,0 0 2px 6px orange,0 0 2px 9px red,0 0 2px 12px lime,0 0 2px 15px blue,0 0 2px 18px violet;
text-shadow: 0 0 2px 3px yellow,0 0 2px 6px orange,0 0 2px 9px red,0 0 2px 12px lime,0 0 2px 15px blue,0 0 2px 18px violet;
3D (3D)
text-shadow: 0 0 1px #999,1px 1px 1px #888,2px 2px 1px #777,3px 3px 1px #666,4px 4px 1px #555,5px 5px 1px #444;
background-color:#333;
color:white;
text-shadow: 0 0 1px #999,1px 1px 1px #888,2px 2px 1px #777,3px 3px 1px #666,4px 4px 1px #555,5px 5px 1px #444;
background-color:#333;
color:white;
复古/复古效果 (Retro / Vintage effect)
text-shadow: 2px 2px #fff,3px 3px #666;
text-shadow: 2px 2px #fff,3px 3px #666;
仅第一个字母的阴影(伪类:::第一个字母) (First-letter-only shadow (pseudo-class ::first-letter))
.text {text-shadow:0 0 5px;
}
.text::first-letter {color:azure;text-shadow:0 0 5px, 0 0px 6px 3px blue, 0 -2px 6px 6px cyan, 0 -4px 9px 9px lightblue ;
}
.text {text-shadow:0 0 5px;
}
.text::first-letter {color:azure;text-shadow:0 0 5px, 0 0px 6px 3px blue, 0 -2px 6px 6px cyan, 0 -4px 9px 9px lightblue ;
}
火焰 (Flame)
Please, consider unlocking the code of the last example using the form below:
请考虑使用以下表单解锁最后一个示例的代码：
[sociallocker]
[社交储物柜]
text-shadow: 0 0 2px #eee,0 0 4px 2px #fff,0 -2px 4px 2px #ff3,2px -4px 6px 4px #fd3,-2px -6px 11px 6px #f80,2px -8px 18px 8px #f20;
background-color:#222;
color:white;
text-shadow: 0 0 2px #eee,0 0 4px 2px #fff,0 -2px 4px 2px #ff3,2px -4px 6px 4px #fd3,-2px -6px 11px 6px #f80,2px -8px 18px 8px #f20;
background-color:#222;
color:white;
[/sociallocker]
[/ sociallocker]
翻译自: /
邮政文字录入练习软件
更多推荐
邮政文字录入练习软件
发布评论