text-shadow的用法详解

1.兼容性：text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。

2.text-shadow：5px 5px 5px #fff;

　　　　　　x轴（可正可负） y轴（可正可负）模糊距离（正值）阴影颜色

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

　　阴影的颜色是可选的，如果颜色没填，就使用从父级继承的颜色。然而，在不同的浏览器下可能会有所不同。

效果一：外发光

html：

<div class="text1">
    <span class="son son1">1.外发光</span> <br /> text-shadow:0 0 20px #f00;
</div>

CSS：

.text1{
     font-family: helvetica;
    padding:50px 0px;
    color:#00f;text-align:center;
    background:#000;
    }
.son{
        font-size: 120px;
        color:#000;
        font-weight: bold;
    }
    .son1{
    /*外发光        */
        text-shadow:0 0 20px #f00;
    }

效果：

效果二：辉光

CSS：

.son2{
		/*辉光效果*/
		text-shadow:0 0 20px #fff,0 0 40px #ca8eff,0 0 60px #6f00d2;

	}

效果三：投影

.son3{
        /*投影*/
        text-shadow:0 2px 2px #999;
    }

效果四：浮雕

.son4{
        /*浮雕*/
        color:#eee;
        text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
    }

效果五：模糊

.son5{
        /*模糊xiaoguo*/
        color: transparent;
        text-shadow:0 0 8px #ffaad5;
    }

效果六：模糊加浮雕

    .son6{
        /*6.模糊加浮雕*/
        /*color:#ff95ca;*/
        color: transparent;
        text-shadow:0 0 8px #ffc1e0, -1px -1px 0 #eee, 1px -1px #666;
    }

效果七：影子

.son7{
        /*7.影子*/
        color:#9d9d9d;
          text-shadow: 1px 1px 0 #adadad;
    }

效果八：描边

.son8{
        /*8.描边*/
        text-shadow: 2px 2px 0 #9f4d95,-2px 2px 0 #9f4d95,2px -2px 0 #9f4d95,-2px -2px 0 #9f4d95;
    }

效果九：3D效果

.son9{
        /*9.3D效果上*/
         color: #fff;
          text-shadow: 2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8);
    }

效果十：3D效果

.son10{
        /*10.3D效果下*/
        color:#fff;
        text-shadow: -2px -2px #ddd,-3px -3px #ddd,-4px -4px #ddd,-5px -5px #ddd;
    }

效果十一：D效果

.son11{
        /*11.3D效果*/
          color: #eee;
          text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
        }

效果十二：文字补色

.son12{
         color: rgba(255, 179, 140,0.5);
          text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
    }

效果十三：火火火

.son13{
        /*火火*/
         text-shadow: 0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3, -2px -15px 11px #f80,
                        2px -25px 18px #f20;
    }

总结：代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上机练习</title>
<style type="text/css">
    .text1{
     font-family: helvetica;
    padding:50px 0px;
    color:#00f;text-align:center;
    background:#000;
    }
    .text2{
        background: #333;
    }
    .text3{
        background: #ccc;
    }
    .text4{
        background:#5b5b5b;
    }
    .son{
        font-size: 120px;
        color:#000;
        font-weight: bold;
    }
    .son1{
    /*外发光        */
        text-shadow:0 0 20px #f00;
    }
    .son2{
        /*辉光效果*/
        text-shadow:0 0 20px #fff,0 0 40px #ca8eff,0 0 60px #6f00d2;

    }
    .son3{
        /*投影*/
        text-shadow:0 2px 2px #999;
    }
    .son4{
        /*浮雕*/
        color:#eee;
        text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
    }
    .son5{
        /*模糊xiaoguo*/
        color: transparent;
        text-shadow:0 0 8px #ffaad5;
    }
    .son6{
        /*6.模糊加浮雕*/
        /*color:#ff95ca;*/
        color: transparent;
        text-shadow:0 0 8px #ffc1e0, -1px -1px 0 #eee, 1px -1px #666;
    }
    .son7{
        /*7.影子*/
        color:#9d9d9d;
          text-shadow: 1px 1px 0 #adadad;
    }
    .son8{
        /*8.描边*/
        text-shadow: 2px 2px 0 #9f4d95,-2px 2px 0 #9f4d95,2px -2px 0 #9f4d95,-2px -2px 0 #9f4d95;
    }
    .son9{
        /*9.3D效果上*/
         color: #fff;
          text-shadow: 2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8);
    }
    .son10{
        /*10.3D效果下*/
        color:#fff;
        text-shadow: -2px -2px #ddd,-3px -3px #ddd,-4px -4px #ddd,-5px -5px #ddd;
    }
    .son11{
        /*11.3D效果*/
          color: #eee;
          text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
        }
    .son12{
         color: rgba(255, 179, 140,0.5);
          text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
    }
    .son13{
        /*火火*/
         text-shadow: 0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3, -2px -15px 11px #f80,
                        2px -25px 18px #f20;
    }
</style>
</head>
<body>
<div class="text1">
    <span class="son son1">1.外发光</span> <br />text-shadow:0 0 20px #f00;
</div>
<div class="text1">
    <span class="son son2">2.辉光效果</span> <br />text-shadow:0 0 20px #fff,0 0 40px #ca8eff,0 0 60px #6f00d2;
</div>
<div class="text1 text2">
    <span class="son son3">3.投影</span> <br />text-shadow:0 2px 2px #333;
</div>
<div class="text1 text3">
    <span class="son son4">4.浮雕</span> <br />
    text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
</div>
<div class="text1">
    <span class="son son5">5.模糊xiaoguo</span> <br />text-shadow:0 0 8px #ffaad5;
