border的transparent属性和linear-gradient属性同时使用时会出现border颜色异常显示的问题

最新推荐文章于 2024-06-25 15:10:09 发布

竹篮打水怪

最新推荐文章于 2024-06-25 15:10:09 发布

阅读量525

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qugepminzi/article/details/128875240

当在CSS中同时使用border的transparent属性和linear-gradient时，可能会遇到边框不透明的情况。文章提到，通过改用outlines属性可以避免这个问题，使边框保持预期的透明效果。这是一个针对CSS样式调整的技术解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们同时使用border的transparent属性和linear-gradient属性时会出现边框颜色显示异常的问题，我们期望得到一个透明的边框，但是边框却显示出了linear-gradient中的颜色。

解决办法：

使用outlines属性代替border属性即可使边框保持透明色。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

竹篮打水怪

关注关注

1
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS 搞事技巧：border+transparent

weixin_33675507的博客

04-15

1855

介绍出门忘带电源线，快递到了终于可以继续水文章了。好不容易获得一个面试机会，面试官很 Nice，可惜的是当时处于懵逼状态，错过了大好的机会：面试官：巴拉巴拉吧…… 我：嗯，啊，这个，那（吱吱呜呜）…… 面试官：你知道怎么绘制三角形嘛？我：主要是利用了 border 和 transparent 这两个属性。其余边设置为 transparent，然后将对应的方向设置为需要的颜色即可，一般常用等边...

利用linear-gradient来实现信封边框效果

大白兔

05-09

1589

还是利用渐变来实现的，我们废话不多说，直接上代码： width: 200px; height: 80px; border-color: transparent; background: linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(-45deg,red 0,red 12.5%,tra...

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

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

weixin_42120767的博客

12-03

6129

设置一个元素的样式： 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、transparent写超简单的三角形

weixin_45849112的博客

10-23

4817

transparent：background-color的默认值，背景颜色是透明的（基本内容将会穿透）。 border：元素的边框，实际上元素的border是由三角形组合而成，并不是矩形，当元素是指了宽度时会显示成矩形。 eg1：只设置边框，设置不同背景色 <body>  <div></div> </body> <style> div {

border渐变色，border-image，linear-gradient

qq_37516924的博客

09-02

786

.borderClass { border-image: -webkit-linear-gradient(to right,#8C53C5,#FFF) 1 10; border-image: -moz-linear-gradient(to right,#8C53C5,#FFF) 1 10; border-image: linear-gradient(to right,#8C53C5,#FFF) 1 10; }

html常用属性border-radius、linear-gradient怎么使用

weixin_34326429的博客

06-09

394

html常用属性border-radius、linear-gradient怎么使用一、总结一句话总结： 1、border-radius: 8px 8px 8px 8px !important; 2、linear-gradient(rgba(255,124,67,0),rgba(255,0,0,1)) 二、CSS3的border-radius属性详解 border-radi...

CSS3样式linear-gradient的使用实例

12-29

1.linear-gradient是CSS3中新增的样式，主要用于颜色的渐变效果。 2.linear-gradient在不同内核下使用方式不同。实用栗子（在Chrome下） 1.缺角效果先看效果图这是内容 .div1 { width: 100px; height: 40...

利用CSS3的线性渐变linear-gradient制作边框的示例

09-24

首先，传统的方法是使用`border`属性来设置边框，但当需要创建更精细或复杂的效果时，`linear-gradient`就显得更有优势。例如，当需要创建小于1像素的边框效果时，常规的1px边框会显得比实际需求更粗。为了解决这个...

css border 渐变色实线linear-gradient失效

热门推荐

m0_67401270的博客

08-01

3万+

上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性（拉伸或平铺），而中间的那个格子则水平重复和垂直方向的重复都要执行。下图是起始点到10%的位置标蓝色，10%到30%蓝到白的渐变，30%到70%为白到橘的渐变，从70%到结束标记橘色。从上到下，从起始开始，透明向蓝色渐变到20%的位置，然后又向透明进行渐变到99%的位置，99%到结束是透明。创建线性渐变，需要设置一个起始点和方向（或角度），还要定义终止色，以及两者之间的可选色（可以有多个）。随着渐变的重复，颜色再次循环。...

css实现两头渐变border（线性渐变）

随便记记

10-09

4912

div{ border-right: 2px solid rgba(200, 220, 201, 1); border-image: linear-gradient(transparent, rgba(200, 220, 201, 1), transparent) 5 5; }

android code修改border颜色,BorderColor没有在Android上选择linearGradient颜色

weixin_33877981的博客

05-30

271

我试图创建一个内部带有图像的圆,其边框是彩色的,这就是为什么我使用LinearGradient.我正在使用此指南：您可以在此图像中看到在iOS中正常工作的问题：但是在android上,当我使用borderWidth并选择透明的borderColor时,borderColor看起来像阴影,并且由于某种原因未选择LinearGradient颜色…我究竟做错了什么？colors={['#ac8af8',...

vue.js border-image和linear-gradient（）属性做一个边框渐变色

ycycycyc1的博客

02-22

5607

首先我们今天的需求是用border-image做一个边框渐变色！！！那我们先来介绍一下什么是border-image和linear-gradient border-image是指定作为div元素周围边框的图像，那么它有几个参数，我们该怎么正确使用它呢？ border-image有五个参数分别是：我们最常用的就是border-image-source和border-image-slice还有border-image-repeat，接下来就是linear-gradient() 函数用于创建一个线性渐变的

ie6下border不能transparent

weixin_30686845的博客

04-09

101

为了做纯CSS的气泡对话框，需要用border来实现小三角的效果，而且需要用到border：1px solid transparent; 但是在IE6下border的transparent是无效的，只会显示为黑色框框，想想既然微软有滤镜能实现opacity透明，应该能有什么也能做到让border透明的吧网上搜得的结果是chroma滤镜： border-bottom: 20px sol...

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

weixin_43135973的博客

06-25

337

border颜色设置为transparent,如果背景色是渐变linear-gradient,会受到影响

css边框渐变background: linear-gradient和边框圆角border-radius问题

Ching | Blog

03-12

2546

今天在布局的时候，有一处需要同时用到border-image和border-radius。但这两个刚好不能同时使用，会照成border-radius无法正常生效。经过同事指定，网上也有类似教程，可能本人笨吧，没咋看明白。直接上代码通过使用padding设置border 使用background替换border线性渐变效果（一开始我按照其他教程去做，其实能做出来，却是有一处自己有个样式没处理好，导致以为不完美。按照别人教程做的时候，一定要看清自己代码结构） <!DOCTYPE