【实用】一组原创原生样式的基础控件、UI组件样式（偏向移动端H5页面的样式）
生活随笔
收集整理的這篇文章主要介紹了
【实用】一组原创原生样式的基础控件、UI组件样式（偏向移动端H5页面的样式）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?點擊查看效果
代碼直接復制就可以用了?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"><style>/*藍色按鈕----------------------------------------*/button {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;transition: .618s ease;cursor: pointer;height: 50px;width: 100%;border: 1px solid rgba(51, 100, 237, .35);color: #fff;font-size: 16px;font-weight: bold;border-radius: 3px;background: linear-gradient(180deg, #648CFF 0%, #4172FA 100%);box-shadow: 0 3px 4px 0 rgba(44, 71, 146, .32), inset 0 -2px 0 0 #3262e6;text-align: center;line-height: 46px;user-select: none;} button:hover {opacity: .9;box-shadow: none;} button:focus, button:active {outline: none;background: linear-gradient(180deg, #4d7bff, #154deb);transform: scale(.97);} button[disabled] {color: #fff;background: #b0c7ff;pointer-events: none;cursor: default;box-shadow: none;}/*白色按鈕----------------------------------------*/button[white] {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;transition: .618s ease;cursor: pointer;width: 100%;height: 50px;border: none;border-radius: 3px;font-size: 16px;font-weight: bold;color: #292f3a;letter-spacing: 0;outline: none;background: linear-gradient(-180deg, #fff 8%, #f2f2f7 97%);box-shadow: 0 2px 3px 0 rgba(44, 71, 146, .32), 0 -1px 1px 0 rgba(44, 71, 146, .1);} button[white]:hover {background: linear-gradient(-180deg, #f2f2f7 20%, #f2f2f7 97%);box-shadow: none;color: #3973ff;border: none;} button[white]:active, button[white]:active {background: #d8dde6;transform: scale(.97);} button[white][disabled] {background: rgba(216, 221, 230, .8) !important;pointer-events: none;cursor: default;color: white;box-shadow: none;}/*輸入框----------------------------------------*/input {transition: .618s ease;width: 100%;height: 40px;background: #fff;border-radius: 3px;padding: 10px;outline: none;font-size: 16px;color: #292f3a;letter-spacing: 0;line-height: 16px;box-sizing: border-box;border: 1px solid #c0c4cc;} input:hover {border-color: #909399;} input:focus, input:active {border-color: #3973ff;background: #f7f9fc;} input[disabled] {pointer-events: none;background: #f2f5fa;border: 1px solid #c0c4cc;} input[error] {border-color: #dd1a32;background: #ffeff1;} input[error]:focus, input[error]:active {color: #dd1a32;border-color: #ad0015;background: #dd1a3222;}/*下拉框----------------------------------------*/select {transition: .618s ease;width: 100%;height: 40px;font-size: 16px;color: #292f3a;letter-spacing: 0;line-height: 16px;border: 1px solid #c0c4cc;border-radius: 3px;background: #fff;outline: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: 10px 12px 10px 12px;cursor: pointer;} select:hover {border-color: #909399;} select:focus, select:active {border: 2px solid #3973ff;background: #f7f9fc;padding: 9px 11px 9px 11px;} select[disabled] {pointer-events: none;background: #f2f5fa;border: 1px solid #c0c4cc;}/*標簽----------------------------------------*/.tag {display: inline-block;position: relative;padding: 6px 12px;font-size: 14px;background: #e4e9f2;color: rgb(32, 17, 172);border-radius: 100px;cursor: default;}/*黑色氣泡框----------------------------------------*/.black-arrow-tip {position: relative;display: inline-block;padding: 10px 12px;max-width: 240px;border-radius: 3px;font-size: 12px;color: #fff;line-height: 12px;box-sizing: border-box;background: #292f3a;box-shadow: 0 2px 3px 0 rgba(41, 47, 58, .4);} .black-arrow-tip:after {content: "";position: absolute;left: -4px;top: 11px;display: block;width: 10px;height: 10px;border-radius: 2px;transform: rotate(45deg);background: #292f3a;box-shadow: 0 2px 3px 0 rgba(41, 47, 58, .4);}/*白色氣泡框----------------------------------------*/.white-arrow-tip {position: relative;display: inline-block;padding: 10px 12px;border-radius: 3px;max-width: 240px;font-size: 12px;color: #fff;line-height: 12px;background: #fff;box-shadow: 0 -1px 1px 0 rgba(216, 221, 230, .4), 0 2px 4px 0 #ccd0d9;color: rgba(41, 47, 58, .7);} .white-arrow-tip:after {content: "";position: absolute;left: -4px;top: 11px;display: block;width: 10px;height: 10px;background: #fff;box-shadow: -1px 2px 1px 0 rgba(41, 47, 58, .14);border-radius: 2px;transform: rotate(45deg);}/*普通提示----------------------------------------*/.normal-tip {display: inline-block;padding: 10px 12px;background: #525966;border-radius: 2px;font-size: 12px;color: hsla(0, 0%, 100%, .7);letter-spacing: 0;line-height: 12px;}/*關閉按鈕----------------------------------------*/.close-btn {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;width: 24px;height: 24px;font-size: 16px;cursor: pointer;display: inline-block;font-style: normal;position: relative;text-align: center;user-select: none;} .close-btn:after {content: "";position: absolute;margin-top: -21px;display: block;width: 100%;height: 100%;border-radius: 100%;background-color: rgba(0, 0, 0, .08);opacity: 0;transform: scale(.5);transition: all .2s cubic-bezier(.175, .885, .32, 1.275);} .close-btn:hover:after {opacity: 1;transform: scale(1.4);}/*卡片----------------------------------------*/.normal-card {border-radius: 8px;box-sizing: border-box;padding: 10px;margin: 10px;background: #fff;box-shadow: 0 2px 4px 0 #ccd0d9;} .card {border-radius: 8px;box-sizing: border-box;padding: 10px;margin: 10px;background: #fff;box-shadow: 0 -1px 3px 0 rgba(216, 221, 230, .3), 0 6px 12px 0 rgba(204, 208, 217, .8);} .large-card {border-radius: 8px;box-sizing: border-box;padding: 10px;margin: 10px;background: #fff;box-shadow: 0 12px 29px 0 #ccd0d9;}/*單選框----------------------------------------*/input[type="radio"] {width: 20px;height: 20px;transform: translateY(4px);}/*復選框----------------------------------------*/input[type="checkbox"] {width: 20px;height: 20px;transform: translateY(4px);}</style>
</head>
<body>
<button>藍色按鈕</button>
<br>
<br>
<button disabled>藍色按鈕（禁用）</button>
<br>
<br>
<button white>白色按鈕</button>
<br>
<br>
<button white disabled>白色按鈕（禁用）</button>
<br>
<br>
<input type="text" placeholder="請輸入…">
<br>
<br>
<input type="text" placeholder="請輸入必填項" error="">
<br>
<br>
<input type="text" placeholder="禁止輸入" disabled>
<br>
<br>
<select><option value="">選項1</option><option value="">選項2</option><option value="">選項3</option>
</select>
<br>
<br>
<select disabled><option value="">禁止選中</option>
</select>
<br>
<br>
<div class="tag">標簽文字</div>
<br>
<br>
<div class="black-arrow-tip">黑色氣泡框</div>
<br>
<br>
<div class="white-arrow-tip">白色氣泡框</div>
<br>
<br>
<div class="normal-tip">普通提示</div>
<br>
<br>
<i class="close-btn">?</i>
<br>
<div class="normal-card" style="width: 300px;height: 200px;">普通陰影卡片</div>
<br>
<div class="card" style="width: 300px;height: 200px;">正常陰影卡片</div>
<br>
<div class="large-card" style="width: 300px;height: 200px;">大面積陰影卡片</div>
<br>
<br>
<p>旋轉加載</p>
<svg data-v-b9c138e2="" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><path data-v-b9c138e2="" fill="#3973ff" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(332.128 25 25)"><animateTransform data-v-b9c138e2="" attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg><svg data-v-b9c138e2="" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><path data-v-b9c138e2="" fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(332.128 25 25)"><animateTransform data-v-b9c138e2="" attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg><button style="vertical-align:middle"><svg style="transform: translateY(5px);" data-v-b9c138e2="" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><pathdata-v-b9c138e2=""fill="#fff"d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(332.128 25 25)"><animateTransform data-v-b9c138e2="" attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg>loading...
</button>
<br>
<br>
<p>單選框</p>
<input type="radio" name="sex" value="1" checked>男 <input type="radio" name="sex" value="0">女
<br>
<br>
<p>復選框</p>
<input type="checkbox" id="interest-1" name="interest" value="1" checked><label for="interest-1">唱歌</label>
<input type="checkbox" id="interest-2" name="interest" value="2" ><label for="interest-2">跳舞</label>
<input type="checkbox" id="interest-3" name="interest" value="3" checked><label for="interest-3">游戲</label>
<input type="checkbox" id="interest-4" name="interest" value="4" ><label for="interest-4">旅游</label>
<input type="checkbox" id="interest-5" name="interest" value="5" ><label for="interest-5">書法</label>
<br>
<br>
</body>
</html>總結
以上是生活随笔為你收集整理的【实用】一组原创原生样式的基础控件、UI组件样式（偏向移动端H5页面的样式）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何用公式化思维？几个经典公式收集
- 下一篇： 【实用】一个移动端简单的UI弹窗组件，虽