<div class="text1 text3">
    <span class="son son6">6.模糊加浮雕</span> <br />text-shadow:0 0 8px #ffc1e0, -1px -1px 0 #eee, 1px -1px #666;
</div>
<div class="text1 text4">
    <span class="son son7">7.影子xiao</span> <br />text-shadow: 1px 1px 0 #adadad;
</div>
<div class="text1">
    <span class="son son8">8.描边XIAOS</span> <br />text-shadow: 2px 2px 0 #9f4d95,-2px 2px 0 #9f4d95,2px -2px 0 #9f4d95,-2px -2px 0 #9f4d95;
</div>
<div class="text1">
    <span class="son son9">9.3D效果上</span> <br /> text-shadow: 2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8);
</div>
<div class="text1">
    <span class="son son10">10.3D效果下</span> <br />text-shadow: -2px -2px #ddd,-3px -3px #ddd,-4px -4px #ddd,-5px -5px #ddd;
</div>
<div class="text1">
    <span class="son son11">11.3D效果</span> <br />  text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
</div>
<div class="text1">
    <span class="son son12">12.文字补色3D</span> <br />color: rgba(255, 179, 140,0.5);
          text-shadow: 3px 3px 0 rgba(180,255,0,0.5);
</div>
<div class="text1">
    <span class="son son13">13.text火火火</span>  <br />text-shadow: 0 0 4px white,
                      0 -5px 4px #ff3,
                      2px -10px 6px #fd3,
                       -2px -15px 11px #f80,
                        2px -25px 18px #f20;
</div>
</body>
</html>

时间： 2024-10-13 08:37:05

text-shadow的用法详解的相关文章

js的offsetParent属性用法详解

js的offsetParent属性用法详解:此属性是javascript中较为常用的属性,对于它的良好掌握也是非常有必要的,下面就通过代码实例介绍一下它的用法,希望能够给需要的朋友带来一定的帮助.一.基本介绍:此属性可以返回距离指定元素最近的采用定位(position属性值为fixed.relative或者absolute)父级元素,如果父级元素中没有采用定位的元素,则返回body对象的引用.语法结构: obj.offsetParent 二.代码实例: <!DOCTYPE html> <

C# ListView用法详解

一.ListView类 1.常用的基本属性: (1)FullRowSelect:设置是否行选择模式.(默认为false) 提示:只有在Details视图该属性才有意义. (2) GridLines:设置行和列之间是否显示网格线.(默认为false)提示:只有在Details视图该属性才有意义. (3)AllowColumnReorder:设置是否可拖动列标头来对改变列的顺序.(默认为false)提示:只有在Details视图该属性才有意义. (4)View:获取或设置项在控件中的显示方式,包括D

offsetleft属性用法详解

offsetleft属性用法详解:本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一下参考.此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的.(1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离.(2).如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离.语法结构: obj.offsetleft 特别说明:此属性是只读的,不能够赋值.代码实例: <!DOCTYPE html> <html&

window.onload用法详解

window.onload用法详解: 网页中的javascript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的低端,这样在运行脚本代码的时候,可以确保要操作的对象已经加载完成. 二.通过window.onload来执行脚本代码. 第一种方式感觉比较凌乱(其实推荐使用),往往我们需要将脚本代码放在一个更为合适的地方,那么window.onload方式就是一个更好的选择.window.onloa

Extjs Window用法详解

今天我们来介绍一下Extjs中一个常用的控件Window.Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid.form等控件,从而来实现更加复杂的界面逻辑. 创建Extjs Window 创建Extjs Window的代码如下: //创建window var win = Ext.create("Ext.window.Window", { id: "myWin", title: "示例窗口", width: 500

深入PHP EOF(heredoc)用法详解

介绍下使用EOF heredoc方式,输出长段内容的方法, <?php $name = '姓名'; print <<<EOT <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>heredoc用法详解_www.cnblogs.com</title> &l

AFNetwork 作用和用法详解

AFNetworking是一个轻量级的iOS网络通信类库.它建立在NSURLConnection和NSOperation等类库的基础上,让很多网络通信功能的实现变得十分简单.它支持HTTP请求和基于REST的网络服务(包括GET.POST. PUT.DELETE等).支持ARC. Github地址:https://github.com/AFNetworking/AFNetworking // // MJViewController.m // 03.AFN演练 // // Created by a

linux wget 命令用法详解(附实例说明)

Linux wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,尤其对于网络管理员,经常要下载一些软件或从远程服务器恢复备份到本地服务器.如果我们使用虚拟主机,处理这样的事务我们只能先从远程服务器下载到我们电脑磁盘,然后再用ftp工具上传到服务器.这样既浪费时间又浪费精力,那不没办法的事.而到了Linux VPS,它则可以直接下载到服务器而不用经过上传这一步.wget工具体积小但功能完善,它支持断点下载功能,同时支持FTP和HTTP下载方式,支持代理服务器和设置起来

setAttribute()函数的用法详解

setAttribute()函数的用法详解:在动态创建元素设置元素的属性的时候setAttribute()函数用处很大,它可以动态的设置元素的属性,下面介绍一下它的用法.语法结构: setAttribute(name, value) 1).name表示要设置的属性.2).value表示属性值.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam

setInterval()函数用法详解

setInterval()函数用法详解:此函数用途相当广泛,在滚动代码或者焦点图片等等效果中都有应用,下面就通过实例简单介绍一下此函数的用法.setInterval()函数可以规定在按照指定的周期来执行一段函数,也就是说每隔一定事件就开始执行一次指定的函数.语法如下: setInterval(code,interval) 此函数具有两个参数,第一个参数规定要执行的函数,第二个参数规定函数两次执行之间的间隔,单位是毫秒(1秒=1000毫秒).代码实例如下: <!DOCTYPE HTML> <