box-shadow实现轻拟物风格按钮

1、效果预设

2、

HTML

   <span class="jurisdictionButton cursor">
     <img src="../res/png/set_icon.png" alt=""
          style="vertical-align: middle; margin-top: -2px;" />
               管理员权限</span>

CSS

	width: 120px;
	height: 32px;
	display: inline-block;
	text-align: center;
	position: relative;
	background-color: #f0f8ff;
	color: #0095f8;
	border-radius: 3px;
	font-weight: 700;
	line-height: 33px;
	box-shadow: 0px 2px 4px rgb(160, 217, 253);

3、也就是给css设置box-shadow属性；

box-shadow: 0px 2px 4px rgb(160, 217, 253);

• 数值依次对应的是：
• 水平阴影的位置。允许负值。
• 垂直阴影的位置。允许负值。
• 阴影的尺寸。
• 阴影的颜色

4、可参考css自定义属性的写法：
自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由var() 函数来获取值（比如： color: var(–main-color);）

html {
    
    
    /* 定义变量 */
    --bgColor: #ff5353;

    /* rgba的四个值分别为：红(R)、绿(G)、蓝(B)、透明度(A) */
    --whiteShadow: -15px -15px 25px rgba(255, 117, 117, .5);
    --blackShadow: 15px 15px 25px rgba(110, 40, 40, .2);
}

/* 设置一些页面的布局样式 */
body {
    
    
    display: flex;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: var(--bgColor);
}

.card {
    
    
    width: 30vh;
    height: 30vh;
    margin: 45px;
    background-color: var(--bgColor);
    border-radius: 30px;
}

/* 主要部分 */
.left {
    
    
    /* 设置外阴影 */
    box-shadow: var(--blackShadow),
                var(--whiteShadow);
}

.right {
    
    
    /* 设置内阴影 */
    box-shadow: inset var(--blackShadow),
                inset var(--whiteShadow);
}