我们在制作网页的时候可以用CSS3添加边框，那么如果要给边框添加阴影该怎么做呢？下面小编给大家分享一下。
SublimeText
首先打开Sublime Text软件，新建一个HTML文档，如下图所示
然后在html文档的Body区域插入一个div，如下图所示
接下来给div定义一些样式，注意其中的box-shadow就是定义边框阴影的，如下图所示
最后我们运行界面程序，你会看到边框已经被添加上阴影了，如下图所示
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
学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料，一起学习，一起成长！
