CSS怎么实现阴影效果

CSS怎么实现阴影效果插图

一、CSS实现阴影效果的方法

  • 1、使用text-shadow属性,可以设置带阴影的文本,实现文字阴影效果;
  • 2、使用box-shadow属性,可以将阴影应用于文本框,实现边框阴影效果。

二、方法1:使用text-shadow属性实现文字阴影效果

text-shadow属性用于设置带阴影的文本;可设置阴影的像素长度、宽度和模糊的距离以及阴影的颜色。

1、语法

1
text-shadow: h-shadow v-shadow blur color;

2、属性值

  • h-shadow:设置水平阴影的位置,允许负值。
  • v-shadow:设置垂直阴影的位置,允许负值。
  • blur:设置模糊的距离。
  • color:设置阴影的颜色。

3、示例

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title>
        <style>
            h1 {
                color: red;
                text-shadow: 3px 5px 5px #656B79;
            }
        </style>
    </head>
    <body>
        <h1>文本阴影!</h1>
    </body>
</html>

4、效果图

CSS怎么实现阴影效果插图2

三、方法2:使用box-shadow属性实现边框阴影效果

box-shadow属性可以将阴影应用于文本框,可设置中阴影的像素长度,宽度和模糊的距离以及阴影的颜色。

1、语法

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

2、属性值

  • h-shadow:设置水平阴影的位置,允许负值;必需值,不可省略。
  • v-shadow:设置垂直阴影的位置,允许负值;必需值,不可省略。
  • blur:设置模糊距离;可选值,可省略。
  • spread:设置阴影的大小;可选值,可省略。
  • color:设置阴影的颜色;可选值,可省略。
  • inset:设置从外层的阴影(开始时)改变阴影内侧阴影;可选值,可省略。

3、示例

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<head>
    <meta charset="UTF-8">
    <title>css设置边框阴影效果</title>
    <style>
         div{
            width:300px;
            height:100px;
            background-color:red;
            box-shadow: 10px 10px 5px #888888;
        }
    </style>
</head>
<body>
    <div>边框阴影!</div>
</body>

4、效果图

CSS怎么实现阴影效果插图4

发表评论

欢迎阅读『CSS怎么实现阴影效果|CSS、HTML5、Web设计|Nick Tan-梓潼Blog』