文字阴影

实现文字阴影

一.文字阴影

text-shadow 文字阴影

• 参数1 : 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
• 参数2 ：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
• 参数3 ：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
• 参数4 ： 设置对象的阴影的颜色

text-shadow: 10px 10px 50px #000;

效果

HTML结构

CSS样式

字体样式

字体颜色

文本阴影 那我们来看一下具体属性代码:

HTML:

< div class=“text”>文字阴影 < div>
css:
.text{
font: bold 100px/1.5 ‘微软雅黑’;
color: dodgerblue;
/文本阴影/
text-shadow: 10px 10px 50px #000;
/text-shadow: 10px 10px 50px #000,-10px -10px 50px #f00;/
}

二，盒子阴影

box-shadow 盒子阴影

属性：
X-shadow 必需的。水平阴影的位置。允许负值
Y-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小 。 允许负值
color 可选。阴影的颜色。
inset 可选。从外层的阴影（开始时）改变阴影内 侧阴影。
默认情况下 ：以外阴影显示（outset）。