文本内部阴影该怎么实现?
问题描述
文本阴影可以用text-shadow实现?那么文字内部阴影的显示该怎么实现呢?
问题解答
回答1:关键点就是,用RGBA透明色模拟字体内阴影效果。
body{background:#fff;}.inset-text{font-family:Helvetica,Arial,sans-serif;font-weight:bold;font-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-serif;font-weight:bold;font-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;}
相关文章:
1. javascript - 关于在angularjs的select中遇到的问题!!2. angular.js - Angular1使用bootstrap轮播条carousel不能自动轮播3. python - 基于scrapy-redis的分布式爬虫运行的时候不能正常运行 遇到的问题如下截图所示4. atom编译器 如何格式化前端代码文件?5. javascript - 关于Js中 this的一道题6. Android Studio 中程序添加不上Xutils 3.0 jar包7. 移动端页面文字垂直居中兼容性问题8. javascript - 求一套有关于IP地址的JS正则!9. css3 - 我的css用less写的,eclipse的jsp文件要修改css很麻烦,怎么解决?10. android - 新建项目卡在Gradle:Resolvedependencies’:app:_debugCompile’