CSS3属性之text-shadow和box-shadow（立体效果的实现）

最新推荐文章于 2024-03-22 10:31:32 发布

千寻～

最新推荐文章于 2024-03-22 10:31:32 发布

阅读量3.8k

点赞数

分类专栏：前端相关知识文章标签： CSS3属性 text-shadow css样式

本文链接：https://blog.csdn.net/u011630575/article/details/49149411

版权

前端相关知识专栏收录该内容

32 篇文章 2 订阅

订阅专栏

语法：

text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

取值：

<color> ：

指定颜色。

<length> ：

由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。

<opacity> ：

由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全部设定为 0 。请参阅长度单位。

说明：

设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果，方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow

　　text-shadow是可以省略前缀的几个CSS属性之一，类似的还有box-shadow，

它必须应用于文本，并它们有相同的四个参数：

　　x-offset 　　水平位移

　　y-offest 　　垂直位移

　　blur 　　模糊值

　　color of shadow 阴影颜色

 
    h1  
    { 
    
 　　text-shadow 
    : 
     0 1px 0 #fff 
    ; 
     
 　　color 
    : 
     #292929 
    ; 
    
    }

下面看实例：

 
     
   
 
    <!DOCTYPE html>
 <html>
 <head>
 <title>text-shadow</title>
 <meta charset="utf-8" />
 <style>
 body  
    { 
    
 　　background-color 
    : 
    #666 
    ; 
     
  
    } 
    
 h1  
    { 
    
 　　text-shadow 
    : 
    0 1px 0 #fff 
    ; 
    
 　　color 
    : 
    #292929 
    ; 
    
 　　font 
    : 
    bold 90px/100% Arial 
    ; 
    
 　　padding 
    : 
    50px 
    ; 
    
  
    } 
    
 </style>
 </head>
 <body>
 
 <h1>Hello,World!</h1>
 
 </body>
 </html> 
   
 
     
   

运行效果（Chrome）：

下面用text-shadow实现空心字效果:

 
    h1  
    { 
    
 　　text-shadow 
    : 
    0 1px #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000 
    ; 
    
 　　color 
    : 
    #fff 
    ; 
    
 　　font 
    : 
    bold 90px/100% Arial 
    ; 
    
  
    } 
   

运行效果（Chrome）：

--------------------------------------------------------------------------------------------------------------------------------

实例

向 div 元素添加 box-shadow：

div
{
box-shadow: 10px 10px 5px #888888;
}

亲自试一试

浏览器支持

IE	Firefox	Chrome	Safari	Opera

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

定义和用法

box-shadow 属性向框添加一个或多个阴影。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

默认值：	none
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.boxShadow="10px 10px 5px #888888"

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值	描述	测试
h-shadow	必需。水平阴影的位置。允许负值。	测试
v-shadow	必需。垂直阴影的位置。允许负值。	测试
blur	可选。模糊距离。	测试
spread	可选。阴影的尺寸。	测试
color	可选。阴影的颜色。请参阅 CSS 颜色值。	测试
inset	可选。将外部阴影 (outset) 改为内部阴影。	测试

千寻～

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
CSS3属性之text-shadow和box-shadow（立体效果的实现）

语法：text-shadow ： none | none | [, ] * 或none | [, ]*相关属性：无取值：：指定颜色。：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。：由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个 length 全
复制链接

扫一扫