CSS3 box-shadow 元素边框制造阴影

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;

效果图

代码：设置投影方式，＋ 左 － 右

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;

效果图

学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料，一起学习，一起成长！