HiDocs
Search K

Appearance

CSS3 阴影 ​

一、盒子阴影box-shadow ​

语法：box-shadow: h-shadow v-shadow blur spread color inset;

![image-20220407200043891](D:\downloads\typora picture\image-20220407200043891.png)

可以写多组，用逗号隔开即可

例1：按钮变换阴影效果：

css
#box2{
    width:100px;
    height:40px;
    background: green;
    margin: 50px auto;
    line-height:40px;
    color:#fff;
    font-weight:bold;
    text-align: center;
    border-radius: 10px;
    box-shadow:5px 5px 3px #000;
}
#box2:hover{
    box-shadow: 5px 5px 3px #000 inset ;
}

例2：彩虹圆

css
#box3{
    width:200px;
    height:200px;
    margin: 10px auto;
    border-radius: 100px;
    border:1px solid red;
    box-shadow:0px 0px 5px 5px red,0px 0px 5px 10px orange,0px 0px 5px 15px yellow,0px 0px 5px 20px green;
}
    /*
    盒子阴影
    格式：box-shadow：阴影1,阴影2……；
    阴影的格式：
    水平偏移位置，垂直偏移位置，模糊度，外延值，颜色，(内置阴影)
    */
image-20220407201330168

例3：制造发光效果：

css
<style>
    body{
        background: blueviolet;
    }
    #box1{
        width:300px;
        height:400px;
        background:#fff;
        margin: 20px auto;
        border-radius: 10px;
        box-shadow: 0px 0px 3px 3px #ccc;
    }
</style>
image-20220407202450017

例四：立体的动态效果

css
.box:hover {
  border-color: transparent;
  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, .16), 0 3px 6px 0 rgba(0, 0, 0, .12), 0 5px 12px 4px rgba(0, 0, 0, .09)
}
image-20220423174340956

二、文字阴影text-shadow ​

语法：text-shadow: h-shadow v-shadow blur color;

![image-20220407200141792](D:\downloads\typora picture\image-20220407200141792.png)

可以写多组，用逗号隔开即可

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-shadow</title>
    <style>
        #box1{
            font-size:100px;
            text-align: center;
            margin-top: 200px;
            /*格式：
                text-shadow:阴影1,阴影2……；
                阴影的格式：
                    第一个：横向偏移位置
                    第二个：纵向偏移位置
                    第三个：模糊度
                    第四个：阴影的颜色

            */
            text-shadow:1px 1px 3px red,2px 2px 3px orange,3px 3px 3px yellow;
        }
    </style>
</head>
<body>
    <div id="box1">学习猿地</div>
</body>
</html>
image-20220407201430570