思路大概是:
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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析