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

阴影 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

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

来源:https://blog.csdn.net/qq_29639425/article/details/115792641
领支付宝红包 赞助服务器费用
未经允许不得转载:Toy模板网 » HTML阴影box-shadow多个兼容方式,box-shadow透明度如何设置?
上一篇 2023年08月19日 16:43
下一篇 2023年08月19日 16:43

相关文章

  • css——box-shadow阴影效果

    引用来源:box-shadow详解_box-shadow属性详解-CSDN博客

    2024年02月01日
    浏览(34)
  • 【CSS】盒子模型阴影 ( box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内外阴影; )

    盒子模型阴影 使用 如下 属性设置 : 只有 前两个阴影 , 水平阴影 和 垂直阴影 必须写 , 后面的四个值可以省略 ; 标准的阴影代码 : 展示效果 : 水平阴影代码 : 只修改第一个属性值 ; 展示效果 : 水平阴影代码2 : 只修改第一个属性值 ; 展示效果 : 垂直阴影代码 : 只修改第二个属

    2024年02月12日
    浏览(32)
  • CSS系列之盒子阴影box-shadow(CSS3)

    用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括 阴影的X轴偏移量 、 Y轴偏移量 、 模糊半径 、 扩散半径 和 颜色 。 当给出两个、三个或四个 length 值时。 如果只给出两个值, 那么这两个值将会被

    2023年04月08日
    浏览(32)
  • 我不允许你还不知道CSS的filter的drop-shadow阴影用法以及与box-shadow的区别详解

    这里有两个图片的阴影,你觉得哪个好看? 一个是使用box-shadow另一个是使用filter: drop-shadow 该CSS的filter属性可以实现很多效果 (一)filter: blur(5px) // 高斯模糊,值越大越模糊 (二)filter: brightness(150%) // 图片的亮度百分比,以100%为分界,100%以上越亮,100%以下越暗 (三)f

    2024年02月13日
    浏览(34)
  • 【CSS】box-shadow 属性

    box-shadow 是 CSS 属性,用于为元素添加一个阴影效果,使元素看起来浮起或有层次感。 该属性允许设置一个或多个阴影效果,其语法如下: h-shadow :水平阴影的位置。可以使用负值表示阴影在元素左侧,正值表示阴影在元素右侧,0 表示没有水平阴影。 v-shadow :垂直阴影的位

    2024年02月15日
    浏览(28)
  • (前端)你了解shadow吗?—css属性:box-shadow、text-shadow详解

    前言: css中用于设置阴影的属性有三个,分别是:box-shadow(盒子阴影)、text-shadow(文本阴影) 以及filter:drop-shadow,本篇文章着重介绍盒子阴影与文本阴影。 一、box-shadow(盒子阴影) 1、使用方式 参数介绍: h-shadow:水平阴影位移,大于0时阴影右移,小于0时阴影左移; v-shadow:

    2024年01月16日
    浏览(30)
  • 94款超级漂亮的box-shadow样式 复制即用

    样式如图,代码已在结尾,按照序号复制粘贴便可直接用了: 代码:

    2024年02月11日
    浏览(23)
  • 实时阴影技术(2)Shadow Ray & Shadow Volume

    目录 Shadow Ray 概述 Distance Field Soft Shadows(DFSS) 计算安全角度 DFSS 算法过程 Contact Shadows Shadow Map Space Contact Hardening Shadows [2023] 其它常见 Ray Tracing Height Field Ray Tracing Voxel Cone Tracing SDF Tracing Hardware Ray Tracing Hybrid Frustum-Traced Shadows(HFTS)[2016] Irregular Z-Buffer(IZB)Pass Frustum Tracin

    2024年02月03日
    浏览(41)
  • Unity阴影(Shadow)、Shadowmap

    在Unity中,阴影(Shadow)是用于模拟场景中物体之间相互遮挡和光照效果的特性。阴影可以增加场景的真实感,并在视觉上提供深度和空间感。 Unity提供了几种阴影投射和接收的方法和技术,包括: 实时阴影(Real-time Shadows):使用实时计算的方法在运行时生成阴影效果。U

    2024年02月11日
    浏览(36)
  • CSS中如何实现文字阴影效果(text-shadow)?

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月11日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包