咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

常见问题

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS中怎么使用text-shadow实现文字阴影效果

这篇文章给大家介绍CSS中怎么使用text-shadow实现文字阴影效果，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

汾阳网站建设公司创新互联,汾阳网站设计制作，有大型网站制作公司丰富经验。已为汾阳上千提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱，请找那个售后服务好的汾阳做网站的公司定做！

text-shadow

语法

  1. text-shadow
: h-shadow v-shadow blur 
color
;

实例

基础的文本阴影效果：

  2. {   
    text-shadow: 5px 5px 5px #FF0000;   
}

Eg:

  1. {
text-shadow
: h-shadow v-shadow blur 
color
;}

附：E即Element，元素的意思。

兼容IE的写法：

滤镜语法：

  Eg:  

  1. {filter:shadow(Color=颜色值,Direction=数值,Strength=数值)}

Direction用于设定投影的主向，取值为0即零度（表示向上方向），45为右上，90为右，135为右下，180为下方，225为左下方，270为左方，315为左上方；Strength就是强度，类似于text-shadow中的blur值。

text-shadow的实例
 CSS代码：

.demo {   
  background: #666666;   
  width: 224px;   
  padding: 30px;   
  font: bold 55px/100% "Lucida Sans";   
  color: #fff;   
  text-transform: uppercase;   
  text-shadow: red 0 2px 0;   
}

HTML代码：

  1. 梦龙小站


预览效果：
CSS中怎么使用text-shadow实现文字阴影效果

例子2——改变阴影模糊半径

CSS代码：

CSS Code复制内容到剪贴板

  1. .demo {   

  2.   background: #666666;   

  3.   width: 224px;   

  4.   padding: 30px;   

  5.   font: bold 55px/100% "Lucida Sans";   

  6.   color: #fff;   

  7.   text-transform: uppercase;   

  8.   text-shadow: 0 0 20px red;   

  9. }  


HTML代码：

XML/HTML Code复制内容到剪贴板

  1. 梦龙小站

  


预览效果：
CSS中怎么使用text-shadow实现文字阴影效果

例子3——辉光效果

CSS代码：

CSS Code复制内容到剪贴板

  1. .demo {   

  2.   background: #666666;   

  3.   width: 224px;   

  4.   padding: 30px;   

  5.   font: bold 55px/100% "Lucida Sans";   

  6.   color: #fff;   

  7.   text-transform: uppercase;   

  8.   text-shadow:0 0 5px #fff,    

  9.         0 0 10px #fff,    

  10.         0 0 15px #fff,    

  11.         0 0 40px #ff00de,    

  12.         0 0 70px #ff00de;   

  13. }  


HTML代码：

XML/HTML Code复制内容到剪贴板

  1. 梦龙小站

  


预览效果：
CSS中怎么使用text-shadow实现文字阴影效果

例子4——浮雕效果

CSS代码：

CSS Code复制内容到剪贴板

  1. .demo {   

  2.   background: #666666;   

  3.   width: 224px;   

  4.   padding: 30px;   

  5.   font: bold 55px/100% "Lucida Sans";   

  6.   color: #ccc;   

  7.   text-transform: uppercase;   

  8.   text-shadow: 0 1px 1px red;   

  9. }  


HTML代码：


预览效果：
CSS中怎么使用text-shadow实现文字阴影效果

例子5——模糊效果

CSS代码：

CSS Code复制内容到剪贴板

  1. .demo {   

  2.   background: #666666;   

  3.   width: 224px;   

  4.   padding: 30px;   

  5.   font: bold 55px/100% "Lucida Sans";   

  6.   text-transform: uppercase;   

  7.   color: transparent;   

  8.   text-shadow: 0 0 5px #fff;   

  9. }  


HTML代码：

XML/HTML Code复制内容到剪贴板

  1. 梦龙小站  


预览效果：
CSS中怎么使用text-shadow实现文字阴影效果

例子6——模糊的浮雕效果

CSS代码：

CSS Code复制内容到剪贴板

  1. .demo {   

  2.   background: #666666;   

  3.   width: 224px;   

  4.   padding: 30px;   

  5.   font: bold 55px/100% "Lucida Sans";   

  6.   text-transform: uppercase;   

  7.   color: transparent;   

  8.   text-shadow:0 0 6px blue,    

  9.         -1px -1px  #FFF,    

  10.         1px -1px  #444;   

  11. }  


