思路大概是：

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>