手把手教你使用CSS3为文本和元素实现添加阴影效果

Python进阶者 等级 920 0 0

使用CSS3,你可以为文本和元素添加阴影。

一、浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

数字后面的 -webkit- 或者 -moz- 使用时需要指定前缀。

属性 Chrome Firefox Safari Opera IE
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0 4.0 -webkit- 9.0 4.0 3.5 -moz- 5.1 3.1 -webkit- 10.5

二、CSS3 阴影的文字特效

CSS代码:

<!DOCTYPE CSS>
<CSS lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
</head>
<body>
  <h1>文本阴影效果!</h1>

  <p><b>注意:</b> IE9和更早的版本, 不支持text-shadow属性.</p>
</body>
</CSS>

CSS3 文本阴影

CSS3 text-shadow 属性应用阴影到文本上.

在简单的用法, 你可以在水平方向设置阴影(2px)和垂直方向设置阴影(2px):

h1 {
    text-shadow: 2px 2px;
}

手把手教你使用CSS3为文本和元素实现添加阴影效果

添加一个颜色到阴影:

h1 {
    text-shadow: 2px 2px red;
}

手把手教你使用CSS3为文本和元素实现添加阴影效果

显示一个带有黑色阴影的白色文本:

h1 {
        color: white;
        text-shadow: 2px 2px 4px #000000;
    }

手把手教你使用CSS3为文本和元素实现添加阴影效果

下面的例子显示了红色霓虹灯的阴影:

 h1 {
        text-shadow: 0 0 3px #FF0000;
    }

手把手教你使用CSS3为文本和元素实现添加阴影效果


多重阴影

要在文本中添加多个阴影,可以添加逗号分隔的阴影列表。

下面的实例显示了一个红色和蓝色的霓虹灯阴影:

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #F00000;
}

手把手教你使用CSS3为文本和元素实现添加阴影效果

下面实例显示了一个白色文本带有黑色,蓝色和深蓝色阴影:

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

手把手教你使用CSS3为文本和元素实现添加阴影效果


三、box-shadow 属性

CSS3 box-shadow 属性应用阴影到元素上.

在最简单的用法中,只指定水平阴影和垂直阴影:

一个黄色的

元素使用一个黑色box-shadow

div {
        width: 300px;
        height: 100px;
        padding: 15px;
        background-color: yellow;
        box-shadow: 10px 10px;
    }

手把手教你使用CSS3为文本和元素实现添加阴影效果

下一步,添加一个颜色到阴影,对阴影添加模糊效果:

一个黄色的

元素带模糊红/灰 box-shadow。

div {
        width: 300px;
        height: 100px;
        padding: 15px;
        background-color: yellow;
        box-shadow: 10px 10px 5px grey;
    }

手把手教你使用CSS3为文本和元素实现添加阴影效果

案例

添加阴影到 ::before 和 ::after 伪类中, 来创建一个有趣的效果。

<!DOCTYPE CSS>
<CSS lang="en">
<head>
  <meta charset="UTF-8">
  <title>项目</title>
  <style>
  #boxshadow {
      position: relative;
      -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
      -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
      box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
      padding: 10px;
      background: white;
  }

  /* Make the image fit the box */
  #boxshadow img {
      width: 100%;
      border: 1px solid #8a4419;
      border-style: inset;
  }

  #boxshadow::after {
      content: '';
      position: absolute;
      z-index: -1; /* hide shadow behind image */
      -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
      box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
      width: 70%;
      left: 15%; /* one half of the remaining 30% */
      height: 100px;
      bottom: 0;CSS
  }
</style>
</head>
<body>
  <div id="boxshadow">
    <img src="img/fy_indexBg.jpg" alt="Norway" width="600" height="400">
  </div>
</body>
</CSS>

手把手教你使用CSS3为文本和元素实现添加阴影效果

四、总结

本文基于CSS基础,使用CSS语言。介绍了有关CSS阴影效果的应用,从基础的文本阴影入手, 对CSS常见的阴影表示效果都做了一一的讲解。通过一个个实例的演示,实例运行的效果图。希望能够帮助你更好的学习CSS。

想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/

收藏
评论区

相关推荐

