语法：
box-shadow: h-offset v-offset blur-radius spread-radius color inset;
对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 [投影方式]}
1. h-offset：必需。水平阴影的位置。允许负值。如果值为0，则对象的左右边都有阴影，如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边(默认是outset，如果是inset相反)；
2. v-offset：必需。垂直阴影的位置。允许负值。如果值为0，则对象的底部和顶部都有阴影，如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部(默认是outset，如果是inset相反)；
3. blur-radius：此参数可选，但其值只能是正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
4. spread-radius：可选。其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
5. color：可选。阴影的颜色；
6. inset：可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；
注意：box-shadow和text-shadow一样可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开。
代码：没有设置投影方式，＋ 右 － 左
import React from 'react';
class ShaziFlex extends React.Component {
render() {
const wrap = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
};
const first = {
backgroundColor: '#e7e7e7',
width: '107px',
height: '107px',
margin: '16px',
boxShadow: '5px 0 5px red', // 没有设置投影方式，＋ 右 － 左
borderRadius: '10%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
};
const pip = {
width: '24px',
height: '24px',
borderRadius: '50%',
backgroundColor: '#333',
padding: '4px'
};
return (
<div style={wrap}>
<div style={first}>
<span style={pip}></span>
</div>
</div>
);
}
}
module.exports = ShaziFlex;
效果图
image.png
代码：设置投影方式，＋ 左 － 右
import React from 'react';
class ShaziFlex extends React.Component {
render() {
const wrap = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
};
const first = {
backgroundColor: '#e7e7e7',
width: '107px',
height: '107px',
margin: '16px',
boxShadow: '5px 0 5px red inset', // 设置投影方式，＋ 左 － 右
borderRadius: '10%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
};
const pip = {
width: '24px',
height: '24px',
borderRadius: '50%',
backgroundColor: '#333',
padding: '4px'
};
return (
<div style={wrap}>
<div style={first}>
<span style={pip}></span>
</div>
</div>
);
}
}
module.exports = ShaziFlex;
效果图
image.png
