box-shadow realiza botones de estilo de objeto similar a la luz

1. Efecto preestablecido

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. Eso es dar css设置box-shadow属性;

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

• Los valores numéricos a su vez corresponden a:
• La posición de la sombra horizontal. Se permiten valores negativos.
• La posición de la sombra vertical. Se permiten valores negativos.
• El tamaño de la sombra.
• El color de la sombra

4. Como referencia css自定义属性的写法:
los atributos personalizados (a veces llamados variables CSS o variables en cascada) son definidos por los autores de CSS, y los valores que contienen se pueden reutilizar en todo el documento. El valor se establece mediante la marca de atributo personalizado (por ejemplo: --main-color: black;), y el valor se obtiene mediante la función var () (por ejemplo: 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);
}