盒子阴影及文字阴影

盒子阴影

 盒子阴影：box-shadow

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

 注：box-shadow向框添加一个或多个阴影. 该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值及可选的inset关键词来规定。

属性值	描述
h-shadow	必须，水平阴影位置，可负
v-shadow	必须，垂直阴影位置，可负
blur	可选，模糊距离
spread	可选，阴影尺寸
color	可选，阴影颜色
inset	可选，将外部阴影改为内部阴影

 

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: aqua;
            margin: 100px auto;
            /* box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.3); */

        }
        /* 原先盒子无阴影鼠标经过有 */
        div:hover {
            box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.3)
        }
    </style>

效果： 

 

文字阴影 

 文字阴影：text-shadow

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

属性值	描述
x-offset	指阴影居于字体水平偏移的位置
y-offset	指阴影居于字体水平偏移的位置
blur	指阴影的模糊度
color	指阴影的颜色

 <style>
        div {
            font-size: 50px;
            color: rgba(255, 123, 0, 0.842);
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0,0,0,0.3);
        }
    </style>

效果：