专注前端,专注网页设计制作 - (承接网页制作、设计) QQ:262817214 虚拟主机 域名注册 云主机 香港空间 | CSS3演示 | 站长工具 | 网页特效 | 网页模板 | 网页素材 | PSD素材 | 手机系统
广告加载中...
当前位置: 首页 > 网页设计 > HTML5+CSS3 > >文章

CSS3之阴影效果box-shadow与text-shadow

时间:2016-02-16 09:56点击: 次 【

 本篇,我们要讲的是CSS3中经常被使用来开发页面模糊阴影效果的box-shadow属性和text-shadow属性。

在前端开发过程中,我们常常会看见这种效果: 

  1. <!DOCTYPE html> 
  2.     <html lang="en"> 
  3.     <head> 
  4.         <meta charset="UTF-8"> 
  5.         <title>Shadow</title> 
  6.         <style> 
  7.             .box { 
  8.                 height: 100px; 
  9.                 width: 200px; 
  10.                 border: 1px ridge silver; 
  11.             } 
  12.             .shadow1 { 
  13.                 box-shadow: 4px 4px 6px 1px gray; 
  14.             } 
  15.         </style> 
  16.     </head> 
  17.     <body> 
  18.         <div class="box shadow1"></div> 
  19.     </body> 
  20.     </html> 

 

这种阴影效果就是使用CSS3box-shadow属性实现。

box-shadow

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

  • 语法:

    box-shadow: [inset] x-offset y-offset [blur] [spread] [color];

  • 属性

属性 说明
inset 可选,将默认的外阴影设置为内阴影。
x-offset 必需,水平方向阴影偏移量,可为负值。
y-offset 必需,垂直方向上阴影偏移量,可为负值。
blur 可选 ,阴影模糊半径,不可为负值。
spread 可选,阴影延展半径,可为负值。
color 可选,阴影颜色

阴影偏移量

box-shadow阴影偏移量可正可负,为正值时则向右或下偏移,如下:

  • 正水平偏移量阴影

正水平偏移量阴影

  • 负水平偏移量阴影

负水平偏移量阴影

  • 正垂直偏移量阴影

正垂直偏移量阴影

  • 负垂直偏移量阴影

负垂直偏移量阴影

模糊半径

  • 正模糊半径阴影

正模糊半径阴影

  • box-shadow不支持负模糊半径

延展半径

  • 正延展半径

    正延展半径向外延展阴影半径

正延展半径阴影

  • 负延展半径

    负延展半径向内收缩阴影半径

负延展半径阴影1

负延展半径阴影2

text-shadow

text-shadow 属性向文本设置阴影。

文本阴影

  • 语法

    text-shadow: x-offset y-offset blur color;

  • 属性

属性 说明
x-offset 必需,水平方向阴影偏移量,可为负值。
y-offset 必需,垂直方向上阴影偏移量,可为负值。
blur 可选 ,阴影模糊半径,不可为负值。
color 可选,阴影颜色
推荐文章
热门文章榜