按钮样式库:buttons.css
1 /* vue */
2 [v-cloak]{display: none}
3
4 /* 滚动条 */
5 ::-webkit-scrollbar {
6 width: 6px;
7 height: 6px;
8 background-color: transparent;
9 }
10 ::-webkit-scrollbar-thumb {
11 background: linear-gradient(-90deg, rgba(215, 215, 215, 0.95), rgba(225, 228, 228, 0.95));
12 border-radius: 2px;
13 }
14 ::-webkit-scrollbar-track {
15 background-color: transparent;
16 }
17
18 /* 全局 */
19 /**
20 * -webkit-overflow-scrolling: touch; //有回弹效果
21 * -webkit-overflow-scrolling: auto; //滑到哪停到哪
22 **/
23 *{padding: 0;margin: 0;font-style: normal;outline: none;box-sizing: border-box;-webkit-overflow-scrolling: touch;-webkit-tap-highlight-color:transparent;}
24 ul,ol{list-style: none;}
25 a{text-decoration: none;}
26 table{border-collapse: collapse;}
27 html,body{position: relative;}
28
29 /* 定位 */
30 .por{position: relative;}
31 .poa{position: absolute;}
32 .pof{position: fixed;}
33 .left{left: 0;}
34 .top{top: 0;}
35 .right{right: 0;}
36 .bottom{bottom: 0;}
37 .left_50{left: 50%;}
38 .top_50{top: 50%;}
39 .right_50{right: 50%;}
40 .bottom_50{bottom: 50%;}
41 .transform_center{transform: translate(-50%,-50%);}
42 .transform_X{transform: translateX(-50%);}
43 .transform_Y{transform: translateY(-50%);}
44 .z-1{z-index: -1;}
45 .z0{z-index: 0;}
46 .z1{z-index: 1;}
47 .z2{z-index: 2;}
48 .z3{z-index: 3;}
49 .z4{z-index: 4;}
50 .z5{z-index: 5;}
51 .z6{z-index: 6;}
52 .z9999{z-index: 9999;}
53 .z99999{z-index: 99999;}
54
55 /* 浮动 */
56 .L{float: left;}
57 .R{float: right;}
58 .clear::before,
59 .clear::after{content: '';clear: both;display: block;}
60
61 /* 块级、文本元素 */
62 .inblock{display: inline-block;}
63 .grid{display: grid;}
64 .block{display: block;}
65 .inline{display: inline;}
66 .webkitbox{display: -webkit-box;}
67
68
69 /* 图片填充 */
70 .of_cover{object-fit: cover;}
71 .of_contain{object-fit: contain;}
72
73
74 /* 背景图片填充 */
75 .bgs_cover{background-size: cover;}
76 .bgp_center{background-position: center;}
77
78 /* 文本 */
79 .txt_normal{font-weight: 400;font-style: normal;}
80 .pointer{cursor: pointer;}
81 .txt_left{text-align: left;}
82 .txt_center{text-align: center;}
83 .txt_nowrap{white-space: nowrap;}
84 .txt_ellipsis{text-overflow: ellipsis;}
85 .txt_justify{text-align: justify;}
86 .b{font-weight: bolder;}
87 .middle{vertical-align: middle;}
88
89
90 /* 溢出 */
91 .overhidden{overflow: hidden;}
92 .overauto{overflow: auto;}
93 .overhidden-x{overflow-x: hidden;overflow-y: auto;}
94 .overhidden-y{overflow-y: hidden;overflow-x: auto;}
95
96 /* flex弹性布局 */
97 .flex{display: flex;}
98 .jc_start{justify-content: flex-start;}
99 .jc_center{justify-content: center;}
100 .jc_between{justify-content: space-between;}
101 .ai_center{align-items: center;}
102 .ai_end{align-items: flex-end;}
103 .flex1{flex: 1;}
104
105
106 /* border */
107 .border{border: 0;}
108 .border_l{border-left: 0;}
109 .border_t{border-top: 0;}
110 .border_r{border-right: 0;}
111 .border_b{border-bottom: 0;}
112
113 /* border-radius */
114 .radius1{border-radius: 1px;}
115 .radius2{border-radius: 2px;}
116 .radius3{border-radius: 3px;}
117 .radius4{border-radius: 4px;}
118 .radius5{border-radius: 5px;}
119 .radius6{border-radius: 6px;}
120 .radius7{border-radius: 7px;}
121 .radius8{border-radius: 8px;}
122 .radius9{border-radius: 9px;}
123 .radius10{border-radius: 10px;}
124 .radius_tl{border-top-left-radius: 0;}
125 .radius_tr{border-top-right-radius: 0;}
126 .radius_br{border-bottom-right-radius: 0;}
127 .radius_bl{border-bottom-left-radius: 0;}
128
129
130 /* font-size */
131 .f8{font-size: 8px;}
132 .f9{font-size: 9px;}
133 .f10{font-size: 10px;}
134 .f11{font-size: 11px;}
135 .f12{font-size: 12px;}
136 .f13{font-size: 13px;}
137 .f14{font-size: 14px;}
138 .f15{font-size: 15px;}
139 .f16{font-size: 16px;}
140 .f17{font-size: 17px;}
141 .f18{font-size: 18px;}
142 .f19{font-size: 19px;}
143 .f20{font-size: 20px;}
144
145
146 /* 宽度 */
147 .w_10{width: 10%;}
148 .w_20{width: 20%;}
149 .w_30{width: 30%;}
150 .w_333{width: 33.3%;}
151 .w_40{width: 40%;}
152 .w_50{width: 50%;}
153 .w_60{width: 60%;}
154 .w_70{width: 70%;}
155 .w_80{width: 80%;}
156 .w_90{width: 90%;}
157 .w_100{width: 100%;}
158 .w100{width: 100px;}
159
160 /* 高度 */
161 .h_10{height: 10%;}
162 .h_20{height: 20%;}
163 .h_30{height: 30%;}
164 .h_333{height: 33.3%;}
165 .h_40{height: 40%;}
166 .h_50{height: 50%;}
167 .h_60{height: 60%;}
168 .h_70{height: 70%;}
169 .h_80{height: 80%;}
170 .h_90{height: 90%;}
171 .h_100{height: 100%;}
172 .h100{height: 100px;}
173 .lh100{line-height: 100px;}
174
175
176 /* color */
177 .color333{color: #333;}
178 .color666{color: #666;}
179 .color999{color: #999;}
180 .colorccc{color: #ccc;}
181 .coloreee{color: #eee;}
182 .colorfff{color: #fff;}
183
184 /* background-color */
185 .bgcolor333{background-color: #333;}
186 .bgcolor666{background-color: #666;}
187 .bgcolor999{background-color: #999;}
188 .bgcolorccc{background-color: #ccc;}
189 .bgcoloreee{background-color: #eee;}
190 .bgcolorfff{background-color: #fff;}
191
192
193 /* opacity */
194 .opa0{opacity: 0;}
195 .opa1{opacity: 0.1;}
196 .opa2{opacity: 0.2;}
197 .opa3{opacity: 0.3;}
198 .opa4{opacity: 0.4;}
199 .opa5{opacity: 0.5;}
200 .opa6{opacity: 0.6;}
201 .opa7{opacity: 0.7;}
202 .opa8{opacity: 0.8;}
203 .opa9{opacity: 0.9;}
204
205 /* padding */
206 .pad10{padding: 10px;}
207 .pad15{padding: 15px;}
208 .pad20{padding: 20px;}
209 .pad24{padding: 24px;}
210 .pad30{padding: 30px;}
211 .pad{padding: 0;}
212 .pad_l{padding-left: 0;}
213 .pad_t{padding-top: 0;}
214 .pad_r{padding-right: 0;}
215 .pad_b{padding-bottom: 0;}
216
217 /* margin */
218 .mar_auto{margin: 0 auto;}
219 .mar10{margin: 10px;}
220 .mar15{margin: 15px;}
221 .mar20{margin: 20px;}
222 .mar24{margin: 24px;}
223 .mar30{margin: 30px;}
224 .mar{margin: 0;}
225 .mar_l{margin-left: 0;}
226 .mar_t{margin-top: 0;}
227 .mar_r{margin-right: 0;}
228 .mar_b{margin-bottom: 0;}
229
230 /* 解决ios-button圆角问题 */
231 .ios_btn{-webkit-appearance : none ;}