`
80htm
  • 浏览: 4621 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

CSS3的Box Shadow

    博客分类:
  • CSS
阅读更多

语法:

  box-shadow: 水平偏移  垂直偏移  [模糊值]  [延伸值]  [颜色]  [inset]

 

属性:

  水平偏移: 水平方向的偏移,从左到右,可取负值

  垂直偏移: 垂直方向的偏移,从上到下,可取负值

  模糊值: 可选, 正数

  延伸值: 可选, 正数

  颜色: 可选

  inset: 可选,如果设置inset,阴影内陷,否则外凸

 

例子:

  box-shadow: 5px 5px 2px rgba(68, 68, 68, 0.55);

 

浏览器差异:

  -moz-box-shadow: 5px 5px 2px rgba(68, 68, 68, 0.55);

  -webkit-box-shadow: 5px 5px 2px rgba(68, 68, 68, 0.55);

  box-shadow: 5px 5px 2px rgba(68, 68, 68, 0.55);

 

在线演示

 

分享到:
评论

相关推荐

    qt模拟CSS3之box-shadow效果

    由于qss不支持css3的box-shadow效果,故而该工程中,采用类似android九点图的方式,把背景图截为9分,即4角4边一中心,并把4角4边重绘于待修饰的控件的边缘,从而模拟了box-shadow效果。

    jQuery CSS3 box-shadow属性设置css3阴影

    在网页设计中,CSS3引入了许多新的特性,其中之一就是`box-shadow`属性,它使得开发者可以为元素添加逼真的阴影效果,从而提升界面的视觉吸引力。`jQuery`作为一个广泛使用的JavaScript库,虽然不直接处理CSS样式,...

    CSS3属性box-shadow使用指南

    今天比较忙,没能好好看新东西,就记录一个常用的CSS3属性吧:box-shadow,表示阴影,如果设置了border-radius圆角,则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法: Formal ...

    纯CSS3雷达扫描模拟动画

    7. **CSS3 Box Shadow**:阴影效果可以用来模拟雷达的立体感,通过调整`box-shadow`的偏移量、模糊半径和颜色,可以创建雷达波的投影效果。 8. **计时函数(Timing Functions)**:如`ease-in-out`,可以改变动画的...

    HTML5 CSS3 gradient、box-shadow按钮特效代码大全.rar

    HTML5 CSS3使用 gradient、box-shadow实现的按钮特效代码大全,带阴影的按钮,个个都很漂亮的CSS3按钮,你借助这些按钮效果,也可进一步学习下gradient、box-shadow的具体用法,对提高CSS3的编程水平有帮助。

    H5 css3 box-shadow鼠标悬停按钮动画特效.zip

     简单的悬停效果基于 <code>box-shadow</code></h1>  <button class="fill">Fill In  <button class="pulse">Pulse ... 一款用box-shadow属性制作多种按钮悬停动画效果,css3鼠标悬停按钮动画特效下载。

    CSS3中border-radius、box-shadow与gradient那点事儿

    在CSS3中,border-radius、box-shadow和gradient是三个非常重要的样式属性,它们极大地提升了网页设计的美观性和表现力。让我们逐一深入探讨这三个概念。 首先,`border-radius`属性允许我们为元素的边框添加圆角,...

    css实现shadow窗口

    在CSS中,我们可以使用`box-shadow`属性来为元素添加阴影。这个属性接受多个参数,包括水平偏移、垂直偏移、模糊半径、阴影颜色以及可选的扩展半径。下面是一个基本的`box-shadow`语法示例: ```css element { box...

    qt 之模拟jquery-mobile控件的box-shadow效果

    由于qss不支持css3的box-shadow效果,故而该工程中,采用类似android九点图的方式,把背景图截为9分,即4角4边一中心,并把4角4边重绘于待修饰的控件的边缘,从而模拟了box-shadow效果。

    纯css蒙娜丽莎的微笑

    本项目“纯css蒙娜丽莎的微笑”是一个令人惊叹的实例,展示了CSS3的强大潜力,尤其是其盒阴影(box-shadow)属性的应用。这个作品完全通过CSS代码绘制了5000多个点,巧妙地组合成蒙娜丽莎那神秘的微笑,重现了文艺...

    tailwindcss-box-shadow:Tailwind CSS插件,可生成没有CSS变量的标准盒形阴影实用程序

    tailwindcss-box-shadow 一个完全生成您在theme配置中定义的shadow实用程序的插件,没有CSS变量。 但为什么? 我需要中的shadow实用程序,它们不依赖Tailwind CSS 2.x中的新CSS变量策略。... boxShadow : false ,

    IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)

    本篇将详细探讨如何实现IE浏览器对CSS3圆角`border-radius`以及`box-shadow`和`text-shadow`的支持。 首先,`border-radius`属性是CSS3引入的新特性,允许我们为元素的边框创建圆角,而非传统的直角。然而,IE8及...

    CSS3 box-shadow属性实例详解

    CSS3 –添加阴影(盒子阴影的使用) CSS3 – 给div或者文字添加阴影(盒子阴影、文本阴影的使用) CSS3定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本。...

    53种CSS3阴影效果box-shadows.css

    CSS3是Web设计领域的一个重要里程碑,它引入了许多新的特性,其中就包括了我们今天要讨论的`box-shadow`属性。`box-shadow`让我们能够为HTML元素添加各种复杂的阴影效果,使得网页设计更具立体感和深度。在"53种CSS3...

    css3折角box

    "css3折角box"是一个利用CSS3属性来实现这种效果的技术。以下是对这个主题的详细阐述: 1. **边框圆角(border-radius)** CSS3引入了`border-radius`属性,允许我们为元素的每个角落设置不同的圆角半径,从而创造...

    Photoshop投影与CSS中box-shadow的转换

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-...

    营造冬日氛围:用CSS `box-shadow` 为圣诞树添加阴影效果

    在实现阴影效果时,可以参考多种CSS技术,例如使用box-shadow属性来控制阴影的偏移、模糊和颜色,以及使用transition属性来实现平滑的动画效果。此外,还可以通过JavaScript定时器来实现更复杂的动画逻辑。通过这些...

    css3 box-shadow阴影(外阴影与外发光)图示讲解

    CSS3的`box-shadow`属性是一个非常强大的工具,用于给元素添加阴影效果,无论是外阴影还是内阴影。这个属性能够显著提升网页设计的视觉吸引力,同时保持代码的简洁性。以下是对`box-shadow`属性的详细说明: 1. **...

    Web-前端html+css从入门到精通 159. boxshadow盒子阴影.zip

    boxshadow盒子阴影”将深入讲解这个特性,帮助初学者快速掌握并灵活运用。 首先,我们需要了解"box-shadow"的基本语法。该属性接受几个参数,以逗号分隔,每个参数代表阴影的一个方面: 1. 水平偏移量...

Global site tag (gtag.js) - Google Analytics