你不能错过的创意CSS文字阴影效果第三弹

.时髦的双影

要创建此效果，文本将被赋予两个硬阴影，没有模糊半径。第一个阴影被赋予背景颜色并被放置在文本附近，第二个阴影被赋予文本颜色并且放置的距离大于文本中的第一个阴影。

CSS

color: #dfdfdf;
text-shadow: 4px 4px 0px #000, 
 -4px 0 0px #000,
 7px 4px 0 #fff;

22.彩色阴影

在这个演示中，每个字母都有不同颜色渐变的阴影，使它看起来非常令人印象深刻。

HTML

<p>
 <span id="y">Y</span>
 <span id="o">O</span>
 <span id="u">U</span
</p>

CSS

color: #dfdfdf;
#y {
 text-shadow: 0 1px 2px #75b663,
 1px 3px 1px #5ea04b, 
 2px 5px 1px #5b9c49, 
 4px 7px 1px #518b41, 
 6px 9px 1px #477939,
 8px 11px 1px #3d6831,
 10px 13px 1px #335729,
 12px 15px 1px #294521,
 14px 17px 1px #1e3418;
}
#o {
 text-shadow: 0 1px 2px #9d64c4,
 1px 3px 1px #9759c0, 
 2px 5px 1px #8b46b9, 
 4px 7px 1px #7d3fa6, 
 6px 9px 1px #6f3894,
 8px 11px 1px #613181,
 10px 13px 1px #532a6f,
 12px 15px 1px #45235c,
 14px 17px 1px #381c4a;
}
#u {
 text-shadow: 0 1px 2px #c48564,
 1px 3px 1px #c07d59, 
 2px 5px 1px #b96e46, 
 4px 7px 1px #a6633f, 
 6px 9px 1px #945838,
 8px 11px 1px #814d31,
 10px 13px 1px #6f422a,
 12px 15px 1px #5c3723,
 14px 17px 1px #4a2c1c;
}

3.陷落的文本

实际上，您可以使用CSS使文本看起来像在本演示中所做的那样。它的方向和位置使用transform 属性进行更改，并给出不同的阴影组，使其看起来更自然。

HTML

<p data-text='FALLEN'>FALLEN</p>

CSS

p {
 transform: skew(40deg)rotate(-10deg)rotateX(50deg)translate3d(0, 0, 0);
 -webkit-perspective: 100px;
 perspective: 100px;
}
p::before {
 text-shadow: 0 2px 3px #747474, 
 -3px 3px 1px #222, 
 -6px 5px 1px #474747, 
 -9px 7px 1px #747474,
 -12px 9px 1px #565656,
 -15px 11px 1px #343434,
 -22px 15px 1px #171717;
}
p:before,
p:after {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 content: attr(data-text)
}
p:after {
 color: #edc;
}

4.多个彩色阴影

这是通过使用蓝色和粉红色的两个远距离阴影创建的多文本阴影效果的另一个令人印象深刻的示例。

CSS

color: #474747; 
 
text-shadow: 20px 10px 0px #ff99cc,
 -15px -6px 0px #64a5b7;

5.淘汰文本

这是淘汰文本的一个示例，它允许通过它可以看到它的背景。使用text-shadow 和 mix-blend-mode属性创建此效果。

渴望了解更多有关淘汰文本的信息？访问链接如何使用CSS创建Knockout Text 并学习创建不同类型的挖空文本效果。

HTML

<div id="parent">
 <p>Hey there!</p>
</div>

CSS

div {
 background: url('https://www.dl.dropboxusercontent.com/s/rv0tbpx6fmtr4vi/texture.jpg') repeat;
 padding: 10px;
}
p {
 padding: 30px;
 mix-blend-mode: multiply;
 text-shadow: 5px 4px 11px rgb(0,0,0), 0 2px 5px rgb(0,0,0);
 text-align: center;
}

结论

文本阴影在网站中广泛使用，并且很容易实现。您可以直接选择本文中给出的任何文本阴影并增强您的设计。您还可以通过提供不同颜色和其他变化来创建自己的颜色，从这些阴影中获取想法。我们很快就会发布一篇文章，讨论创建这里给出的文本效果的提示和技巧。

整理不易，请大家多多关注支持我，谢谢！

用HTML的颜色代码，您可以设置网站的背景、文字颜色的颜色、表格单元格颜色、CSS样式表中众多元素的颜色搭配等等，不仅可以使用#80BFFF和颜色的英文名称(red)这样的代码，还能使用RGBA、HSLA等带透明通道的颜色代码。

