css如何设置阴影效果?

css如何设置阴影效果?下面本篇文章就来给大家介绍一下使用CSS设置阴影效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

css如何设置阴影效果?

在CSS中可以使用text-shadow和box-shadow属性在HTML文档中添加文本和边框(图像)阴影。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
             div{
                width:300px;
                height:100px;
                background-color:red;
                box-shadow: 10px 10px 5px #888888;
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影!</h1>
        <div>边框阴影!</div> 
    </body> 
</html>

效果图:

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

语法:

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

属性值:

  • h-shadow:设置水平阴影的位置,允许负值。

  • v-shadow:设置垂直阴影的位置,允许负值。

  • blur:设置模糊的距离。

  • color:设置阴影的颜色。

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

语法:

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

属性值:

  • h-shadow:设置水平阴影的位置,允许负值;必需值,不可省略。

  • v-shadow:设置垂直阴影的位置,允许负值;必需值,不可省略。

  • blur:设置模糊距离;可选值,可省略。

  • spread:设置阴影的大小;可选值,可省略。

  • color:设置阴影的颜色;可选值,可省略。

  • inset:设置从外层的阴影(开始时)改变阴影内侧阴影;可选值,可省略。

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css如何设置阴影效果?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读