text-shadow和box-shadow属性学习

最新推荐文章于 2024-04-18 00:45:00 发布

原创最新推荐文章于 2024-04-18 00:45:00 发布 · 519 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了CSS中的text-shadow和box-shadow属性，包括它们的语法、参数含义及如何使用这些属性来创建文字和盒子阴影效果。通过调整偏移距离、模糊程度和阴影大小，可以实现丰富的视觉效果。

text-shadow和box-shadow属性的学习记录

text-shadow 文字阴影

语法：

text-shadow: x轴的偏移距离(向右为正) y轴的偏移距离(向下为正) 模糊程度(可选，默认0px) 阴影颜色(可选，默认黑色);

然后代码和对应的效果好了

<style>
span {
    /* 阴影 */
    text-shadow: 8px 8px 1px #ff9988;
}
</style>
<span>数量上不行，但是在质量上我们赢了。</span>

代码效果

这只是阴影网右下角去的，当然可以往其他方向上去，如果x轴的值为0，则是在正下方。

<style>
span {
    /* 阴影 */
    text-shadow: 0px 8px 1px #ff9988;
}
</style>
<span>数量上不行，但是在质量上我们赢了。</span>

正下方

如果X轴的值为负值，那阴影就是在左侧。

<style>
span {
    /* 阴影 */
    text-shadow: -8px 8px 1px #ff9988;
}
</style>
<span>数量上不行，但是在质量上我们赢了。</span>

相应的，如果Y轴的值为负值，则阴影向上偏移。（这里就不放图了。）

box-shadow 盒子阴影

语法：

box-shadow: x轴的偏移距离(向右为正) y轴的偏移距离(向下为正) 模糊距离(可选，默认0px) 阴影大小(可选，默认0px) 阴影颜色(可选，默认黑色) inset(可选，内阴影);

<style>
#tag {
    height: 200px;
    width: 200px;
    background: yellow;
    box-shadow: 12px 12px 20px 0px #00ff00;
}
</style>

<div id="tag"></div>

box-shadow效果

如果将box-shadow改一下：box-shadow: 12px 12px 20px 20px #00ff00;

宽度设置为20px时

这里就不去多做测试了，基本和text-shadow一样，X轴和Y轴的参数可以为负数，而模糊距离，阴影大小不可以为负数，但是可以选择不填写。

而对于inset就是把阴影放到了容器的内部:box-shadow: 12px 12px 20px 0px #00ff00 inset;，也是可选的。

内阴影