CSS实现布局中的发光边框（使用伪元素+渐变色）

最新推荐文章于 2025-09-26 11:35:09 发布

原创

最新推荐文章于 2025-09-26 11:35:09 发布 · 2.8k 阅读

16 ·

CC 4.0 BY-SA版权

本文介绍了如何使用CSS通过伪元素和渐变色来实现布局中的发光边框效果，适用于网站小盒子的特效设计。内容包括发光效果图展示，源码解析，以及个人笔记，其中提到了filter样式、box-sizing属性和线性渐变背景的使用技巧。

该效果可以用在自己布局网站时，对小盒子的边框进行特效设计，本特效设计参考了一位B站up主的教程，链接附在文末，对做酷炫布局有一定的帮助。

1. 发光效果图：

在这里插入图片描述

2. 源码解析：

buling.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

luniaWang

关注关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

css 一口气实现切角+边框+投影+内容背景色渐变

denglouhen的博客

10-26

1595

单纯用css实现切角+边框+投影+内容背景色渐变所有效果，因为UI没给背景切图，寻思这个理论上用css就能实现。看一下最终要实现的效果：首先不谈内容紫蓝色渐变，一个单纯的四切角+黑色边框+轮廓投影，其实就直接用网上铺天盖地的background:linear-gradient 实现切角+ 套一层小了1px的伪元素实现边框+ filter: box-shadow实现投影就行了，效果和代码如下： <html> <body> <div class=..

参与评论您还未登录，请先登录后发表或查看评论

使用纯 CSS 创作一个渐变色动画边框

09-22

主要介绍了使用纯 CSS 创作一个渐变色动画边框,需要的朋友可以参考下

新手可以参考的 CSS3实现逐渐发光的方格边框

hehekai的博客

04-24

2748

一个使用伪元素来实现边框逐渐发光的代码，主要用到scale和opacity这两个属性。 HTML代码：<div class="light"> <img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/> <div class=...

css透明背景物体发光代码

热门推荐

weixin_52057286的博客

03-27

1万+

使用css3新特性——动画，实现一个边框跑马灯效果

CSS动态渐变色边框围绕内容区域旋转的效果(实例代码)

12-14

css3+伪元素实现鼠标移入时下划线向两边展开的效果

09-24

在本示例中，我们将详细探讨如何利用伪元素`:before`和`:after`以及CSS3的过渡（transition）属性，实现鼠标移入时下划线从中间向两边展开的效果。首先，我们需要创建一个基础的HTML结构，包含一个ID为"underline...

一个发光的搜索边框（纯CSS3）

08-22

一个很漂亮会发光的搜索边框，使用的是css3的动画，没有js，代码简洁，兼容手机，平板，pc设备

纯css实现一个边框流光动画效果

Twinkle_sone的博客

06-01

1494

这篇文章介绍了如何使用纯CSS实现边框流光动画效果。作者通过CSS伪元素创建光带，利用动画控制其尺寸和位置变化，结合box-shadow实现发光效果。文章详细分解了动画的6个关键状态，展示了从圆形到四边边框的流动过程。还提供了调整发光强度和颜色的方法，并分享了源码地址和在线体验链接。该效果无需JavaScript，仅通过CSS动画即可实现，适合用于网页装饰元素。

css实现多种边框及多边形发光效果练习

zw217520的博客

10-11

7488

1、圆角阴影（文字标题时用到） .shadow { width: 200px; height: 40px; border-radius: 20px; background-color: #ffa500; box-shadow: 0 5px 0 0 #ff4500; } 2、边框四角特殊效果方法一：利用伪元素:before，:after /*les...

CSS3实战：创建发光边框效果

weixin_32287387的博客

08-14

1203

在现代网页设计中，发光边框是一种流行的视觉效果，它能够给用户界面带来视觉上的吸引力和动态感。通过CSS3，设计师可以轻松地给元素添加立体感、深度感以及光感，无需依赖图片或复杂的JavaScript代码。发光边框不仅可以增强视觉效果，还可以引导用户注意力，突出主要内容和按钮。box-shadow是CSS中一个强大的属性，它允许开发者在元素的周围添加阴影效果。这一属性在实现元素的立体感和深度感方面非常有效，尤其在创建具有视觉吸引力的发光边框时表现突出。利用box-shadow。

css 科技边框_CSS3实现发光边框特效

weixin_39615984的博客

01-14

2891

这篇文章我们来讲一下在网站建设中，CSS3实现发光边框特效。本文对大家进行网站开发设计工作或者学习都有一定帮助，下面让我们进入正文。运行效果：htmlCSSbody {margin: 0;width: 100vw;height: 100vh;background: #010326;}.root {--glow_width: 2px;--animation_length: 2s;--delay_fa...

css设置边框内外发光效果

qq_41837182的博客

04-25

9998

box-shadow: 0 0 10px rgb(0,153,184) inset,0px 0px 30px rgb(0,153,184);

CSS边框发光

当下的七炎

11-01

1014

input[type=text]:focus,input[type=password]:focus,textarea:focus,textarea:hover,input:hover{ transition:border linear .2s,box-shadow linear .5s; -moz-transition:border linear .2s,-moz-box-shadow linea

CSS技巧专栏：一日一例 7 - 纯CSS实现炫光边框按钮特效

uu0216的博客

07-17

3040

相信你可能已经在网络见过类似这样的流光的按钮，在羡慕别人做的按钮这么酷的时候，你有没有扒一下它的源代码的冲动？或者你当时有点冲动，却转眼忘却了。今天，刚巧，你又看到它了，今天跟我一起扒一扒它的源代码。左边按钮分析：1. 圆角按钮的光线效果，这个稍微费劲些。难点：动画层的路径移动2. 倒影。

css 实现渐变色边框

02-07

### 使用 CSS 实现渐变色边框为了创建具有渐变效果的边框，可以采用多种方法来达到理想的效果。一种常见的方式是利用伪元素 `::before` 和 `::after` 结合线性渐变背景以及巧妙设置这些伪元素的位置和尺寸。 #### 方法一：使用伪元素与线性渐变通过定义两个伪元素并赋予它们不同的颜色过渡属性，可以在视觉上形成一个带有渐变效果的边框： ```css .gradient-border { position: relative; } .gradient-border::before, .gradient-border::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .gradient-border::before { background-image: linear-gradient(to bottom, rgba(255, 0, 0, .7), rgba(0, 255, 0, .7)); z-index: -1; padding: 4px; /* 控制边框厚度 */ } ``` 这种方法允许开发者灵活调整渐变的方向、角度以及其他样式特性[^1]。 #### 方法二：运用多重阴影模拟渐变边框另一种实现方式则是借助于 `box-shadow` 属性，通过叠加多层不同透明度的颜色阴影来模仿真实的渐变边缘效果。这种方式不需要额外增加 HTML 标记结构，仅需修改目标元素自身的 CSS 即可完成配置。 ```css .element-with-gradient-shadow { box-shadow: inset 0 0 0 2px transparent, /* 内部虚影作为占位符 */ 0 0 0 4px red, /* 外侧红色部分 */ 0 0 0 8px green /* 更外一层绿色部分 */; transition: all 0.3s ease-in-out; } /* 鼠标悬停时改变渐变方向 */ .element-with-gradient-shadow:hover { box-shadow: inset 0 0 0 2px transparent, 0 0 0 4px blue, 0 0 0 8px yellow; } ``` 此方案特别适合那些希望简化 DOM 结构的同时又能获得良好交互体验的设计场景[^2]。