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

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

河西ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!

一、浏览器支持

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

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

属性 Chrome Firefox Safari Opera IE
text-shadow4.010.03.54.09.5
box-shadow10.0 4.0 -webkit-9.04.0 3.5 -moz-5.1 3.1 -webkit-10.5

二、CSS3 阴影的文字特效

CSS代码:

 
 
 
 
  1.  
  2.  
  3.  
  4.    
  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.  
  3.  
  4.    
  5.   项目 
  6.    
  7.  
  8.  
  9.    
  10.      
  11.   
 
  •  
  •               
  • 四、总结

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

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

    分享标题:手把手教你使用CSS3为文本和元素实现添加阴影效果
    网页地址:http://www.shufengxianlan.com/qtweb/news41/273291.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联