文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-03 12:37

关注

使用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代码:

  1.  
  2. "en"
  3.  
  4.   "UTF-8"
  5.   项目 
  6.  
  7.  
  8.    
  9.  
  10.   

    注意: IE9和更早的版本, 不支持text-shadow属性.

     
  11.  
  12.  

CSS3 文本阴影

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

 

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

  1. h1 { 
  2.     text-shadow: 2px 2px; 

添加一个颜色到阴影:

  1. h1 { 
  2.     text-shadow: 2px 2px red; 

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

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

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

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

多重阴影

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

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

  1. h1 { 
  2.     text-shadow: 0 0 3px #FF0000, 0 0 5px #F00000; 

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

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

三、box-shadow 属性

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

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

一个黄色的

 元素使用一个黑色box-shadow

  1. div { 
  2.         width: 300px; 
  3.         height: 100px; 
  4.         padding: 15px; 
  5.         background-color: yellow; 
  6.         box-shadow: 10px 10px; 
  7.     } 

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

一个黄色的

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

  1. div { 
  2.         width: 300px; 
  3.         height: 100px; 
  4.         padding: 15px; 
  5.         background-color: yellow; 
  6.         box-shadow: 10px 10px 5px grey; 
  7.     } 

案例

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

  1.  
  2. "en"
  3.  
  4.   "UTF-8"
  5.   项目 
  6.    
  7.  
  8.  
  9.   "boxshadow"
  10.     "img/fy_indexBg.jpg" alt="Norway" width="600" height="400"
  11.   
 
  •  
  •               
  • 四、总结

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

     本文转载自微信公众号「IT共享之家」,可以通过以下二维码关注。转载本文请联系IT共享之家公众号。

     

     

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 历年真题答案解析
    • 备考技巧名师总结
    • 高频考点精准押题
    • 资料下载
    • 历年真题
    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

      难度     813人已做
      查看
    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看
    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看
    • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

      难度     435人已做
      查看
    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容
    咦!没有更多了?去看看其它编程学习网 内容吧
    首页课程
    资料下载
    问答资讯