css如何消除字内阴影

html-css042

css如何消除字内阴影,第1张

CSS模拟实现字体内阴影效果。

其实，这只是应用了一些小招数，你看了下面的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}

望采纳！谢谢！

可以用CSS3的阴影属性。 不过要支持IE6的话，加载个 .htc 行为文件就好了。border: 1px solid #696padding: 60px 0text-align: centerwidth: 200px-webkit-box-shadow: #666 0px 0px 10px-moz-box-shadow: #666 0px 0px 10pxbox-shadow: #666 0px 0px 10pxbackground: #EEFF99behavior: url(/PIE.htc)。\x0d\x0a直接使用box-shadow:5px 5px 10px black inset属性设置样式样式就可以了。前两个值（5px 5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，负值反之；第三个值（10px）是设置模糊距离；black就是阴影的颜色啦；最后一个inset是在元素内部创建一个阴影，也就是内阴影了；删除掉inset就是设置外阴影了。\x0d\x0a这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。盒子阴影的CSS实现方法

可以利用before和after伪类产生两个旋转一定角度的阴影来实现，比如：

<style>

section {

   POSITION:relative 

   margin:36px 50px 

   width:640px 

   height:200px 

   background-color:#fff 

   border:10px solid #ff0

}

section:before {

   position:absolute 

   z-index:-1 

   left:20px 

   bottom:10px 

   width:80% 

   height:20px 

   content:"" 

   transform:skew(-18deg) rotate(-3deg) 

   -webkit-transform:skew(-18deg) rotate(-3deg) 

   -moz-transform:skew(-18deg) rotate(-3deg) 

   box-shadow:0 20px 20px #666

}

section:after {

   position:absolute 

   z-index:-2 

   right:20px 

   bottom:10px 

   width:80% 

   height:20px 

   content:"" 

   transform:skew(18deg) rotate(3deg) 

   -webkit-transform:skew(18deg) rotate(3deg) 

   -moz-transform:skew(18deg) rotate(3deg) 

   box-shadow:0 20px 20px #666

}

</style>

<section></section>