网页配色使用背景的HTML颜色代码：<body bgcolor="#80BFFF">
网页配色使用文字的HTML颜色代码：<font color="#80BFFF">
网页配色使用表格的HTML颜色代码：<table bgcolor="#80BFFF">
网页配色使用连接的HTML颜色代码：<a style="color:#80BFFF">
网页配色使用CSS背景的HTML颜色代码：.bgcolor{backgroun:#FF0000;}
网页配色使用CSS文字颜色的HTML颜色代码：.txtcolor{color:#424242;}

常见色彩搭配问题解答

紫色配什么颜色好看？
墨绿色配什么颜色好看？
粉色配什么颜色好看？
绿色配什么颜色好看？
蓝色配什么颜色好看？

橙色配什么颜色好看？
玫红色配什么颜色好看？
咖啡色配什么颜色好看？
红色配什么颜色好看？
天蓝色配什么颜色好看？

卡其色配什么颜色好看？
驼色配什么颜色好看？
浅绿色配什么颜色好看？
橘红色配什么颜色好看？
橘色配什么颜色好看？

紫色配什么颜色好看

紫色配黄色系，视觉冲击力强，会使人眼前一亮；蓝色系，比较协调、不张扬。

#F1B000
#5C0C7B
#7B76AC
#2059A6

墨绿色配什么颜色好看

墨绿色比较沉稳，可以搭配活泼跳跃一点的颜色，黄色是绿色的临近色，应该搭配不成问题，只有穿的场合问题，天蓝色配个今年流行的撞色也不错啊！

#669934
#346633
#65CC66
#0099CB

粉色配什么颜色好看

粉色这类颜色的组合多用于女性主题，例如：化妆品、服装等，鲜嫩而充满诱惑，传达着柔情、娇媚、温柔、甜蜜、纯真、诱惑的心理感受。

#FE6767
#FFCC9A
#FF6766
#CB3398

绿色配什么颜色好看

当绿色搭配同色系的亮色如柠檬黄绿、嫩草绿或白色，会给人清爽、生动的感觉；当绿色与暖色系的黄色或橙色相配，会有青春、活泼之感。而绿色与蓝色、紫色或黑色相配时，高贵华丽，但是最好不要过多使用。

#346633
#669934
#9ACC99
#D6E6B5

蓝色配什么颜色好看

蓝色搭配：在所有颜色中，蓝色服装最容易与其他颜色搭配。不管是近似于黑色的蓝色，还是深蓝色，都比较容易搭配，而且，蓝色具有紧缩身材的效果，极富魅力。

#30588C
#77C3F2
#B6DBF2
#3A758C

橙色配什么颜色好看

橙色是欢快活泼的光辉色彩，是暖色系中最温暖的色，它使人联想到金色的秋天，丰硕的果实，是一种富足、快乐而幸福的颜色。橙色稍稍混入黑色或白色，会变成一种稳重、含蓄又明快的暖色，但混入较多的黑色，就成为一种烧焦的色；橙色中加入较多的白色会带来一种甜腻的感觉。

橙色明视度高，在工业安全用色中，橙色即是警戒色，如火车头，登山服装，背包，救生衣等，橙色一般可作为喜庆的颜色，同时也可作富贵色，如皇宫里的许多装饰。橙色可作餐厅的布置色，据说在餐厅里多用橙色可以增加食欲。

橙色与浅绿色和浅蓝色相配，可以构成最响亮、最欢乐的色彩。橙色与淡黄色相配有一种很舒服的过渡感。橙色一般不能与紫色或深蓝色相配，这将给人一种不干净、晦涩的感觉。由于橙色非常明亮刺眼，有时会使人有负面低俗的意象，这种状况尤其容易发生在服饰的运用上，所以在运用橙色时，要注意选择搭配的色彩和表现方式，才能把橙色明亮活泼具有口感的特性发挥出来。

节我们讲文本样式，像比如设置文本颜色呀，首行缩进、水平对齐等，可以对网页进行排本设置等。

将要学习的文本属性有如下几个：

color

首先我们来讲文本颜色设置，前面我们讲过一节关于如何设置颜色，所以想必大家对如何给文本设置颜色不会。

示例：

例如给下面的 <p> 标签中的 <span> 标签中的文本，颜色设置为粉色：

 <p>盛年不重来，<span>一日难再晨</span>。及时宜自勉，岁月不待人。</p>

CSS 样式代码：

span{
    color: pink;
}

或者使用十六进制颜色值：

span{
    color: #FFC0CB;
}

text-index

一般我们在写作文的时候，所有段落的首行都会首行缩进两个字，而我们如果希望在网页中的段落也能实现首行缩进呢，这就可以通过 CSS 中的 text-index 属性来设置首行文本的缩进。

text-index 属性直接将缩进距离以数字表示，单位为 em 或 px。一般我们使用 em 更多，通常将值设置为 2em，表示缩进两个字符。

em 是相对单位，表示的长度相当于文本中字符的倍数，会根据字符的大小，自动适应，空出设置字符的倍数。

text-index 属性允许使用负值，如果使用负值，那么首行会被缩进到左边。

示例：

实现第一个段落和最后一个段落的首行缩进：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <p class="index">蒹葭苍苍，白露为霜。所谓伊人，在水一方。</p>
        <p>溯洄从之，道阻且长。溯游从之，宛在水中央。</p>
        <p>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</p>
        <p>溯洄从之，道阻且跻。溯游从之，宛在水中坻。</p>
        <p>蒹葭采采，白露未已。所谓伊人，在水之涘。</p>
        <p class="index">溯洄从之，道阻且右。溯游从之，宛在水中沚。</p>
    </body>
</html>

CSS 样式代码：

.index{
    text-indent: 2em;
}

在浏览器中的演示：

text-align

text-align 属性用于设置元素中文本的水平对齐方式。

属性值有下面几种：

示例：

看一下不同属性值能实现的效果：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <p class="text1">内容居中</p>
        <p class="text2">内容居左</p>
        <p class="text3">内容居右</p>
        <p>内容不添加样式</p>
    </body>
</html>

CSS 样式代码：

.text1{
    text-align: center;
}
.text2{
    text-align: left;
}
.text3{
    text-align: right;
}

在浏览器中的演示：

line-height

line-height 用于设置行高，也就是设置行间的距离。

属性值可以是下面几种：

一般我们使用数字来表示，单位为 px，如果不添加单位，则表示按倍数表示，这时行高是字体大小的倍数。

示例：

例如下面第一个 <p> 标签中的内容字体大小为14px，将行高设置为 21px，和将行高设置为 2（字体大小的两倍）是一样的效果：

 <body>
    <p class="text">鲁迅的成功，有一个重要的秘诀，就是珍惜时间。鲁迅十二岁在绍兴城读私塾的时候，父亲正患着重病，两个弟弟年纪尚幼，鲁迅不仅经常上当铺，跑药店，还得帮助母亲做家务，为免影响学业，他必须作好精确的时间安排。</p>
    <p>此后，鲁迅几乎每天都在挤时间。他说过：「时间，就像海绵里的水，只要你挤，总是有的。」鲁迅读书的兴趣十分广泛，又喜欢写作，他对于民间艺术，特别是传说、绘画，也深切爱好。</p>
</body>

CSS 样式代码：

.text{
    font-size: 14px;
    line-height: 28px;
    /* 相当于 line-height:2; */
}

在浏览器中的演示：

text-decoration

text-decoration 属性用于设置文本的装饰，也就是给文本设置某种效果，例如下划线、删除线等。

属性值可以是下面几种：

示例：

除了给文本添加装饰，我们还可以通过text-decoration 属性去掉链接下面的下划线：

<p>默认文本</p>
<p class="p1">设置下划线</p>
<p class="p2">设置上划线</p>
<p class="p3">设置删除线</p>
<p class="p4">文本闪烁</p>
<a href="#">去掉链接的下划线</a>

CSS 样式代码：

.p1{
    text-decoration: underline;
}
.p2{
    text-decoration: overline;
}
.p3{
    text-decoration: line-through;
}
.p4{
    text-decoration: blink;
}
a{
    text-decoration: none;
}

在浏览器中的演示：

总结：本节所学习的文本样式，在实际应用中我们会经常用到，所以大家要弄清楚这几个属性的使用，以及当赋值不同的属性值时，展示出来的效果是什么。

想看更多可以：https://www.9xkd.com/

在线咨询

上一篇：我用Python做了一个植物大战僵尸！「附源码」
下一篇：个体工商户自行申报操作指引（网页端）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

你不能错过的创意CSS文字阴影效果第三弹

color

text-index

text-align

line-height

text-decoration

您的项目需求