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);
}