其实，这只是应用了一些小招数，你看了下面的CSS片段也许就会立即明白是怎么回事:)，而关键点就是，用RGBA透明色模拟字体内阴影效果。
body{background:#fff}
.inset-text{
font-family:Helvetica,Arial,sans-seriffont-weight:boldfont-size:5em
color:rgba(0,102,204,0.7)
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff
}
原理很简单，text-shadow 始终处于字体之下，所以用 text-shadow 的多重阴影先在字体实色之下模拟出内嵌阴影的效果，然后，通过将字体的透明度降低，达到字体内阴影的模拟效果。当然这种模拟是有局限的，比如，背景色和模拟阴影必须相同，不然就穿帮了，呵呵。其次，在不支持RGBA的浏览器里，不能发挥作用，而且还必须在RGBA之上添加默认颜色以保证老浏览能至少显示实色：
.inset-text{
font-family:Helvetica,Arial,sans-seriffont-weight:boldfont-size:5em
color:#09f
color:rgba(0,102,204,0.7)
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff
}
最后，如果你选中上面那段示例的文本，可以看到很明显的模糊。这在之前也以及提到过，因为多重阴影的作用在选中时依然有效，所以为了文本的可读性，应该将选中时的文本阴影去掉。
-moz-selection{text-shadow:none}
selection{text-shadow:none}
望采纳！谢谢！
如果页面中存在绝对定位（position:absolute）或固定定位（position:fixed）的元素时，这些元素与主文档流并不在同一平面（你可以把它们想象成漂浮在空中的），这样的话地面物体的阴影肯定不能遮挡空中物体啦！你可以把含box-shadow属性的元素也弄成绝对定位或固定定位的，并且把z-index属性弄得比其他漂浮元素都大，这样它的阴影就能遮盖所有其他元素了。一句话概括，就是要把它弄成最高的那一层！补充一点：即使是在同一平面（所有元素都在地面，没有漂浮在空中的元素），那么如果含有box-shadow属性的元素后面还有其他元素，那么它的阴影也是没法遮盖后面的元素的。
渐变: 有规律的渐渐变化,在前端中通常指颜色的变化的实现方式. 通常使用在所有接受图像的属性上.(替代图片),意义是创建一张图片
gradient可以应用在所有接受图像的属性上
线性渐变(linear-gradient)变化的方向是一条直线
径向渐变(radial-gradient)变化的方向是从圆心向四周运动运动
用于创建一个表示两种或多种颜色线性渐变的图片。
第一个参数可以省略,默认从上往下,
后续每个参数描述某个关键点的位置的颜色,两个关键点之间渐变.
用来展示由原点（渐变中心）辐射开的颜色渐变。
radial-gradient( shape [size ]?[at <position>,]?<color-stop>[,<color-stop>]+)
没有数值范围的时候颜色均分,从圆心开始到矩形最远的点均分颜色,然后绕圆心画圆染色,支持很多很多颜色
实例:
原点放射渐变的图像。它类似于并且采取相同的论据，但它重复无限地在各个方向上停止颜色以覆盖整个容器。
渐变平铺 repeating- 渐变属性
了解一下
给盒子添加阴影表现效果，仿佛有光打到盒子上
和原盒子一样大小，包含border
box-shadow: h-shadow v-shadow blur spread color outset
定义文字的阴影
类似于 box-shadow 不支持缩放和内外阴影，可叠加逗号分隔
阴影叠加: 先渲染前面的，再渲染后面的
