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: 12px 12px 20px 20px #00ff00;

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

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