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

最新推荐文章于 2023-12-03 17:16:56 发布
最新推荐文章于 2023-12-03 17:16:56 发布
阅读量2.4k 收藏 16
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luniaWang/article/details/104303298
版权
本文介绍了如何使用CSS通过伪元素和渐变色来实现布局中的发光边框效果，适用于网站小盒子的特效设计。内容包括发光效果图展示，源码解析，以及个人笔记，其中提到了filter样式、box-sizing属性和线性渐变背景的使用技巧。
摘要由CSDN通过智能技术生成

该效果可以用在自己布局网站时，对小盒子的边框进行特效设计，本特效设计参考了一位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="s
最低0.47元/天 解锁文章
luniaWang
关注
html+css 实现hover酷炫发光按钮
宝码香车的博客
08-07 1032
.这是一个，炫酷的效果。附具体代码，深入理解，彻底掌握！直接看代码，可以一键复制，查看效果。
新手可以参考的 CSS3实现逐渐发光的方格边框
hehekai的博客
04-24 2666
一个使用伪元素来实现边框逐渐发光的代码，主要用到scale和opacity这两个属性。 HTML代码：&lt;div class="light"&gt; &lt;img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/&gt; &lt;div class=...
CSS3 发光边框
04-26
NULL 博文链接：https://onestopweb.iteye.com/blog/2367136
CSS3 实现发光边框特效
01-18
运行效果： html <!-- This element is not visible. The DOM is generated by JavaScript --> CSS body
css 科技 边框_CSS3实现发光边框特效
weixin_39615984的博客
01-14 2610
这篇文章我们来讲一下在网站建设中，CSS3实现发光边框特效。本文对大家进行网站开发设计工作或者学习都有一定帮助，下面让我们进入正文。运行效果：htmlCSSbody {margin: 0;width: 100vw;height: 100vh;background: #010326;}.root {--glow_width: 2px;--animation_length: 2s;--delay_fa...
css 边缘闪光_纯css3闪烁动画《发光的边框效果》
weixin_39989973的博客
12-22 1695
纯css3闪烁动画/* 动画闪烁颜色 */@-webkit-keyframes greenPulse {from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }to { ...
使用纯 CSS 创作一个渐变色动画边框
09-22
在本文中，我们将深入探讨如何使用纯 CSS 创建一个渐变色动画边框。这个效果是通过结合使用 CSS 的伪元素、渐变背景、动画和层级属性实现的。下面，我们将详细解析每个关键知识点： 1. **CSS 伪元素**： - `::...
CSS动态渐变色边框围绕内容区域旋转的效果(实例代码)
12-14
  在网上查阅相关资料后，发现目前的动态渐变色边框的实现方式大部分为使用伪元素比内容区域大一圈然后横向移动渐变色背景的方式实现，而没有渐变色边框围绕内容区域进行旋转的效果，于是我做了一个这样的demo供...
css实现一个炫酷的渐变色边框
Ndbsa的博客
12-09 3643
🚀对于我们一些比较炫酷的ui设计我们经常会出现一些渐变色的样式，比如渐变色的背景，渐变色的边框，本文以一个ui设计稿展开，为大家带来常见的渐变色绘制方法，废话不多说直接上图🐛： 这是一个我们需要制作完成的渐变色的ui设计稿，我们使用的ui设计平台是平台，可以看到ui的稿件中的样式是这样的： 核心就是用渐变的边框的渐变色配合🦋向内的来实现内部的那种阴影效果。于是我开开心心的将代码复制到了我的样式上，结果发生了惨案🚗，下面是我直接上代码的效果： 是哪里不对吗，🐸为什么这个好像没有生效，后来查阅后发现
css 一口气实现切角+边框+投影+内容背景色渐变
denglouhen的博客
10-26 1369
单纯用css实现切角+边框+投影+内容背景色渐变所有效果，因为UI没给背景切图，寻思这个理论上用css就能实现。 看一下最终要实现的效果： 首先不谈内容紫蓝色渐变，一个单纯的四切角+黑色边框+轮廓投影，其实就直接用网上铺天盖地的background:linear-gradient 实现切角+ 套一层小了1px的伪元素实现边框+ filter: box-shadow实现投影就行了，效果和代码如下： <html> <body> <div class=..
html制作边框发亮的正方形,利用CSS3伪元素实现逐渐发光的方格边框
weixin_33513255的博客
06-02 593
本文介绍的是一个使用伪元素来实现边框逐渐发光的代码，主要用到scale和opacity这两个属性。下面来看看详细的介绍：效果图如下：HTML代码： 前端开发博客关注前端开发CSS代码：.light{background: #fff;width: 180px;height: 180px;margin: 100px auto;position: relative;text-align: center;...
html边框线性发光,CSS3实现逐渐发光的方格边框实例
weixin_33364945的博客
06-25 343
.light{background:#fff;width:180px;height:180px;margin:100pxauto;position:relative;text-align:center;color:#333;transform:translate3d(0,0,0);}.light-inner{padding:60px30px0;pointer-events:none;positio...
CSS边框发光
当下的七炎
11-01 937
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
纯CSS3流光边框特效
斗战圣Q
11-04 4503
纯CSS3流光边框特效
119.css按钮边框渐变发光特效
粉丝们务必加入微信粉丝群
12-17 3415
效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。 github 地址：https://github.com/qq449245884/vue-okr-tree 演示视频 【前端物资】119按钮边框渐变发光特效 视频地址一：https://www.bilibili.com/video/BV1rh
前端css3菜单栏点击颜色渐变，方框发光
m0_73701465的博客
12-03 506
通过以上步骤就可以实现点击菜单栏颜色渐变，边框发光了。通过设计盒子的阴影，就可以使边框发光显示。这样就可以实现菜单栏颜色的渐变。
css3阴影设置发光边框效果，阴影按钮
不知不觉 | 笔记
09-16 2602
input内阴影 .border-shadow{    -moz-box-shadow:1px 1px 1px #e0e0e0 inset;                   -webkit-box-shadow:1px 1px 1px #e0e0e0 inset;                box-shadow:1px 1px 1px #e0e0e0 inset;     }
css 渐变色的圆角边框
最新发布
01-13
在CSS中，要实现渐变色的圆角边框，可以使用伪元素和背景渐变来实现。以下是一种方法： ```css <style> .box { position: relative; width: 200px; height: 200px; border-radius: 20px; overflow: hidden; } .box::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom right, #ff0000, #00ff00); z-index: -1; border-radius: inherit; } </style> <div class="box"></div> ``` 在上面的代码中，我们创建了一个名为`.box`的容器，并设置了宽度、高度和圆角。然后，我们使用伪元素`::before`来创建一个覆盖整个容器的背景渐变。通过设置`background`属性为`linear-gradient(to bottom right, #ff0000, #00ff00)`，我们可以实现从红色到绿色的渐变色。最后，我们将伪元素的`border-radius`属性设置为`inherit`，以继承父元素的圆角属性。 请注意，这种方法只能实现渐变色的圆角边框，而不是实际的边框。如果需要实现真正的边框效果，可以使用其他技术，如SVG或JavaScript。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值