background-color和border-color设置颜色相同，渲染出来不一致

最新推荐文章于 2023-04-20 11:44:26 发布
最新推荐文章于 2023-04-20 11:44:26 发布
阅读量407 收藏
点赞数
文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Katto_Cara/article/details/129817208
版权
在开发中，遇到表格hover时，相同颜色的border-color和background-color显示不一致的问题。作者发现将边框的透明度设为0可以使两者显示一致，推测可能是由于颜色透明度导致的渲染差异。
摘要由CSDN通过智能技术生成 
      border-color: rgba(92, 107, 208, 0.1);
      background-color: rgba(92, 107, 208, 0.1);

 开发的时候为了给表格加hover状态，遇到 background-color和border-color设置颜色相同，渲染出来效果却不一致的情况。 不要慌张，又是面向百度编程的一天，把边框的透明度变成0就神奇的一致了。

大胆猜测可能是因为背景色和边框颜色都有透明度导致的。

border-color: rgba(92, 107, 208, 0);

 

Katto_Cara
关注
html边框设置为背景同色,css边框与背景
weixin_39885683的博客
06-25 1443
1.半透明边框默认情况下，背景会延伸到边框所在的区域下层。可以通过background-clip 属性来调整。这个属性的初始值是border-box，意味着背景会被元素的border-box(边框的外沿框)裁切掉。设置为padding-box，背景不会透过边框所在的范围，览器就会用内边距的外沿来把背景裁切掉。border: 10px solid pink;background: red;backg...
border-radius 你了解多少
weixin_49140057的博客
01-08 909
border-radius 你了解多少 在 border-radius 这个 CSS3 属性出现之前，我们要想在页面画个圆，务必借助图片来实现，出了这个 border-radius 属性之后，我们在页面中实现一个圆形是非常容易的。接下来我们仔细研究研究这个 border-radius，看看它还有那些黑魔法？ Border-radius 探究 通过 border-radius 轻而易举的可以划出一个圆。我们通过这样的一个小例子，开始探究 border-radius。 HTML: CSS: .demo { w
css样式vue元素从一个背景色和字体颜色缓缓变成另一种颜色
stars______的博客
03-30 551
hover悬停在元素上。.2s为渐变时间是2秒。
背景透明的2种写法。效果不一样
南北极之间
10-22 347
1，如果单独设置透明度的话。该元素下面的所有内容都会透明 background-color: #000; opacity: 0.5; 2，如果把颜色和透明度写在一起。就只会那一个元素透明。不会影响其他的 background: rgba(0,0,0,0.6); ...
050_学习的CSS属性
aihiao的专栏
10-30 200
尺寸属性(Dimension) height: 设置元素高度。 max-height: 设置元素的最大高度。 max-width: 设置元素的最大宽度。 min-height: 设置元素的最小高度。 min-width: 设置元素的最小宽度。 width: 设置元素的宽度。 背景属性(Background) background: 在一个声明中设置所有的背景属性。 background-color: 设置元素的背景颜色。 background-image: 设置元素的背景图像。 background-r
设置背景颜色和边框颜色透明度不一致
u011498933的专栏
01-29 2966
分别对div的四个边框，div里面的填充颜色的透明度进行设置，代码如下： 边框颜色调整 input{ margin:100px; border:3px solid #0086EA; background-color: rgba(0,134,234,.3); } div { width: 100px; height:10
DIV border边框显示不完全问题的解决方法
10-30
而边框（`border`）是CSS中一个重要的属性，它允许我们为元素添加清晰的边缘，以增加视觉效果和区分内容区域。然而，有时可能会遇到`div`的边框显示不完全或显示异常的问题，这通常是由于浏览器兼容性、浮动元素、...
background-clip的用法:
qq_47092383的博客
05-24 2911
效果:控制背景的渲染区域 可选属性值: border-box | padding-box | content-box,默认值为border-box。 background-clip原理是将背景渲染的区域控制和裁剪背景大小,在裁剪范围外的区域则不会被显示。 这里举个例,定义一个相同效果的div,将其background-clip的属性取值不同,所在页面上表现的效果区别,代码如下: css: div { display: inline-block;
vue 中 elment-ui table合并上下两行相同数据单元格
10-15
:header-cell-style="{background:'#6d7f93',color:'white'}" :data="ptableDate" align="center" border v-loading="loading" :height="tableHeight" :span-method="objectOneMethod" > <el-table-column ...
<link rel="stylesheet" href="./css/layuimini.css" media="all"> <style> *{ box-sizing: border-box; } ul li:hover a { color: #3B82F6; } ul li:hover span { color: #3B82F6; } .titleNt{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } body { background-color: #0F172A; } .informationBox { background-color: #0F172A; padding: 20px; } .informationBox span{ display: block; } .informationBox span:nth-child(11){ border: 1px solid #3B82F6; width: 100px; height: 100px; border-radius: 100%; text-align: center; line-height: 100px; margin-top: 15px; }
最新发布
06-08
其中，CSS部分定义了一些基本元素的样式，如hover时链接和span元素的颜色，标题溢出时的省略号显示等等；而HTML部分则包含了一个class为informationBox的div元素以及其中的一些子元素，如一些span元素和一个圆形的...
background-color和color的区别
drawlessonsfrom的博客
03-26 3205
1、功能不同 background-color用于设置背景颜色，而color用于设置字体的颜色。 2、范围不同 background-color属性所设置的颜色会填充元素的内容、内边距和边框区域，扩展到边框的外边界（不包括外边距）。 color属性设置了一个元素的前景色，在HTML中就是元素的文本颜色。光栅图像不受color影响。这个颜色可以应用到元素的所有边框，但是当设置了border-color的颜色时，其将显示所设置的border-color属性的颜色。即border-color所设置的颜色会覆盖co
CSS深入理解学习笔记之border
weixin_33849215的博客
07-14 113
1、border-width 　　border-width为何不支持百分比：语义和使用场景决定的，现实中各种边框本身的概念就不存在百分比的使用方法。 　　border-width支持关键字：thin、medium（默认）、thick，其大小分别是1px、3px、5px（IE7除外）。 　　border-width默认值为何是medium（3px）：因为border-style为double的...
CSS之背景样式及边框样式
sz1125218970的博客
12-10 1070
笔记
table边框渲染bug
qq_26889291的博客
04-02 146
解决方法本来设置自动计算高度，calc得到高度值为27px,将height值改成28或者30就没这个问题
background 的一些 小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; ...
weixin_30539625的博客
07-19 1317
1. background (background-color, background-image) 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 背景颜色: 起点 是 border的外边缘 http://www.w3cplus.com/content/css-background-origin...
css奇葩问题
暖风的博客_CSDN博客
04-20 110
子元素可以设置background：none，也可以设置background：transparent，来保持和父元素一样的颜色（把颜色设置成#开头的16进制，依然没有任何效果）背景色中存在透明度，所以会受到父元素背景色的影响，即使父元素也是一样的背景色设置，也会显示不一样。
QTableView 设置selection-background-color和border不同时生效问题记录
qq_36939187的博客
04-13 764
qtableview在使用过程种设置qss样式，设置选中时的背景色，以及边框颜色，不能同时生效。
background-color、background-image、background-attachment、background-position等属性详解
请叫我二狗哥
04-09 2435
background-color背景颜色 background-color背景颜色是包含边框border，边框如果不设置颜色，默认会采用文本颜色，而文本颜色默认是黑色。 background-image背景图片 background-image背景图片占据了元素的全部尺寸，包括内边距padding和边框border，但不包括外边距margin。默认背景图片位于元素的左上角，并且在水平和垂直方...
用CSS设置颜色、背景和图像效果
热门推荐
微风洋洋的博客
02-08 2万+
这篇文章简单介绍了用CSS设置颜色、背景和图像效果的基本知识，重要的知识点就是图文混排，尤其要注意图片的位置，为后面将相对位置、绝对位置做好铺垫。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值