思路大概是：
1.设置一个暗的背景（这样才能看到发光）
2.设置box-shadow 注意：第一个值，如果没有指定inset，默认阴影在边框外，即阴影向外扩散。 使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下
先看效果：
以下是全部代码：
html部分
<template>
<div class="main">
移动端发光样式三件套
<div class="content">
<div class="container">这是一个向内发光的框</div>
<div class="field">这是一个背景边边模糊的div</div>
<div class="btnCtn">一个向外发光的按钮</div>
</div>
</div>
</template>
style部分
<style scoped lang="less">
.main {
width: 100%;
min-height: 100vh;
position: relative;
background: #000;
background-size: 100%;
font-family: 思源黑体;
.content {
width: 80%;
margin: 10em auto;
// 向内发光框样式
.container {
height: 10em;
background-color: #000;
border: 1px #0b8da7 solid;
border-radius: 10px;
box-shadow: inset 1px 1px 6px 3px #0158c7;
padding: 20px;
color:#fff;
}
// 背景边边逐渐模糊的
.field {
height: 5em;
background: #021f50;
box-shadow: 1px 1px 9px 4px rgba(130, 143, 165, 0.3);
border-radius: 4px;
padding: 0 10px;
margin: 4em 0;
color: #c8d9ec;
display: flex;
align-items: center;
justify-content: center;
}
// 向外发光的按钮
.btnCtn {
width: 70%;
height: 3rem;
margin: 1em auto;
display: flex;
align-items: center;
justify-content: center;
background: #3c4146;
color: #fff;
border-radius: 24px;
padding: 0 0.5em;
box-shadow: 1px 1px 9px 2px #769ee1;
font-weight: bold;
}
}
}
</style>