按钮样式库：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 ;}