box-shadow简介
- box-shadow: x-shadow y-shadow blur spread color position;
| 属性 | 解释 |
|---|
| x-shadow | 必需的，水平方向偏移的距离，正数则向右，负数向左 |
| y-shadow | 必需的，垂直方向偏移的距离，正数则向下，负数向上 |
| blur | 可选，阴影向内的模糊半径，正数有效，负数无效 （默认0） |
| spread | 可选，阴影向外的拓展半径，正数放大，负数缩小（默认0） |
| color | 可选，阴影的颜色值（默认黑色） |
| position | 可选，外阴影（默认不填）和内阴影（inset） |
属性介绍
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>indextitle>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
}
.box-shadow{
width: 300px;
height: 300px;
background-color: #c04851;
}
style>
head>
<body>
<div class="box-shadow">
div>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
x-shadow y-shadow
.box-shadow{
width: 300px;
height: 300px;
background-color: #c04851;
box-shadow: 100px 100px;
}
- 我的理解就是一个长宽都为
300px的父盒子分出一个一模一样的副本，向右平移了100px，向下平移了100px。也就是x-shadow y-shadow就是水平和垂直的移动的大小，正负号控制方向。
blur
.box-shadow{
width: 300px;
height: 300px;
background-color: #c04851;
box-shadow: 100px 100px 40px;
}
- 我的理解就是该副本矩形向内产生模糊。
spread
.box-shadow{
width: 300px;
height: 300px;
background-color: #c04851;
box-shadow: 100px 100px 40px 100px;
}
- 我的理解就是该副本矩形向外拓展了
100px的大小（也就是向上下左右延长100px）。
color
position
- 这个属性，如果不写，就是默认外阴影，如果需要内阴影，只需要写上inset就好；
- 代码需改如下所示，得到的效果图如下图所示；
.box-shadow{
width: 300px;
height: 300px;
background-color: #c04851;
box-shadow: 100px 100px 0px 100px inset;
}
- 内阴影可以理解成副本不动，而父组件动，也就是父组件向下和向右移动100px，展示出的图像就是原来父组件的大小和位置。模糊半径也作用在了父组件上；
- 也可以理解成，父组件和副本的对调，然后得到如下效果。