用css3实现惊艳面试官的背景即背景动画(高级附源码
我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。这篇文章参考《css揭秘》这本书,并作出了自己的总结,希望能让大家更有收获,也强烈推荐大家看看这本书,你值得拥有
css3实战汇总(附源码)
本文是继上一篇文章用css3实现惊艳面试官的背景即背景动画(高级附源码)(https://juejin.im/post/6844903950123188237)的续篇也是本人最后一篇介绍css3技巧的文章,因为css这块知识难点不是很多,更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结,另一
《前端实战总结》之使用CSS3实现酷炫的3D旋转透视
3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感。所以说,为了让自己更加优秀,css3 3D动画必不可少。 你将学到 CSS3 3D 转换的常用API介绍 CSS3 3D 应用场景 CSS3 3D 实现一个立方体 开始 1.CSS
轻松教你使用纯css实现水波动画
css3给我们前端开发带来了很便利, 我们可以使用css3 的新特新实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5Dooring编辑器(https://github.com/MrXujiang/h5Dooring) 中的水波动画. (https://imghelloworld.osscnbeijing.aliy
轻松教你使用纯css实现H5-Doorin编辑器中的水波动画
css3给我们前端开发带来了很便利, 我们可以使用css3 的新特性实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5Dooring编辑器(https://github.com/MrXujiang/h5Dooring) 中的水波动画. (https://imghelloworld.osscnbeijing.aliy
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
CSS3 RGBA
**CSS3 中的rgba中不仅仅让我们像通常一样设置RGB颜色,而且还可以设置其透明度。** **RGBA像RGB一样设置颜色,而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。就像opacity声明一样,一个opacity值为1的元素是完全不透明的,而一个opacity为0的元素是完全透明的。** **浏览器兼容性** **RG
CSS3 文本效果
CSS3 文本效果 --------- CSS3中包含几个新的文本特征。 在本章中您将了解以下文本属性: * text-shadow * word-wrap * * * 浏览器支持 ----- ![](http://static.oschina.net/uploads/space/2016/0123/124344_Ps
CSS3动画(转自大神制作,很绚丽,纯CSS之作)
绚丽的3D动画(纯CSS实现,代码有点长啊,在这里不知道怎么折叠起来,讲究看看吧) 效果图:[https://bupt-hjm.github.io/css3-3d/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fbupt-hjm.github.io%2Fcss3-3d%2F)(转)
CSS3实现各种表情
 CSS3实现各种表情  效果图:  ![](https://oscimg.oschina.net/oscnet/3e7c1e03814ab2c1df6e3058e39715c9936.jpg)  代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></title
CSS扩展语言
CSS没有变量?不要诬蔑我们大CSS好不?就像ES一样,你说JS没有模块,ES6给你整一个出来,而在这之前就已经有相关的库出来了。CSS也一样,你说CSS没有变量,CSS3就给你一个var(),变量你值得拥有! // 语法 // <custom-preperty-name> 自定义属性名 // <declaration-value>
H5实现APP和原生方式有多大差距,多少坑?JS才是王道!
纯H5的APP,虽然开发起来要比纯原生开发畅快的多,但最终效果和性能还是和原生比起来还是有很多问题,主要聚集在以下几个方面: 1、动画 动画有很多种,比如侧边栏菜单的滑入滑出、元素的响应动画、页面切换之间的过场等等,在H5之下的众多实现方法都没有办法达到纯原生的性能。一般有这几种不同的选择:css3动画,javascript动画,原生动画。 cs
2016.07 第2周 群问题分享
![](https://oscimg.oschina.net/oscnet/d26128fec4f1a6ac6a9bebb574017bc764c.jpg) **HTML+CSS** ### 移动端中1px的边框如何实现 ![](https://oscimg.oschina.net/oscnet/502ef7f5ea07f51fee8ffef1ffc
CSS预编译器:Sass(入门),更快的前端开发
Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。 SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览
iPhoneX 底部黑线布局适配
在页面的meta标签中添加 viewportfitcover 属性 viewportfitcover 页面内容填充整个屏幕 在css样式中 添加样式@supports (bottom: constant(safeareainsetbottom)) or (bottom: env(safeareainsetbottom)) footer