咨询热线 ：
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://dzwzjz.com/article/jiejii.html

其他资讯

分享至：
关于我们
公司简介 发展历程
服务项目
高端网站建设 小程序开发 APP开发 网络营销
建站知识
行业新闻 建站学堂 常见问题
联系我们
公司地址 人才招聘
成都 达州
电话：028-86922220
地址：成都市太升南路288号锦天国际A幢1002号
电话：028-86922220
地址：达州市南岸区弹子石腾龙大道58号2栋21-6
友情链接： 小谭建站   高端定制网站设计   专业LED亮化工程   成都电商解决方案   内江智速网站建设   户外广告设计   成都企业网站定制   成都响应式网站建设公司   达州网站设计   光彩外墙景观   
版权所有：青羊区大橙子信息咨询工作室 蜀ICP备2022028542号-14
在线咨询
服务热线
服务热线：028-86922220
TOP