border颜色设置为transparent,如果背景色是渐变linear-gradient,会受到影响,边框还是会显示出来

原创 于 2024-06-25 15:10:09 发布 · 370 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #html

需求：因为选中状态是有边框的，但是想要丝滑切换。

解决方案：在未选中的元素上加一个边框，颜色为透明色

遇到问题：尽管我设置的边框为透明，但是还是会显示出一点点

问题解决方法：

border-radius: 8px;
border: 1px solid transparent;
background-clip: padding-box; /* 背景裁剪到内边距盒 */

在透明边框的元素上设置背景只延伸到内边距；

添加前；

添加后

border、transparent写超简单的三角形
weixin_45849112的博客
10-23 4970
transparent：background-color的默认值，背景颜色是透明的（基本内容将会穿透）。 border：元素的边框，实际上元素的border是由三角形组合而成，并不是矩形，当元素是指了宽度时会显示成矩形。 eg1：只设置边框，设置不同背景色 <body> <!-- background-color属性之transparent --> <div></div> </body> <style> div {
css设置透明的border
树上骑个猴的博客
04-08 1万+
.container{ background-color: black; border: 1px solid;/*设置透明边框*/ }
transparent(指定透明度)使用方法
qq_41973526的博客
12-07 7052
transparent(指定透明度)使用方法 1.在web前端中使用html+css用于制作三角形（用途） 2.盒子宽和高必须都为0,这时盒子四边以三角形的形式进行相接。如果只有一个边框宽度存在时，那么这个边框不会显示。因此，必须存在两个边框宽度才会显示。 3. 那个给transparent属性就说明哪两个直接要进行连线 （重点理解，自己再多操作几遍） 3.1如 /*箭头朝上的三角形 */ div...
CSS 搞事技巧：border+transparent
weixin_33675507的博客
04-15 1888
介绍 出门忘带电源线，快递到了终于可以继续水文章了。好不容易获得一个面试机会，面试官很 Nice，可惜的是当时处于懵逼状态，错过了大好的机会： 面试官：巴拉巴拉吧…… 我：嗯，啊，这个，那（吱吱呜呜）…… 面试官：你知道怎么绘制三角形嘛？ 我：主要是利用了 border 和 transparent 这两个属性。其余边设置为 transparent，然后将对应的方向设置为需要的颜色即可，一般常用等边...
第二章 Background & Borders 之 Transparent Border
azawmhwz21502的博客
11-01 164
1.Translucent(半透明的) border 第二章的第一个例子是实现半透明的边框。效果如下： 初看之下，很简单嘛，boder就搞定啦，代码如下： border: 10px solid hsla(0,0%,100%,.5); background: white; 但是这样根本不起作用啊，给人的效果是border不见了.... 咦...咋回事喃？ 原来，b...
利用CSS3的线性渐变linear-gradient制作边框的示例
09-24
在CSS3中，`linear-gradient`是一个强大的工具，可以用于创建动态、丰富的背景效果，而不仅仅是填充色块。在这个示例中，我们将深入探讨如何利用`linear-gradient`来制作边框，以及如何通过调整参数来实现不同的边框...
css border 渐变色实线linear-gradient失效
05-17
### CSS 中 `border` 使用 `linear-gradient` 渐变色实线无效的原因 在 CSS 中，直接将 `linear-gradient` 应用于 `border` 属性会导致其失效。这是因为 `border` 的默认行为不支持渐变颜色作为值[^1]。为了实现带...
【CSS3特效开发】Repeating-linear-gradient在边框中的独特运用
Pp_Tom的博客
05-28 2717
渐变图案之老式信封边框： 这个特效是在开发连续图片边框之后变形改进得到的，至于连续图片边框效果回头再跟大家一起分享。 先看一下效果图： 设计知识点：css3中的repeating-linear-gradient属性background-clip属性。 需要注意的地方：我们只能在多重背景最底层设置背景色，不过可以通过color到color的css渐变来模拟实色背景在非底层设置背景颜色
.feature-item { font-family: 'ShuHuiTi'; padding: 30rpx; cursor: pointer; border-radius: 25rpx; background: linear-gradient(transparent, transparent) padding-box, /* 内层背景（内容区域） */ linear-gradient(180deg, #D00D1B 0%, #FAA86D 100%) border-box; /* 外层背景（边框区域） */ border: 2px solid transparent; /* 利用边框区域作为渐变背景 */ }怎么修改有圆角并且里面内容为透明色
最新发布
08-06
- 如果父元素有背景色，内容区域的透明会显示父元素的背景。 如果使用伪元素方案，代码如下： ```css .feature-item { position: relative; /* 为伪元素定位准备 */ font-family: 'ShuHuiTi'; padding: 30rpx...
position: relative; display: flex; flex-direction: column; align-items: center; background-color: rgba(0, 0, 0, 0.53); border-radius: 5px !important; flex-shrink: 0; width: calc(20% - 23px); height: 110px; border: 1px solid transparent; border-image: linear-gradient(to bottom, #50BFFB, #308395) 1; overflow: visible; box-sizing: border-box; 我想实现边框是圆角，且圆角边框为渐变色
07-11
### 实现带有渐变色边框并且具有圆角效果的 CSS 样式 在 CSS 中，直接使用 `border-image` 和 `border-radius` 同时作用于一个元素时可能会遇到兼容性问题，因为某些浏览器可能无法正确渲染这两种样式[^4]。为了...
css border设置为透明
魔侠的沙滩
11-17 6402
当元素自己有背景颜色时，border的颜色设置为rgba(0, 0, 0, 0.5)，透明度会无效。
css边框border颜色设置为透明transparent,如果背景色是渐变linear-gradient,会受到影响,边框还是会显示出来
weixin_42120767的博客
12-03 6222
设置一个元素的样式： background: linear-gradient(130deg, rgba(205, 144, 42, 0.9) 0%,rgba(245,213,115,0.3) 70%, rgba(205, 144, 42, 0.6) 100%); border: 3px solid transparent; 结果：按理说，设置transparent后边框应该是看不见的，在实战中(出现情况是在小程序，其他平台未测)发现，如果该元素也设置了渐变色，那么边框还是能显示出来 解决：将bor.
border-color:transparent;
weixin_30693183的博客
11-03 938
http://www.zhangxinxu.com/study/201111/triangle-css-border.html 转载于:https://www.cnblogs.com/linsx/p/4070618.html
border的transparent属性和linear-gradient属性同时使用时会出现border颜色异常显示的问题
qugepminzi的博客
02-03 595
当我们同时使用border的transparent属性和linear-gradient属性时会出现边框颜色显示异常的问题，我们期望得到一个透明的边框，但是边框却显示出了linear-gradient中的颜色。使用outlines属性代替border属性即可使边框保持透明色。
CSS之border
chaofei_liang的博客
09-17 636
1.border-width 不支持百分比 属性:thin:1px medium:3px(默认) thick:5px 2.border-style:double双线 实现三条横线分开 { width:120px;height:120px; border-top:60px double; border-bottom:20px solid; } 3.border-color与
css border-transparent在ie6、7下有效
ckmzlf的专栏
11-18 888
今天做公司一个英文网站项目项目
IE6: border的transparent解决方案
09-30 391
代码如下: border:solid 1px transparent; _border-color:tomato; _filter:chroma(color=tomato);  说明： Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下： Filter：Chroma（color=color） 这个属性的表达式是不是很简单，它只有一个参数。只需把您想要指定透明的颜色用Co
border边框线透明
热门推荐
Jacky的专栏
10-13 1万+
border-style: solid; border-width: 5px; border-color: transparent;
HTML/CSS教程：如何设置透明的文本框边框
CodeLancerX的博客
10-04 815
在网页设计和开发中，经常需要定制化文本框的外观以满足特定设计需求。本文将介绍如何通过HTML和CSS来设置透明的文本框边框。下面是对应的源代码和详细说明。通过以上代码和说明，我们就可以实现一个具有透明边框的文本框。你可以将代码复制到HTML文件中，并在浏览器中预览效果。希望这篇文章对你有所帮助，如果有任何问题，请随时提问！
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值