用box-shadow实现发光效果

标签：box color 1px background 发光 shadow

思路大概是：

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>

 

标签：box,color,1px,background,发光,shadow
From： https://www.cnblogs.com/it-girl-maxiaotiao/p/17657573.html