css3 text-shadow字体阴影讲解

2019-11-27 22:30:31 -0500

css3 text-shadow字体阴影讲解

css3 text-shadow字体阴影讲解

 text-shadow:为字体添加阴影, 可以通过对text-shadow属性设置相关的属性值,来实现现一些需要的字体阴影效果,减少了图片的使用。

  基础说明:     text-shadow: X轴  Y轴  Rpx  color;     属性说明(顺序依次对应): 阴影的X轴(可以使用负值)    阴影的Y轴(可以使用负值)    阴影模糊值(大小)    阴影的颜色     注(PS):此属性使用于文字阴影,而不是对盒模型进行操作   如果设置盒模型阴影请参考知识点:box-shadow(同理)

    IE下使用滤镜filter:shadow()     和box-shadow一样都是css3新增的属性,为了兼容各主流浏览器并支持这些主浏览器的较低版本,基于主流浏览器上使用text-shadow属性时,我们需要将属性的名称前面加上前缀 谷歌和苹果浏览器-webkit-text-shadow的形式。

                                                                                                                                            Firefox浏览器则需要写成-moz-text-shadow的形         欧朋浏览器  -o-text-shadow       IE>9  -ms-text-shadow   

  样例:

        -webkit-text-shadow:0 0 10px #c06;            -moz-text-shadow:0 0 10px #C06;                -o-text-shadow:0 0 10px #C06;                     text-shadow:0 0 10px #c06;         filter: Shadow(Color='green', Direction='135', Strength='6')/Color设置阴影颜色  Direction阴影的方向,取值为0即零度(表示向上方向),45为右上,90为右,135为右下,180为下方,225为左下方,270为左方,315为左上方;   Strength就是 范围,类似于text-shadow中的模糊半径值/        /  filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true');    /       

  基础练习:(借鉴字体形式展示)

  一、常见形式:

   

   <!--1、没有给其X轴与Y轴设置值 所在会在本身发生作用   模糊半径范围,颜色-->      

text-shadow

     

 

 <!--2、 X轴与Y轴改变了正值(正值 向右 向下) 所以变成了这样‍-->       

text-shadow2

     

 

  <!--3、 X轴与Y轴改变成了负值(负值 向左 向上) 所以变成了这样-->‍     

text-shadow3

        

 

注意,正值使阴影往右/下移动,负值往左/上移动

 <!--4、 IE浏览器下-->‍

    

text-shadow3

    

 

二、四个角()阴影:

     

    左上角: text-shadow:-4px -4px 1px green;

    左下角: text-shadow:-4px 4px 1px green;

    右上角: text-shadow:4px -4px 1px green;

    右下角: text-shadow:4px -4px 1px green;  

   

 

三、多阴影----加边例子(逗号隔开) 不明显:

   .kind1{ text-shadow: 0px 0px 2px green,                      0px 0px 3px blue,                      0px 0px 4px red;                        font-size:38px; color:yellow; }

 

 

四、自定义阴影-根据个人喜好所以制作

   1、类似于火焰

     

淡然

  

 

 2、3D

     

淡然

       .threeD{ color:#fff;  text-shadow: 0 0 1px #999,                                                       1px 1px 2px #888,                                                       2px 2px 2px #777,                                                       3px 3px 2px #666,                                                       4px 4px 2px #555,                                                       5px 5px 2px #333;            }

     

 

 3、等等多种(后期在新增)......

 

 百变不离其宗,练习就能熟悉,懂了就知道原理,随意改写,在配合css3的动画效果, 闪光层(字)都很简单实现。。希望对你有帮助。。

 

posted @ 2016-10-21 17:10 danran68 阅读(15028) 评论(0) 编辑 收藏 刷新评论刷新页面返回顶部 注册用户登录后才能发表评论,请 登录 或 注册, 访问 网站首页。 【推荐】腾讯云海外1核2G云服务器低至2折,半价续费券限量免费领取! 【推荐】阿里云双11返场来袭,热门产品低至一折等你来抢! 【推荐】超50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库 【推荐】天翼云双十一翼降到底,云主机11.11元起,抽奖送大礼 【推荐】流程自动化专家UiBot,体系化教程成就高薪RPA工程师 【优惠】七牛云采购嘉年华,云存储、CDN等云产品低至1折 昵称: danran68 园龄: 3年1个月 粉丝: 24 关注: 2 +加关注 < 2019年11月 > 日 一 二 三 四 五 六 27 28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 4 5 6 7 搜索     常用链接 我的随笔 我的评论 我的参与 最新评论 我的标签 更多链接 我的标签 js(5) css3(4) ajax(2) div+css(2) iframe单点(1) jquery(1) box-shadow阴影(1) dedecms数据库(1) text-shadow阴影(1) 表单验证(1) 更多 随笔档案 2018年7月(1) 2018年3月(1) 2018年2月(1) 2016年11月(3) 2016年10月(9) 最新评论

  1. Re:css实现左(右)侧固定宽度,右(左)侧宽度自适应 ---清除浮动 左边布局固定,右边自适应的布局方法3(个人喜好用):左右两边都用绝对定位absolute, 父级相对定义(不影响,建议加个相对定义,避免重叠) 右侧的 div 已经不是自适应的了。因为你加了 abso... --姜一
  2. Re:css实现左(右)侧固定宽度,右(左)侧宽度自适应 ---清除浮动 div不是默认占据一行吗,和写了width为100%有什么区别吗? --gnib 阅读排行榜
  3. css3 box-shadow阴影(外阴影与外发光)讲解(126992)
  4. Json对象和字符串互相转换 数据拼接 JSON使用方式(26261)
  5. js循环给li绑定事件实现 点击li弹出其索引值 和内容(18551)
  6. css3 text-shadow字体阴影讲解(15028)
  7. js实现弹窗居中(2399)
  8. 表单验证(验证手机号是否存在,验证码倒计时)(1981)
  9. css实现左(右)侧固定宽度,右(左)侧宽度自适应 ---清除浮动(1462)
  10. 织梦dedeCMS数据库结构字段说明-简略说明(783)
  11. 获取网页传递的参数(739)
  12. 日常用的css基础和自己常用的js封装(483) 评论排行榜
  13. css实现左(右)侧固定宽度,右(左)侧宽度自适应 ---清除浮动(2) 推荐排行榜
  14. css3 box-shadow阴影(外阴影与外发光)讲解(13)
  15. Json对象和字符串互相转换 数据拼接 JSON使用方式(2)
  16. 表单验证(验证手机号是否存在,验证码倒计时)(2)
  17. css实现左(右)侧固定宽度,右(左)侧宽度自适应 ---清除浮动(1)
  18. js循环给li绑定事件实现 点击li弹出其索引值 和内容(1)
«Newer      Older»
Comment:
Name:

Back to home

Subscribe | Register | Login | N