box-shadow realizes light-like object style buttons

1. Effect preset

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. That is to give css设置box-shadow属性;

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

• The numerical values ​​in turn correspond to:
• The position of the horizontal shadow. Negative values ​​are allowed.
• The position of the vertical shadow. Negative values ​​are allowed.
• The size of the shadow.
• The color of the shadow

4. For reference css自定义属性的写法:
custom attributes (sometimes called CSS variables or cascading variables) are defined by CSS authors, and the values ​​it contains can be reused throughout the document. The value is set by the custom attribute mark (for example: --main-color: black;), and the value is obtained by the var() function (for example: 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);
}