• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • text-shadow

    版本:CSS3

    text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影,阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。

    /* offset-x | offset-y | blur-radius | color */
    text-shadow: 1px 1px 2px black; 
    
    /* color | offset-x | offset-y | blur-radius */
    text-shadow: #fc0 1px 0 10px; 
    
    /* offset-x | offset-y | color */
    text-shadow: 5px 5px #558abb;
    
    /* color | offset-x | offset-y */
    text-shadow: white 2px 5px;
    
    /* offset-x | offset-y
    /* Use defaults for color and blur-radius */
    text-shadow: 5px 10px;
    
    /* Global values */
    text-shadow: inherit;
    text-shadow: initial;
    text-shadow: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本,以及其他浏览器都支持text-shadow

    语法:

    text-shadow:h-shadowv-shadowblurcolor;
    • color:可选。可以在偏移量之前或之后指定。如果没有指定颜色,则使用UA(用户代理)自行选择的颜色。
    • offset-xoffset-y:必选。这些长度值指定阴影相对文字的偏移量。offset-x指定水平偏移量,若是负值则阴影位于文字左边。offset-y指定垂直偏移量,若是负值则阴影位于文字上面。如果两者均为0,则阴影位于文字正后方(如果设置了则会产生模糊效果)。可用单位请查看length
    • blur-radius:可选。这是length值。如果没有指定,则默认为0。值越大,模糊半径越大,阴影也就越大越淡(wider and lighter)。
    • 注释:text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

    说明:

    设置或检索对象中文本的文字是否有阴影及模糊效果。参阅box-shadow属性。

    • 可以设定多组效果,每组参数值以逗号分隔。
    • 对应的脚本特性为textShadow
    描述
    h-shadow必需。水平阴影的位置。允许负值。
    v-shadow必需。垂直阴影的位置。允许负值。
    blur可选。模糊的距离
    color可选。阴影的颜色。
    默认值none
    适用于所有元素
    继承性
    动画性
    计算值1个颜色加3个绝对长度

    实例

    <style>
    .demo{
     background: #666666;
     width: 440px;
     padding: 30px;
     font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;
     color: #fff;
     text-transform: uppercase;      
    }
    .demo .item{text-shadow:0 1px 0 red;}
    </style>
    <div class="demo">
    	<p class="item">TEXT-SHADOW</p>
    </div>
    

    TEXT-SHADOW

    <style>
    .demo 
    {
    
          background: #666666;
          width: 440px;
          padding: 30px;
          font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;
          color: #ccc;
      
    }
    .demo .item2{text-shadow:-1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;}
    
    </style>
    <div class="demo">
    	<p class="item2">TEXT-SHADOW</p>
    </div>
    

    TEXT-SHADOW

    上篇:text-underline-position

    下篇:content