无忧启动论坛

标题: 求助CSS高手，代码修改 [打印本页]
作者: proof    时间: 昨天 10:40
标题: 求助CSS高手，代码修改
CSS代码，仿Chrome标签页(梯形标签页)，用于文件管理软件Tablacus Explorer。显示效果：

想做些改进，主要是区分各个“非当前页”、完善梯形形状、自定义各种背景颜色，如图：



最终理想样式：



CSS代码（待修改）
  1. .tab, .tab2, .tab3,
  2. .tab:hover, .tab2:hover, .tab3:hover {
  3.   box-shadow: none;
  4. }

  6. .tab0 {
  7.   padding: 3px 0 0 12px;
  8.   background-color: ActiveCaption;
  9. }

  11. .tab, .tab2, .tab3 {
  12.   position: relative;
  13.   background: transparent;
  14.   border: 0;
  15.   padding: 0 12px;
  16.   opacity: 1;
  17. }

  19. .activetab {
  20.   position: relative;
  21.   background-color: #fff;
  22.   border: 0;
  23.   padding: 0 2px;
  24.   margin: 0 10px;
  25.   height: 2em;
  26. }

  28. .activetab:before,
  29. .activetab:after {
  30.   content: "";
  31.   position: absolute;
  32.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M24%200C9%200%2015%2024%200%2024h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
  33.   bottom: 0;
  34.   width: 25px;
  35.   height: 24px;
  36. }
  37. .activetab:before {
  38.   left: -24px;
  39. }
  40. .activetab:after {
  41.   right: 1px;
  42.   transform: scaleX(-1);
  43.   transform-origin: right;
  44. }

  46. .tab:hover,
  47. .tab2:hover,
  48. .tab3:hover {
  49.   position: relative;
  50.   background-color: #d0e0e9;
  51.   border: 0;
  52.   padding: 0 2px;
  53.   margin: 0 10px;
  54. }

  56. .tab:hover:before,
  57. .tab:hover:after,
  58. .tab2:hover:before,
  59. .tab2:hover:after,
  60. .tab3:hover:before,
  61. .tab3:hover:after {
  62.   content: "";
  63.   position: absolute;
  64.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23d0e0e9%22%20d%3D%22M24%200C9%200%2015%2024%200%2024h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
  65.   bottom: 0;
  66.   width: 25px;
  67.   height: 24px;
  68. }
  69. .tab:hover:before,
  70. .tab2:hover:before,
  71. .tab3:hover:before {
  72.   left: -24px;
  73. }
  74. .tab:hover:after,
  75. .tab2:hover:after,
  76. .tab3:hover:after {
  77.   right: 1px;
  78.   transform: scaleX(-1);
  79.   transform-origin: right;
  80. }
复制代码



CSS代码源网页，有“仿Chrome标签页”和“仿FireFox标签页”两种代码，还有执行结果截图。
https://qiita.com/nocd5/items/af062f7b06d4cd3b8b18
https://tablacus.github.io/wiki/addons/usercss.html




作者: a66    时间: 昨天 11:28
供参考：

  1. /* 梯形标签页基础样式 */
  2. .tab,
  3. .tab2,
  4. .tab3 {
  5.   position: relative;
  6.   display: inline-block;
  7.   background-color: transparent;
  8.   border: 0;
  9.   padding: 0 12px;
  10.   height: 2em;
  11.   line-height: 2em;
  12.   margin: 0 10px;
  13.   color: #333;
  14.   font-size: 13px;
  15.   user-select: none;
  16.   cursor: pointer;
  17.   z-index: 1;
  18. }

  20. /* 左右梯形边框 */
  21. .tab:before, .tab:after,
  22. .tab2:before, .tab2:after,
  23. .tab3:before, .tab3:after {
  24.   content: "";
  25.   position: absolute;
  26.   bottom: 0;
  27.   width: 25px;
  28.   height: 24px;
  29.   background-size: 25px 24px;
  30. }

  32. /* 左侧梯形 */
  33. .tab:before,
  34. .tab2:before,
  35. .tab3:before {
  36.   left: -24px;
  37. }

  39. /* 右侧梯形 */
  40. .tab:after,
  41. .tab2:after,
  42. .tab3:after {
  43.   right: -1px;
  44.   transform: scaleX(-1);
  45.   transform-origin: right;
  46. }

  48. /* 当前页样式 */
  49. .activetab {
  50.   background-color: #fff;
  51.   z-index: 2;
  52. }

  54. .activetab:before,
  55. .activetab:after {
  56.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M24%200C9%200%2015%2024%200%2024h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
  57. }

  59. /* 鼠标悬停样式 */
  60. .tab:hover,
  61. .tab2:hover,
  62. .tab3:hover {
  63.   background-color: #d0e0e9;
  64.   z-index: 1;
  65. }

  67. .tab:hover:before, .tab:hover:after,
  68. .tab2:hover:before, .tab2:hover:after,
  69. .tab3:hover:before, .tab3:hover:after {
  70.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23d0e0e9%22%20d%3D%22M24%200C9%200%2015%2024%200%2024h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
  71. }

  73. /* 可选：支持不同背景颜色（通过类名） */
  74. .tab.color1 {
  75.   background-color: #f5f5f5;
  76. }
  77. .tab.color1:before, .tab.color1:after {
  78.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23f5f5f5%22%20d%3D%22M24%200C9%200%2015%2024%200%2024h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
  79. }

  81. .tab.color2 {
  82.   background-color: #e0f7fa;
  83. }
  84. .tab.color2:before, .tab.color2:after {
  85.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23e0f7fa%22%20d%3D%22M24%200C9%200%2015%2024%200%2024h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
  86. }

  88. .tab.color3 {
  89.   background-color: #fff8e1;
  90. }
  91. .tab.color3:before, .tab.color3:after {
  92.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23fff8e1%22%20d%3D%22M24%200C9%200%2015%2024%200%2024h25V0h-1z%22%2F%3E%3C%2Fsvg%3E");
  93. }
复制代码



作者: guong    时间: 昨天 13:27
来学习下
作者: 肉仔    时间: 昨天 14:55
来看看
作者: luoade    时间: 昨天 14:59
虽然看不懂但是还是要学习
作者: ashchen    时间: 昨天 15:45
进来学习一下。话说这个用AI可以轻轻松松吧
作者: misakayaho    时间: 昨天 16:21
学习一下
作者: cc2025    时间: 昨天 17:11
感谢分享
作者: longjiasand    时间: 昨天 17:13
AI经常搞不定。帮顶



欢迎光临 无忧启动论坛 (http://bbs.wuyou.net/) Powered by Discuz! X3.3