• 技术文章 >web前端 >css教程

    CSS3的text-shadow字体阴影怎么使用

    php中世界最好的语言php中世界最好的语言2017-11-24 09:27:30原创1004
    CSS3的text-shadow样式是设置文阴影效果,原本在CSS2中就有这个属性,在CSS3中的文字阴影再次贝应用,那么我们就来看一下需要如何使用text-shadow。

    CSS3单词:

    text-shadow

    语法结构

    div{text-shadow:5px 2px 6px #000;}

    设置div盒子里文字阴影效果距离左5px和距离上2px开始显示阴影效果,同时阴影大小范围为6px,阴影颜色为黑色(#000)。

    文字显示阴影效果共4个值,第一个代表距离左多少距离开始显示阴影效果,第二个值代表距离上多少距离开始显示阴影效果,第三个值代表阴影范围大小,第四个值为阴影效果颜色。

    案例HTML代码

    <!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>字体阴影 在线演示</title> 
    <link href="images/style.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
    <div>我阴影文字</div> 
    <div class="txt">文字阴影测试内容1</div> 
    <div class="txt2">文字阴影测试内容2</div> 
    </body> 
    </html>

    对应CSS代码:

    .txt {text-shadow:5px 1px 6px #F93 }  
    .txt2 {text-shadow:1px 1px 1px #000; padding:10px 0; color:#FFF; background:#CCC}

    以上就是CSS3的text-shadow使用方法,更多精彩请关注php中文网其它相关文章!

    相关阅读:

    怎样隐藏溢出DIV的内容

    CSS布局有哪些技巧

    CSS里字体样式怎么设置

    以上就是CSS3的text-shadow字体阴影怎么使用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:text-shadow CSS3 样式表
    上一篇:CSS3的box-shadow怎么使用 下一篇:属性选择器和伪类选择器的使用方法
    大前端线上培训班

    相关文章推荐

    • 浅析Scss基础语法和导入SASS文件的方法• normalize和css reset分别是什么文件?又有什么区别?• CSS+JS实现爱心点赞按钮(代码示例)• 聊聊css为什么需要模块化?怎么进行模块化?• css调用方法是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网