百度贴吧超级会员图标样式

作者:飞流原创，未经许可，严禁转载！https://www.fllt.cn/t/1654/1/1

逛贴吧的时候看见百度贴吧的超级会员挺好看的，反手一个保存，结果是两张图组合的。
于是研究了一下，把样式放在这里吧

1. <!-- VIP 会员图标 --><div class="tooltip" style="height:15px; cursor:pointer; display:inline-block; vertical-align:middle;">
   
2.     <div class="icon_vipCom tooltip__reference" style="height:15px; width:48px; display:flex; align-items:center;">
   
3.         <img src="https://tieba-ares.cdn.bcebos.com/mis/2024-3/1709519665505/3ab806db4934.webp"
   
4.              class="icon_vipCom_shows_prefix"
   
5.              style="width:15px; height:15px; z-index:2;">
   
6.         <img src="https://tieba-ares.cdn.bcebos.com/mis/2024-3/1710248338248/be22e16ee144.png"
   
7.              class="icon_vipCom_shows"
   
8.              style="width:41px; height:15px; margin-left:-8px; z-index:1;">
   
9.     </div>
   
10. </div>
    
11. 
    
12. <style>
    
13. /* 提示框基础 */
    
14. .tooltip {
    
15.     display: inline-block;
    
16.     vertical-align: middle;
    
17. }
    
18. .tooltip__reference:focus:hover,
    
19. .tooltip__reference:focus:not(.focusing) {
    
20.     outline: 0;
    
21. }
    
22. 
    
23. /* 提示气泡 */
    
24. .tooltip__popper {
    
25.     position: absolute;
    
26.     border-radius: 4px;
    
27.     padding: 4px 6px;
    
28.     z-index: 9999;
    
29.     font-size: 12px;
    
30.     line-height: 1.2;
    
31.     color: #fff;
    
32.     background: #303133;
    
33.     word-wrap: break-word;
    
34. }
    
35. .tooltip__popper[x-placement^=top] { margin-bottom: 8px; }
    
36. .tooltip__popper[x-placement^=bottom] { margin-top: 8px; }
    
37. .tooltip__popper[x-placement^=left] { margin-right: 8px; }
    
38. .tooltip__popper[x-placement^=right] { margin-left: 8px; }
    
39. 
    
40. /* 气泡箭头 */
    
41. .popper__arrow,
    
42. .popper__arrow:after {
    
43.     position: absolute;
    
44.     width: 0;
    
45.     height: 0;
    
46.     border-color: transparent;
    
47.     border-style: solid;
    
48. }
    
49. .popper__arrow { border-width: 6px; }
    
50. .popper__arrow:after {
    
51.     content: "";
    
52.     border-width: 5px;
    
53. }
    
54. [x-placement^=top] .popper__arrow {
    
55.     bottom: -5px;
    
56.     border-top-color: #303133;
    
57.     border-bottom-width: 0;
    
58. }
    
59. [x-placement^=bottom] .popper__arrow {
    
60.     top: -5px;
    
61.     border-bottom-color: #303133;
    
62.     border-top-width: 0;
    
63. }
    
64. 
    
65. /* VIP 图标容器 */
    
66. .icon_vipCom {
    
67.     display: flex;
    
68.     align-items: center;
    
69.     margin-right: 4px;
    
70. }
    
71. .icon_vipCom_shows_prefix {
    
72.     z-index: 2;
    
73. }
    
74. .icon_vipCom_shows {
    
75.     z-index: 1;
    
76. }
    
77. 
    
78. /* 图片重置 */
    
79. img {
    
80.     border: none;
    
81.     vertical-align: top;
    
82. }
    
83. </style>

复制代码

【小飞侠提醒您：搜索时输入t1654代号，方便好记直达本帖！】