jywj108
小狐狸
小狐狸
  • UID37679
  • 注册日期2011-11-04
  • 最后登录2016-06-13
  • 发帖数35
  • 经验43枚
  • 威望0点
  • 贡献值34点
  • 好评度0点
阅读:5169回复:6

如何修改当前标签页颜色 CSS

楼主#
更多 发布于:2014-10-26 22:20
CSS语句:.tabbrowser-tab[selected]{background-color: #EAEAEA !important;} /*当前标签颜色*/
使用上面的CSS语句在Firefox33中修改当前标签页颜色的时候,总是超出了圆弧轮廓
(注:Firefox29以后的 默认标签页形状),修改的区域是包含了圆弧轮廓标签的一个矩形区域,请问如何才能解决仅仅修改圆弧轮廓区域内的标签页的颜色?
jywj108
小狐狸
小狐狸
  • UID37679
  • 注册日期2011-11-04
  • 最后登录2016-06-13
  • 发帖数35
  • 经验43枚
  • 威望0点
  • 贡献值34点
  • 好评度0点
1楼#
发布于:2014-10-26 22:25
这是贴吧中有人提到的同样的问题:http://tieba.baidu.com/p/3049353723
可惜那个帖子中给出的stylish中的CSS程序抓不住关键,不知道其中修改标签页颜色的是哪些……
jinke679
小狐狸
小狐狸
  • UID27602
  • 注册日期2008-12-28
  • 最后登录2017-04-25
  • 发帖数69
  • 经验76枚
  • 威望0点
  • 贡献值14点
  • 好评度1点
  • 社区居民
  • 忠实会员
2楼#
发布于:2014-10-27 15:56
.tab-background-middle[selected=true],
.tab-background-start[selected=true]:before,
.tab-background-end[selected=true]:before {
    background-color: rgba(254,254,254,1) !important;
}
 
 
.tab-background-start[selected=true]:before {
    clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start) !important;
    background-image: none !important;
}
 
.tab-background-end[selected=true]:not(:-moz-lwtheme):before {
    clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end) !important;
    background-image: none !important;
}
jywj108
小狐狸
小狐狸
  • UID37679
  • 注册日期2011-11-04
  • 最后登录2016-06-13
  • 发帖数35
  • 经验43枚
  • 威望0点
  • 贡献值34点
  • 好评度0点
3楼#
发布于:2014-10-27 21:32
非常感谢fjinke679
加班刚回来,就发现有高手把问题解决了,不甚欣喜……

ps:惭愧……如果要修改成其他颜色应该怎么修改,比如说#EBEBEB。因为我的地址栏背景被我改成这种颜色了,比较浅不刺眼。
我一旦把rgba(254,254,254,1)修改了就不对头啊,即使是修改了透明度比如(254,254,254,0.5)也不对,汗颜……
jinke679
小狐狸
小狐狸
  • UID27602
  • 注册日期2008-12-28
  • 最后登录2017-04-25
  • 发帖数69
  • 经验76枚
  • 威望0点
  • 贡献值14点
  • 好评度1点
  • 社区居民
  • 忠实会员
4楼#
发布于:2014-10-27 22:56
这样试试
jywj108:非常感谢fjinke679
加班刚回来,就发现有高手把问题解决了,不甚欣喜……

ps:惭愧……如果要修改成其他颜色应该怎么修改,比如说#EBEBEB。因为我的地址栏背景被我改成这种颜色了,比较浅不刺眼。
我一旦把rgba(254...
回到原帖
.tab-background-middle[selected=true],
.tab-background-start[selected=true]:before,
.tab-background-end[selected=true]:before {
    background-color: #ebEBEB !important;
}
   
   
.tab-background-start[selected=true]:before {
    clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start) !important;
    background-image: none !important;
}
   
.tab-background-middle[selected=true] {
  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),linear-gradient(transparent, transparent 2px, rgba(0,0,0,0)), none!important;
}
   
.tab-background-end[selected=true]:not(:-moz-lwtheme):before {
    clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end) !important;
    background-image: none !important;
}
这样试试
jywj108
小狐狸
小狐狸
  • UID37679
  • 注册日期2011-11-04
  • 最后登录2016-06-13
  • 发帖数35
  • 经验43枚
  • 威望0点
  • 贡献值34点
  • 好评度0点
5楼#
发布于:2014-10-27 23:07
jinke679:.tab-background-middle,
.tab-background-start:before,
.tab-background-end:before {
    background-color: #ebEBEB !imp...
回到原帖
灰常灰常感谢,代码很有效
翻个跟斗庆祝一下,嘿嘿……
ymails
小狐狸
小狐狸
  • UID49416
  • 注册日期2015-03-17
  • 最后登录2020-04-03
  • 发帖数2
  • 经验2枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
6楼#
发布于:2015-03-17 15:40
.tab-background-middle[selected=true],
.tab-background-start[selected=true]:before,
.tab-background-end[selected=true]:before {
    background-color: #75D3F2 !important;
}
      
      
.tab-background-start[selected=true]:before {
    clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start) !important;
    background-image: none !important;
}
      
.tab-background-middle[selected=true] {
  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),linear-gradient(transparent, transparent 2px, rgba(0,0,0,0)), none!important;
}
      
.tab-background-end[selected=true]:not(:-moz-lwtheme):before {
    clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end) !important;
    background-image: none !important;
}
为什么我的这个怎么差一点点?

知道了,把这个去掉就可以了
:not(:-moz-lwtheme)
游客

返回顶部