box-shadow属性的运用
要做个漂亮的网页设计？给元素加点儿阴影就行了呗！别担心，CSS里的box-shadow属性能搞定这个难题。设置下阴影的颜色、位置、大小和模糊度，给元素穿上炫酷的阴影大衣！下面我来用示例教你怎么运用box-shadow属性搞个元素顶部的阴影效果出来啰~
css
.shadow-example {
width: 200px;
height: 200px;020e07b9c04190faf1150ac1cbaa929d-color:#f0f0f0;
黑阴影就弄个"快递暗影"的效果：0-5px 10px rgba（0，0，0，0.1）就行了。
}
.box {
width: 200px;
height: 200px;
background-color: #999;
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.5);
}
咱把200像素的图搞了个上面的浅影，效果就是这样设置的：平移调成零，垂直下拉个5像素，锐利度降低至10像素，还有颜色，就是rgba(0,0,0,0.1)。搞定之后就有了这个淡淡的影子！
告诉你个小技巧，用 box-shadow属性能设置好几个阴影，这样你就能做出很多好玩儿的效果了。比如说，可以叠加内外两个阴影，或者试试看层次感强一些的效果，是不是挺酷的？这box-shadow属性稍微调下就行，简单轻松就能做出各种个性化的元素阴影设计！
text-shadow属性的运用
盒子加上阴影确实挺好看的，但是别忘了，文字也可以变得更有层次。秘密就是那个看似普通的text-shadow属性！这个东西不仅能加阴影，还能让你的文字在浏览器中更加醒目。接下来就让我来举个栗子，教大家怎么用text-shadow添加上部阴影效果。
.text-example {
font-size: 24px;
color:#333;
.text {
font-size: 24px;
color: #333;
text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
}
遮瑕片太牛逼了！咱们就在这些字上添个两像素的阴影，用那种酷炫的黑色，强度调成0.3就对了～
这个小窍门就是用24像素、深灰色（#333）的文字再搞点新花样，加点活跃的颜色！就是加一层2像素宽的亮色阴影，往左下角缩2像素，然后把模糊半径降低到3像素左右，颜色是全黑的（rgb(0,0,0)），透明度微调，1以下就好，看起来就有层次感了，更真实！
你肯定还不知道？原来文本阴影属性可以设好多层，这样你的文章不仅更专业，美观度也直接飙升！瞬间就有了满满的艺术味儿。
实现元素立体效果的阴影
想制作高大上的网页？别急，只需要学会简单的CSS box-shadow功能，就能轻松打造出立体感十足的页面了！比如说，你看这两个层次感超强的阴影效果是怎么出来的？
.stereo-example {
background-color:#f8f8f8;
就是说就在这个框的上下两边各加个5像素宽高、10像素长的白条，然后再往上或往下移个几像素。
.box {
width: 200px;
height: 200px;
background-color: #999;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 30px rgba(0, 0, 0, 0.3);
}
我们得在这儿画个灰白5像素的小圈圈儿（记得要用RGB 150/150/150颜色，透明度大概是0.8哈）。
这段代码在一个200像素的家伙身上弄了两个阴影，一左一右，一大一小，都带点模糊。左边的向上向左偏移5像素，还有些模糊，差不多就10像素；右边的向下向右偏移5像素，这个模糊可是厉害，有整整15像素！看上去挺像立体感对？
调整影子值设定，轻松搞定酷炫真实的立体感！
多个阴影组合创造独特效果
实际上，用CSS我们不仅能做出普通的阴影，还能灵活应用不同的阴影搭配，让你的设计变得炫酷无比！比如，下面这个例子就是教我们怎么利用内外径的投影技巧来突出底部边框的个性~
.combined-example {
height: 100px;
background-color:#eaeaea;
在主角后面那画个五乘五格大小的小洞，深五像素高十像素，然后涂上70%透明度的白颜料。
哈喽~这其实就只是个透明的小白框，高是5像素，宽和长也都只有5像素，数值是7%哟。
.box {
width: 200px;
height: 200px;
background-color: #999;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3) inset;
}
这里用到的是’inset’关键词，有两个小窍门：内部缩进和外部凸出。内部缩进来凹进去一点点，让形状看上去挺独特；外部凸出就更简单了，直接就让整个形状看起来更显眼。
只要给颜色、深浅什么的做点调整，你就能把东西弄得更立体，玩儿出新花样来！
其实，学着用CSS画网页里那些元素的阴影挺容易，就靠box-shadow和text-shadow这两招就行。你可以试各种组合调戏下它们，指不定就能拼凑出个新颖好看的效果来呢～当设计师，工作时时不时这么一打扮，不仅视觉效果瞬间升华，还能让用户感受到更好的体验！
评论0