CSS3 text shadow字体阴影效果

时间:2021-05-08

最近在整理学习CSS3的一些小知识,现在已经整理了CSS3选择器,CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的文字阴影——text-shadow的使用方法。希望能对大家有所帮助吧。
一、text-shadow语法
1、语法:
对象选择器 {text-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色}
注:text-shadow可以使用一个或多个投影,如果使用多个投影时必须需要用逗号“,”分开。
2、取值:
box-shadow属性最多可以有6个参数设置,他们分别取值:
(1) 阴影水平偏移量 :是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边;
(2) 阴影的垂直偏移量 :是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部;
(3) 阴影模糊半径 :此参数是可选,但其值只能是为正值。如果值越大,阴影越模糊,反之阴影越清晰。如果其值为0时,表示阴影不具有模糊效果。
(4) 阴影颜色 :此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。
在CSS3没有问世之前,处理文字阴影的方法,基本上都是图片。直到CSS3的出现,让我们制作文字阴影的方法又有了进一步的提高。其实文字阴影——text-shadow在CSS2里面出现过,但是在CSS2.0又没无情的抛弃了,现在CSS3中又让使用了,这说明文字阴影——text-shadow还是值得咱们重视的。所以作为一名合格的前端人员,掌握文字阴影那必须是当务之急了。
CSS3设置文字阴影效果对文字字体设置阴影效果篇text-shadow样式,本来在CSS2版本中也有此属性,但在CSS3中文字阴影text-shadow再次被应用,丰富文字排版布局美化效果。
CSS3单词与语法
CSS3单词: text-shadow
语法结构:text-shadow: 5px 2px 6px black;
5px 代表着:阴影距离文字左5px显示
2px 代表着:阴影距离文字上2px显示
6px 代表着:阴影大小范围
black 代表着:阴影颜色为黑色
例子:
CSS Code复制内容到剪贴板

  • <!DOCTYPEhtml>
  • <html>
  • <head>
  • <metacharset="utf-8">
  • <title></title>
  • <styletype="text/css">
  • .All-orange{
  • font:normal14px微软雅黑,sans-serif;
  • max-width:auto;
  • max-height:auto;
  • background-color:#f8f8f8;
  • padding:30px30px20px30px;
  • color:#666;
  • border-radius:5px
  • }
  • .All-orangeh1{
  • font:normal32px微软雅黑,sans-serif;
  • padding:20px020px40px;
  • display:block;
  • margin:-30px-30px10px-30px;
  • color:#FFF;
  • background-color:#0CF;
  • border-radius:5px;
  • text-shadow:5px2px6px#000;
  • box-shadow:5px2px6px#000;
  • }
  • .All-orangeimg{
  • float:left
  • }
  • .All-orangeh1img{
  • margin-top:-15px;
  • }
  • </style>
  • </head>
  • <body>
  • <divclass="All-orange"id="all">
  • <h1><imgsrc="../img/launcher_icon_.png"/>
  • 悲伤黑白棋
  • </h1>
  • </div>
  • </body>
  • </html>
  • 效果图:


    浏览器兼容

    此属性为CSS3样式IE9以上版本浏览器支持、谷歌浏览器支持。


    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章