CSS3利用text-shadow属性实现多种效果的文字样式展现方法


Posted in HTML / CSS onAugust 25, 2016

一、效过图展示:

CSS3利用text-shadow属性实现多种效果的文字样式展现方法

已经是比较久之前学习的文字效果了。但是还是很实用很有趣的。利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片。到目前为止Safari、FireFox、Chrome和Opera等主流浏览器都支持该功能。

二、介绍CSS3的 text-shadow属性

text-shadow属性可以给页面上的文字添加阴影效果,基本语法如下:

text-shadow:none|<length>none|[<shadow>,]*<shadow>

text-shadow:none|<color>[,<color>]*

text-shadow属性的初始值为无,适用于所有元素。

color:表示颜色

length:表示由浮点数字和单位标识符组成的长度值,可以为负值,指定阴影的水平延伸距离。

上面的基本语法如果不理解的,请看下面这个例子

XML/HTML Code复制内容到剪贴板
  1. <style type="text/css">  
  2.     p{   
  3.         text-shadow:0.1em 0.1em 0.3em #333333;   
  4.     }   
  5. </style>  

text-shadow属性的第一个值表示水平位移,第二个值表示垂直位移,正值为偏右或偏下,负值为偏左或偏上,第三个值表示模糊半径(该值可选),第四个值表示阴影的颜色(该值可选),这个颜色值可以放在阴影效果的长度值值之前或之后。如果没有指定颜色,那么将使用color属性值来替代。

text-shadow属性可以接受一个以逗号分割的阴影效果列表,并应用到该元素的文本上。阴影效果按照给定的顺序应用,因此有可能出现互相覆盖,但是不会覆盖文本本身。阴影效果不会改变边框的尺寸,但可能延伸到它的边界值外。(你可以尝试把本例中p标签的padding样式删去,就会发现火焰效果文字的阴影超出了边界)。

三、文字阴影效果代码如下

主要利用就是text-shadow的阴影列表,加上使用合理的颜色搭配,就可以达到我们期望的效果了。

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2.         p{   
  3.             font-size:5em;   
  4.             margin:5px;   
  5.             padding:20px;   
  6.             displayinline-block;   
  7.         }   
  8.         .p1{   
  9.             text-shadow: 0.2em 0.5em 0.1em #600,-0.3em 0.1em 0.1em #060,0.4em -0.3em 0.1em #006;   
  10.             color:red;   
  11.         }   
  12.         .p2{   
  13.             background:black;   
  14.             text-align:left;   
  15.             text-shadow: 0 -5px 4px #FF3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;   
  16.             color:red;   
  17.         }   
  18.         .p3{   
  19.             text-shadow: -1px -1px white,1px 1px #333;   
  20.             color:#D1D1D1;   
  21.             font-weightbold;   
  22.             background#CCC;   
  23.         }   
  24.         .p4{   
  25.             text-shadow1px 1px white,-1px -1px #333;   
  26.             color:#D1D1D1;   
  27.             font-weightbold;   
  28.             background#CCC;   
  29.         }   
  30.         .p5{   
  31.             text-shadow: -1px 0 black,0 1px black,1px 0 black,0 -1px black;   
  32.             color:#ffffff;   
  33.             background#CCC;   
  34.         }   
  35.         .p6{   
  36.             text-shadow: 0 0 0.2em #F87,0 0 0.2em #f87;   
  37.             color:#d1d1d1;   
  38.             background#CCC;   
  39.         }   
  40.     </style>  
XML/HTML Code复制内容到剪贴板
  1. <p class="p1">多色阴影效果</p>  
  2. <p class="p2">火焰效果</p>  
  3. <p class="p3">立体凸起效果</p>  
  4. <p class="p4">立体凹下效果</p>  
  5. <p class="p5">描边效果</p>  
  6. <p class="p6">外发光效果</p>  

合理使用text-shadow属性帮助我们实现一些较简单的特殊文字效果,可以省去页面加载部分繁复的静态图片资源。

以上这篇CSS3利用text-shadow属性实现多种效果的文字样式展现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
使用CSS实现阅读进度条
Feb 27 HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 #HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 #HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 #HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 #HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 #HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 #HTML / CSS
css3的过滤效果简单实例
Aug 03 #HTML / CSS
You might like
用libtemplate实现静态网页生成
2006/10/09 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python语法快速入门指南
2015/10/12 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
Python的信号库Blinker用法详解
2020/12/31 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
幼儿园校车司机的岗位职责
2014/01/30 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
批评与自我批评范文
2014/10/15 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
辩护意见书
2015/06/04 职场文书
中学音乐课教学反思
2016/02/18 职场文书
《植树问题》教学反思
2016/03/03 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python