CSS利用伪元素方法实现边框

原创 已于 2023-12-21 01:14:57 修改 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #前端

于 2020-10-23 07:16:03 首次发布
本文介绍了一种通过设置伪元素来模拟自定义边框颜色的方法，但指出该方法的局限性在于伪元素只能应用颜色，无法直接设置背景图片。作者欢迎大家加入其创建的技术交流群，共同学习前端知识，分享和交流资源。

先写下实现思路，有空贴代码示例
实现思路：
将盒子的边框设置为要设置的边框颜色，添加::before和:after两个伪元素，将其设置为和背景颜色一样的，利用伪元素将边框不需要的部分盖住

目前发现的一个缺点：伪元素只能使用颜色，我的背景是一张背景图片，所以只能取接近的颜色了

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~

CSS实现布局中的发光边框（使用伪元素+渐变色）
luniaWang的博客
02-13 2846
该效果可以用在自己布局网站时，对小盒子的边框进行特效设计，本特效设计参考了一位B站up主的教程，链接附在文末，对做酷炫布局有一定的帮助。 1. 发光效果图： 2. 源码解析： buling.html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt...
前端必知必会-CSS布局伪元素
qq_24018193的博客
08-23 1188
本文介绍了的CSS布局伪元素使用，如有问题欢迎私信和评论。
# 使用 CSS 伪元素实现外部边框
qq_45663927的博客
06-17 1178
伪元素是添加到 CSS 选择器中的关键字，使开发人员能够设计选择的 HTML 元素的特定部分。两个最常用的伪元素是::before和::after
利用CSS3伪元素实现逐渐发光的方格边框
09-24
主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
css实现0.5像素
weixin_30629977的博客
05-05 431
.border{ position: relative; } .border:before{ content: ''; position: absolute; width: 200%; height: 200%; border: 1px solid red; ...
使用css伪元素来实现边框的部分显示
bruce_zhao1407的博客
02-13 6271
在网页的制作过程中，经常会遇到需要给元素添加边框的情况，比如在ul中，如图所示 此时假如要给
利用CSS伪元素创建带三角形的提示框的实现方法
09-24
在这篇内容中，主要的知识点是使用CSS伪元素来创建带有三角形提示框的方法。所谓伪元素，是CSS中的一个概念，指的是由浏览器自动生成，但不在文档树中的元素，比如`:before`和`:after`。利用伪元素，开发者可以不...
css3+伪元素实现鼠标移入时下划线向两边展开的效果
09-24
在本示例中，我们将详细探讨如何利用伪元素`:before`和`:after`以及CSS3的过渡（transition）属性，实现鼠标移入时下划线从中间向两边展开的效果。 首先，我们需要创建一个基础的HTML结构，包含一个ID为"underline...
CSS伪元素before、after设置特殊效果:制作时尚焦点图相框
09-25
这种利用CSS伪元素创建视觉效果的方法，相对于使用图片或其他JavaScript方法，有其独特的优势。首先，纯CSS实现的效果更加轻量级，加载速度更快，其次，调整样式和修改设计也更加灵活和简单。 总之，CSS的伪元素:...
【读书笔记】《CSS3艺术：网页设计案例实战》——【一】伪元素、边框、背景属性
程序边界
03-18 1268
文章目录第2章 伪元素2.1 ::before和::after伪元素[^eg1]2.2 content属性[^eg2]2.3 灵活使用伪元素2.3.1 用伪元素拼接造型[^eg3]2.3.2 用主元素和伪元素拼接造型[^eg4]2.3.3 用伪元素表现造型的一部分[^eg5]2.3.4 用主元素和伪元素表现造型的3个部分[^eg6]2.3.5 用伪元素表现成对的元素[^eg7]2.4 项目应用2.4.1 项目一：蒸锅[^eg8]2.4.2 项目二：怪兽[^eg9]第3章 边框3.1 边框属性3.1.1 边框
使用CSS伪元素实现虚线圆角渐变边框
最新发布
qq_43511143的博客
09-04 917
使用css伪元素实现圆角虚线边框
给div 元素增加伪元素边框（比当前宽高大或小）
title
06-01 364
【代码】给div 元素增加伪元素边框（比当前宽高大或小）
使用 CSS : 伪元素:after、过渡动画transition实现过渡效果（鼠标悬浮或点击 标签时，底部边框从左到右过渡）
xiaoming4965的博客
01-09 1343
nav-wrapper ，父级。
通过伪元素选择器设置边框（添加图标、文字）
a9874561328的博客
10-08 2158
例如在一个高300px，宽100px的div下要设置一个宽200px的边框可以不用在外边写一个大的div而之间通过伪元素来实现。 div::before{ content:" "; width:200px; height:0; border-bottom:2px black solid; position:absolute; top:300px; } ...
css伪元素实现按钮边框动效
qq_34200636的博客
04-27 404
wx公众号：XQ前端 1. 效果预览 2. 源码 我们通过伪元素和渐变实现以上效果 // 边框动画 @mixin border-animate() { position: relative; border-color: #24AFFF; color: #24AFFF; opacity: 0.8; background: #3c3d45; &:before, &:after { content: ''; display: block; width: 0; height: 0;
css 改变下划线长度，伪元素模拟border-bottom
weixin_43915401的博客
11-16 4133
要实现文字下方下划线。
伪类实现下边框
caimaomaocai的博客
09-25 4919
.JTBabs.active:before { content: ''; position: absolute; left: 20px; bottom: 0px; right: 20px; border-top: 3px solid red; }   把要加的下边框的那个元素设置为相对定位 position:relative;...
dom伪元素——边框阴影效果
heal_l的博客
02-04 553
2.溢出滑动元素对应一端放一个空元素2，使其跟随元素滚动，伪元素层级高于阴影空元素1，设置背景颜色。3.滚动条滑动至边界，元素2将元素1覆盖，即达成阴影消失。1.目标阴影处放一个空元素1，设置其伪元素有阴影效果。元素溢出滑动阴影覆盖，滑动到达顶部阴影消失。
31.伪元素，边框的妙用
qq_36367494的博客
02-21 1557
边框的妙用  基本的边框变换 1.https://www.cnblogs.com/youyoui/p/4855748.html                                                2.https://segmentfault.com/a/1190000010160618(实现等高两栏布局不会理解）伪元素的妙用参考两篇文章：1.http://www.cnbl...
掌握CSS边框阴影技巧与实现方法
例如，可以通过设置一个伪元素的`box-shadow`来模拟边框阴影，然后使用`z-index`属性将其放置在目标元素的下面，从而创建出边框阴影的视觉效果。 需要注意的是，`box-shadow`属性在不同浏览器上的兼容性可能会有所...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值