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;

效果图

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