HTML代码：

XML/HTML Code复制内容到剪贴板

  1. 梦龙小站  


预览效果：
CSS中怎么使用text-shadow实现文字阴影效果

例子7——文本的影子效果

这种效果需要注意：文字的前景色要比背景色暗，阴影颜色稍比背景色亮一点点，如果阴影色太亮看起来会怪，如果太暗将没有效果显示。

CSS代码：

CSS Code复制内容到剪贴板

  1. .demo {   

  2.   width: 224px;   

  3.   padding: 30px;   

  4.   font: bold 55px/100% "Lucida Sans";   

  5.   text-transform: uppercase;   

  6.   color: #566F89;   

  7.   background: #C5DFF8;   

  8.   text-shadow: 1px 1px 0 #E4F1FF;   

  9. }  


HTML代码：

XML/HTML Code复制内容到剪贴板

  1. 梦龙小站  


预览效果：
CSS中怎么使用text-shadow实现文字阴影效果

例子8——环绕阴影效果

CSS代码：

CSS Code复制内容到剪贴板

  1. .demo {   

  2.   background: #ccc;   

  3.   width: 224px;   

  4.   padding: 30px;   

  5.   font: bold 55px/100% "Lucida Sans";   

  6.   text-transform: uppercase;   

  7.   color: #fff;   

  8.   text-shadow: 1px 1px 0 #f96,   

  9.                      -1px -1px 0 #f96;    

  10. }  


HTML代码：

XML/HTML Code复制内容到剪贴板

  1. 梦龙小站  


预览效果：
CSS中怎么使用text-shadow实现文字阴影效果

例子9——3D效果

CSS代码：

CSS Code复制内容到剪贴板

  1. .demo {   

  2.   background: #ccc;   

  3.   width: 224px;   

  4.   padding: 30px;   

  5.   font: bold 55px/100% "Lucida Sans";   

  6.   text-transform: uppercase;   

  7.   color: #fff;   

  8.   text-shadow:1px 1px #d7e8f9,   

  9.         2px 2px #d7e8f9,   

  10.         3px 3px #d7e8f9,   

  11.         4px 4px #d7e8f9,   

  12.         5px 5px #d7e8f9,   

  13.         6px 6px #d7e8f9;    

  14. }  


HTML代码：

XML/HTML Code复制内容到剪贴板

  1. 梦龙小站  


预览效果：
CSS中怎么使用text-shadow实现文字阴影效果

例子10——复古的文字效果

CSS代码：

CSS Code复制内容到剪贴板

  1. .demo {   

  2.   background: #ccc;   

  3.   width: 224px;   

  4.   padding: 30px;   

  5.   font: bold 55px/100% "Lucida Sans";   

  6.   text-transform: uppercase;   

  7.   color: #eee;   

  8.   text-shadow:3px 3px 0 #ccc,    

  9.         5px 5px 0 #eee;   

  10. }  


HTML代码：

XML/HTML Code复制内容到剪贴板

  1. 梦龙小站  


预览效果：
CSS中怎么使用text-shadow实现文字阴影效果

例子11——文字阴影IE版

CSS代码：

CSS Code复制内容到剪贴板

  1. div {filter:shadow(Color=#000000,Direction=45,Strength=5);   

  2. font:40px/60px "宋体";height:60px;}  


HTML代码：

XML/HTML Code复制内容到剪贴板

  1. 梦龙小站
      


预览效果：
CSS中怎么使用text-shadow实现文字阴影效果

关于CSS中怎么使用text-shadow实现文字阴影效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


网站名称：CSS中怎么使用text-shadow实现文字阴影效果
当前路径：http://cqcxhl.com/article/jiejii.html

其他资讯

分享至：
关于我们
公司简介 发展历程
服务项目
高端网站建设 小程序开发 APP开发 网络营销
建站知识
网站建设 网站设计 网站制作 小程序
联系我们
公司地址 人才招聘
成都 重庆
电话：028-86922220
地址：成都市太升南路288号锦天国际A幢1002号
电话：028-86922220
地址：重庆市南岸区弹子石腾龙大道58号2栋21-6
版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4
在线咨询
服务热线
服务热线：028-86922220
TOP