HTML阴影box-shadow多个兼容方式,box-shadow透明度如何设置?

18,453次阅读
没有评论

共计 884 个字符,预计需要花费 3 分钟才能阅读完成。

阴影 box-shadow 多个兼容方式


文章来源地址 https://www.toymoban.com/diary/share/98.html

不同浏览器的兼容方式如下:

.box_shadow{
    background-color: #eee;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/ 
    -moz-box-shadow:2px 2px 5px #969696;/*firefox*/ 
    -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/ 
    box-shadow:2px 2px 5px #969696;/*opera 或 ie9*/
    behavior: url(PIE.htc);/*IE8*/
}

注:IE8 下支持。使用 PIE.HTC 插件  点击下载

透明度设置方式如下:

使用 rgba

.box_shadow {box-shadow:0 4px 4px rgba(0, 0, 0, 0.4);
}

box-shadow 使用说明

box-shadow : 0px 1px 2px rgba(0, 0, 0, 0.4);

0px 表示阴影的 x 坐标

1px 表示阴影的 y 坐标

2px 表示阴影的模糊程度

rgba(0, 0, 0, 0.4)  后面表示阴影的颜色

到此这篇关于 HTML 阴影 box-shadow 多个兼容方式,box-shadow 透明度如何设置?的文章就介绍到这了, 更多相关内容可以在右上角搜索或继续浏览下面的相关文章,希望大家以后多多支持 TOY 模板网!

原文地址:https://www.toymoban.com/diary/share/98.html

如若转载,请注明出处:如若内容造成侵权 / 违法违规 / 事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于1970-01-01发表,共计884字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)