JavaScript-ie8下如何实现四边内阴影

JavaScript-ie8下如何实现四边内阴影

夜无邪 发布于 2017-04-25 字数 231 浏览 1146 回复 3

如题,因为IE8不支持css3的box-shadow属性,所以在IE8没法实现,请问有没有其他好的方法呢?主要是实现正方形四边的内阴影,因为要实现一个不规则按钮凹进去的效果。(ps:或者如果有其他方法能实现按钮凹进去的效果的方法也可以共享一下。)

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

甜柠檬 2017-09-25 3 楼

这个我就说说几个方法吧:
1、给DIV加个内阴影的背景图片。(这个方法是最方便的、最高效的)
2、给DIV加IE Only的滤镜,不过我查了一下好像只有两边的阴影滤镜,没有你说的四边的内阴影滤镜。
3、就是通过JavaScript来生成多个Div层叠效果并且Div边框颜色渐变的效果来模拟。

以上是我能想到的几个方法。

虐人心 2017-09-04 2 楼

1.简单点就两个浮动层堆叠就行了,这样需要切个背景图片。
2.犀利点,可以用js判断浏览器和计算div大小控制vml和svg,画一个出来。

灵芸 2017-07-06 1 楼

当一束光线以一定的角度向一个物体上投射时,才产生该物体的阴影。对空间矩形来说,只能是一个边或相邻两个边有阴影。表格就是这样,它不可能四个边都有阴影。例如:

<style>table{filter:progid:DXImageTransform.Microsoft.Shadow
(Color=#333333,Direction=120,strength=5)}</style>
<table align=center width=400 height=200 bgcolor=#f3f3f3>
<tr>
<td>
<table align=center width=200 height=100 bgcolor=#f3f3f3>
<tr>
<td style="color:brown;font-family:华文行楷;font-size:14px"><center>我在重重阴影下痛苦挣扎</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table bgcolor="blue" style="table-layout:fixed">
<tr>
<td nowrap style="width:100px;overflow: hidden; text-overflow:ellipsis;word-break:keep-all" >
你好朋友朋友朋友我为什么不能看到效果啊
</td>
</tr>
</table>

</td>
</tr>
</table>