文字阴影
文字阴影的语法格式: text-shadow:水平向右的偏移值 向下的偏移值 迷糊度 阴影的颜色,水平向右的偏移值 向下的偏移值 迷糊度 阴影的颜色; 可以有多个阴影，但是在实际的项目中最多一个阴影就可以了。 <style> div { font-size: 100px; text-align: center; /* 水平方向向右移动5px,垂直方向向下移动10px, 迷糊度[值越大越模糊], 阴影的颜色 */ /* 当水平方向的值是负值的时候，将向左移动*/ text-shadow: 5px 10px 20px red; } </style> <body> <div>雪月剑仙-李寒衣</div> </body>
盒子阴影box-shadow
盒子阴影的语法格式： 水平偏移值，垂直偏移值，模糊度，向外延的值，颜色，内置阴影(inset)
内置阴影在盒子的左上角；默认情况阴影是在盒子的右下角。
<style> div { width: 300px; height: 100px; /* 水平偏移值，垂直偏移值， 阴影颜色 */ box-shadow: 10px 10px pink; } </style> <div>雪月剑仙-李寒衣</div>
div { width: 300px; height: 100px; /* 水平偏移值，垂直偏移值，模糊度， 阴影颜色 */ box-shadow: 10px 10px 5px pink; }
让盒子的四周有阴影
div { width: 300px; height: 100px; /* 水平偏移值，垂直偏移值，模糊度， 阴影颜色 */ box-shadow: 0px 0px 16px pink; } <div>雪月剑仙-李寒衣</div>
盒子阴影外延值
div { margin-top: 50px; width: 300px; height: 100px; /* 水平偏移值，垂直偏移值，模糊度，向外延的值，阴影颜色 */ box-shadow: 0px 0px 16px 4px pink; } <div>雪月剑仙-李寒衣</div>
内置阴影
div { width: 300px; height: 100px; margin: 20px; /* 内置阴影在盒子的内部 */ box-shadow: 0px 0px 16px 4px pink inset; } <div>雪月剑仙-李寒衣</div>
