CSS笔记17：文本阴影&盒子阴影

1. 文本阴影text-shadow

    <style>
        p{
            width: 60%;
            margin: 20px auto;
        }
        /*文本阴影效果*/
        /*
        text-shadow :水平阴影 垂直阴影 模糊距离 阴影颜色;
        - 水平阴影（h-shadow）,必须。允许负值（负值阴影在左边；正值阴影在右边）
        - 垂直阴影(v-shadow),必须。允许负值（负值阴影在上边；正值阴影在下边）
        - 模糊距离(blur),可选，模糊距离（模糊强度，值越大越模糊）
        - 阴影颜色（color）,可选，阴影颜色
        注：文本阴影可以有多组，多组之间使用逗号隔开即可
        */
        .shadow1{
            /*无效？？=>没有添加单位*/
            text-shadow:2px 3px;
        }
        .shadow2{
/*          font-size: 30px;
            color: #9BCD9B;
            font-family: "楷书";*/
            text-shadow: 2px 3px 3px;
        }
    </style>

模糊度不设置时，阴影效果
添加模糊距离后，阴影效果
添加阴影颜色的阴影效果
多组阴影的阴影效果

注：RGB颜色对照表

2. 盒子阴影

    <style>
        /*
        2. 盒子阴影
        box-shadow:水平方向阴影 垂直方向阴影  模糊距离 阴影颜色 内外阴影;
        水平阴影：必须
        垂直阴影：必须
        其他非必须
        内外阴影：非必选，inset/outset，默认outset
        */
        div{
            width: 60%;
            margin: 10px auto;
            border:1px solid #000;
            height: 50px;
        }
        .div1{
            /*阴影*/
            box-shadow: 3px 2px
        }
        .div2{
            /*阴影模糊度*/
            box-shadow: 3px -2px 2px;
        }
        .div3{
            /*阴影颜色*/
            box-shadow: -3px -2px 2px #C0FF3E;
        }
        .div4{
            /*内阴影*/
            box-shadow: -3px 2px 2px #FFF68F inset;
        }
        .div5{
            /*多组阴影*/
            box-shadow: 3px 2px 2px #FFF68F inset,3px 2px 2px #C0FF3E;
        }
    </style>

盒子的阴影效果