\u6765\u6e90 | https:\/\/segmentfault.com\/a\/1190000022019129<\/p>\n
\u8fd9\u7bc7\u6587\u7ae0\u4f1a\u8bb0\u5f55\u6211\u4eec\u5e73\u65f6\u5e38\u7528\u5230\u7684 CSS \u7247\u6bb5\uff0c\u4f7f\u7528\u8fd9\u4e9b CSS \u53ef\u4ee5\u5e2e\u52a9\u6211\u4eec\u89e3\u51b3\u8bb8\u591a\u5b9e\u9645\u9879\u76ee\u4e2d\u9047\u5230\u7684\u95ee\u9898\uff0c\u5f3a\u70c8\u5efa\u8bae\u70b9\u8d5e\u6536\u85cf\u518d\u770b\uff0c\u65b9\u4fbf\u65e5\u540e\u67e5\u627e\u3002<\/p>\n
\u6d6e\u52a8\u7ed9\u6211\u4eec\u7684\u4ee3\u7801\u5e26\u6765\u7684\u9ebb\u70e6\uff0c\u60f3\u5fc5\u4e0d\u9700\u8981\u591a\u8bf4\uff0c\u6211\u4eec\u4f1a\u7528\u5f88\u591a\u65b9\u5f0f\u6765\u907f\u514d\u8fd9\u79cd\u9ebb\u70e6\uff0c\u5176\u4e2d\u6211\u89c9\u5f97\u6700\u65b9\u4fbf\u4e5f\u662f\u517c\u5bb9\u6027\u6700\u597d\u7684\u4e00\u79cd\u662f\uff0c\u5728\u540c\u7ea7\u76ee\u5f55\u4e0b\u518d\u521b\u5efa\u4e00\u4e2a[java]<div style="clear:both;"><\/div>\uff1b[\/java]\u4e0d\u8fc7\u8fd9\u6837\u4f1a\u589e\u52a0\u5f88\u591a\u65e0\u7528\u7684\u4ee3\u7801\u3002\u6b64\u65f6\u6211\u4eec\u7528:after\u8fd9\u4e2a\u4f2a\u5143\u7d20\u6765\u89e3\u51b3\u6d6e\u52a8\u7684\u95ee\u9898\uff0c\u5982\u679c\u5f53\u524d\u5c42\u7ea7\u6709\u6d6e\u52a8\u5143\u7d20\uff0c\u90a3\u4e48\u5728\u5176\u7236\u7ea7\u6dfb\u52a0\u4e0a clearfix \u7c7b\u5373\u53ef\u3002
\n[java]\/\/ \u6e05\u9664\u6d6e\u52a8
\n.clearfix:after {
\n content: "\00A0";
\n display: block;
\n visibility: hidden;
\n width: 0;
\n height: 0;
\n clear: both;
\n font-size: 0;
\n line-height: 0;
\n overflow: hidden;
\n}
\n.clearfix {
\n zoom: 1;
\n}
\n[\/java]<\/p>\n
\u5728 css \u7684\u4e16\u754c\u91cc\u6c34\u5e73\u5c45\u4e2d\u6bd4\u5782\u76f4\u5c45\u4e2d\u6765\u7684\u7b80\u5355\u4e00\u4e9b\uff0c\u7ecf\u8fc7\u4e86\u591a\u5e74\u7684\u6f14\u5316\uff0c\u4f9d\u7136\u6ca1\u6709\u597d\u7684\u65b9\u5f0f\u6765\u8ba9\u5143\u7d20\u5782\u76f4\u5c45\u4e2d(\u5404\u79cd\u65b9\u5f0f\u5404\u6709\u4f18\u7f3a\u70b9\uff0c\u4f46\u90fd\u4e0d\u80fd\u8fbe\u5230\u517c\u5bb9\u6027\u597d\uff0c\u7834\u574f\u529b\u5c0f\u7684\u76ee\u6807)\uff0c\u4ee5\u4e0b\u662f\u51e0\u79cd\u5e38\u89c1\u7684\u5b9e\u73b0\u65b9\u5f0f
\n\u7edd\u5bf9\u5b9a\u4f4d\u65b9\u5f0f\u4e14\u5df2\u77e5\u5bbd\u9ad8
\n[java]position: absolute;
\ntop: 50%;
\nleft: 50%;
\nmargin-top: -3em;
\nmargin-left: -7em;
\nwidth: 14em;
\nheight: 6em;
\n\u7edd\u5bf9\u5b9a\u4f4d \uff0b \u672a\u77e5\u5bbd\u9ad8 \uff0b translate
\nposition: absolute;
\nleft: 50%;
\ntop: 50%;
\ntransform: translate(-50%, -50%);
\n\/\/\u9700\u8981\u8865\u5145\u6d4f\u89c8\u5668\u524d\u7f00
\nflex \u8f7b\u677e\u641e\u5b9a\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d(\u672a\u77e5\u5bbd\u9ad8)
\ndisplay: flex;
\nalign-items: center;
\njustify-content: center;
\n[\/java]<\/p>\n
\u5f53\u6587\u672c\u7684\u5185\u5bb9\u8d85\u51fa\u5bb9\u5668\u7684\u5bbd\u5ea6\u7684\u65f6\u5019\uff0c\u6211\u4eec\u5e0c\u671b\u5728\u5176\u9ed8\u8ba4\u6dfb\u52a0\u7701\u7565\u53f7\u4ee5\u8fbe\u5230\u63d0\u793a\u7528\u6237\u5185\u5bb9\u7701\u7565\u663e\u793a\u7684\u6548\u679c\u3002
\n\u5bbd\u5ea6\u56fa\u5b9a\uff0c\u9002\u5408\u5355\u884c\u663e\u793a…
\n[java]overflow: hidden;
\ntext-overflow: ellipsis;
\nwhite-space: nowrap;
\n\u5bbd\u5ea6\u4e0d\u56fa\u5b9a\uff0c\u9002\u5408\u591a\u884c\u4ee5\u53ca\u79fb\u52a8\u7aef\u663e\u793a
\noverflow: hidden;
\ntext-overflow: ellipsis;
\ndisplay: -webkit-box;
\n-webkit-line-clamp: 3;
\n-webkit-box-orient: vertical;
\n[\/java]<\/p>\n
\u5f53\u6211\u4eec\u5e0c\u671b\u7ed9\u6587\u672c\u5236\u9020\u4e00\u79cd\u6a21\u7cca\u6548\u679c\u611f\u89c9\u7684\u65f6\u5019\uff0c\u53ef\u4ee5\u8fd9\u6837\u505a
\n[java]color: transparent;
\ntext-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
\n[\/java]<\/p>\n
\u6211\u4eec\u6765\u5b9e\u73b0\u4e00\u4e2a\u975e\u5e38\u7b80\u6d01\u7684 loading \u6548\u679c
\n[java].loading:after {
\n display: inline-block;
\n overflow: hidden;
\n vertical-align: bottom;
\n content: "\\2026";
\n -webkit-animation: ellipsis 2s infinite;
\n}<\/p>\n
\/\/ \u52a8\u753b\u90e8\u5206
\n@-webkit-keyframes ellipsis {
\n from {
\n width: 2px;
\n }
\n to {
\n width: 15px;
\n }
\n}
\n[\/java]<\/p>\n
\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u5728\u7f51\u9875\u4e0a\u9009\u4e2d\u6587\u5b57\u7684\u65f6\u5019\uff0c\u4f1a\u7ed9\u9009\u4e2d\u7684\u90e8\u5206\u4e00\u4e2a\u6df1\u84dd\u8272\u80cc\u666f\u989c\u8272(\u53ef\u4ee5\u81ea\u5df1\u62ff\u8d77\u9f20\u6807\u8bd5\u8bd5)\uff0c\u5982\u679c\u6211\u4eec\u60f3\u81ea\u5df1\u5b9a\u5236\u88ab\u9009\u4e2d\u7684\u90e8\u5206\u7684\u6837\u5f0f\u5462\uff1f
\n[java]\/\/ \u6ce8\u610f\u53ea\u80fd\u4fee\u6539\u8fd9\u4e24\u4e2a\u5c5e\u6027 \u5b57\u4f53\u989c\u8272 \u9009\u4e2d\u80cc\u666f\u989c\u8272<\/p>\n
element::selection {
\n color: green;
\n background-color: pink;
\n}
\nelement::-moz-selection {
\n color: green;
\n background-color: pink;
\n}
\n[\/java]<\/p>\n
\u6709\u65f6\u5019\u6211\u4eec\u4f1a\u6709\u8fd9\u6837\u7684\u9700\u6c42\uff0c\u5728\u4e00\u4e2a\u5217\u8868\u5c55\u793a\u9875\u9762\uff0c\u6709\u4e00\u4e9b\u5217\u8868\u9879\u662f\u65b0\u6dfb\u52a0\u7684\u3001\u6216\u8005\u70ed\u5ea6\u6bd4\u8f83\u9ad8\u7684\uff0c\u5c31\u4f1a\u8981\u6c42\u5728\u5176\u4e0a\u9762\u6dfb\u52a0\u4e00\u4e2a\u8d34\u7eb8\u6548\u679c\u7684\u5c0f\u6761\u5c31\u50cf hexo \u9ed8\u8ba4\u535a\u5ba2\u7684 fork me on github \u90a3\u4e2a\u6548\u679c\u4e00\u6837\u3002
\n\u63a5\u4e0b\u6765\u6211\u4eec\u5f00\u59cb\u4e00\u6b65\u6b65\u5b8c\u6210\u6700\u5de6\u8fb9\u7684\u8fd9\u4e2a\u6548\u679c
\n[java]html
\n<div class="wrap">
\n <div class="ribbon">
\n <a href="#">Fork me on GitHub<\/a>
\n <\/div>
\n<\/div>
\ncss
\n\/* \u5916\u5c42\u5bb9\u5668\u51e0\u672c\u8bbe\u7f6e *\/
\n.wrap {
\n width: 160px;
\n height: 160px;
\n overflow: hidden;
\n position: relative;
\n background-color: #f3f3f3;
\n}<\/p>\n
.ribbon {
\n background-color: #a00;
\n overflow: hidden;
\n white-space: nowrap;
\n position: absolute;
\n \/* shadom *\/
\n -webkit-box-shadow: 0 0 10px #888;
\n -moz-box-shadow: 0 0 10px #888;
\n box-shadow: 0 0 10px #888;
\n \/* rotate *\/
\n -webkit-transform: rotate(-45deg);
\n -moz-transform: rotate(-45deg);
\n -ms-transform: rotate(-45deg);
\n -o-transform: rotate(-45deg);
\n transform: rotate(-45deg);
\n \/* position *\/
\n left: -50px;
\n top: 40px;
\n}<\/p>\n
.ribbon a {
\n border: 1px solid #faa;
\n color: #fff;
\n display: block;
\n font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;
\n margin: 1px 0;
\n padding: 10px 50px;
\n text-align: center;
\n text-decoration: none;
\n \/* shadow *\/
\n text-shadow: 0 0 5px #444;
\n}[\/java]<\/p>\n
\u5f53\u6211\u4eec\u7ed9\u90e8\u5206 input \u7c7b\u578b\u7684\u8bbe\u7f6e placeholder \u5c5e\u6027\u7684\u65f6\u5019\uff0c\u6709\u7684\u65f6\u5019\u9700\u8981\u4fee\u6539\u5176\u9ed8\u8ba4\u7684\u6837\u5f0f\u3002
\n[java]input::-webkit-input-placeholder {
\n color: green;
\n background-color: #f9f7f7;
\n font-size: 14px;
\n}
\ninput::-moz-input-placeholder {
\n color: green;
\n background-color: #f9f7f7;
\n font-size: 14px;
\n}
\ninput::-ms-input-placeholder {
\n color: green;
\n background-color: #f9f7f7;
\n font-size: 14px;
\n}
\n[\/java]<\/p>\n
\u5728\u79fb\u52a8\u7aef\u6d4f\u89c8\u5668\u4e0a\uff0c\u5f53\u4f60\u70b9\u51fb\u4e00\u4e2a\u94fe\u63a5\u6216\u8005\u901a\u8fc7 Javascript \u5b9a\u4e49\u7684\u53ef\u70b9\u51fb\u5143\u7d20\u7684\u65f6\u5019\uff0c\u4f1a\u51fa\u73b0\u84dd\u8272\u8fb9\u6846\uff0c\u8bf4\u5b9e\u8bdd\uff0c\u8fd9\u662f\u5f88\u6076\u5fc3\u7684\uff0c\u600e\u4e48\u53bb\u6389\u5462?
\n[java]-webkit-tap-highlight-color: rgba(255, 255, 255, 0);[\/java]<\/p>\n
\u8981\u5b9e\u73b0\u7c7b\u4f3c word \u4e2d\u9996\u5b57\u4e0b\u6c89\u7684\u6548\u679c\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u4ee3\u7801
\n[java]element:first-letter {
\n float: left;
\n color: green;
\n font-size: 30px;
\n}[\/java]<\/p>\n
\u5728\u5f88\u591a\u5730\u65b9\u6211\u4eec\u53ef\u4ee5\u7528\u5f97\u4e0a\u5c0f\u4e09\u89d2\uff0c\u63a5\u4e0b\u6765\u6211\u4eec\u753b\u4e00\u4e0b\u56db\u4e2a\u65b9\u5411\u7684\u4e09\u89d2\u5f62\u3002
\n[java].triangle {
\n \/* \u57fa\u7840\u6837\u5f0f *\/
\n border: solid 10px transparent;
\n}
\n\/*\u4e0b*\/
\n.triangle.bottom {
\n border-top-color: green;
\n}
\n\/*\u4e0a*\/
\n.triangle.top {
\n border-bottom-color: green;
\n}
\n\/*\u5de6*\/
\n.triangle.top {
\n border-right-color: green;
\n}
\n\/*\u53f3*\/
\n.triangle.top {
\n border-left-color: green;
\n}[\/java]
\n\u53ef\u4ee5\u770b\u51fa\u753b\u4e00\u4e2a\u5c0f\u4e09\u89d2\u975e\u5e38\u7b80\u5355\uff0c\u53ea\u8981\u4e24\u884c\u6837\u5f0f\u5c31\u53ef\u4ee5\u641e\u5b9a\uff0c\u5bf9\u4e8e\u65b9\u5411\u53ea\u8981\u60f3\u7740\u753b\u54ea\u4e2a\u65b9\u5411\u5219\u8bbe\u7f6e\u53cd\u65b9\u5411\u7684\u6837\u5f0f\u5c5e\u6027\u5c31\u53ef\u4ee5<\/p>\n
\u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u5e0c\u671b\u5728\u4ee5\u4e0b\u5143\u7d20\u8eab\u4e0a\u6dfb\u52a0\u9f20\u6807\u624b\u578b
\n[java]a
\nsubmit
\ninput[type="iamge"]
\ninput[type="button"]
\nbutton
\nlabel
\nselect
\na[href],
\ninput[type="submit"],
\ninput[type="image"],
\ninput[type="button"],
\nlabel[for],
\nselect,
\nbutton {
\n cursor: pointer;
\n}[\/java]<\/p>\n
\u5728\u8bbf\u95ee\u79fb\u52a8\u7f51\u7ad9\u65f6\uff0c\u4f60\u4f1a\u53d1\u73b0\uff0c\u5728\u9009\u4e2d\u7684\u5143\u7d20\u5468\u56f4\u4f1a\u51fa\u73b0\u4e00\u4e9b\u7070\u8272\u7684\u6846\u6846\uff0c\u4f7f\u7528\u4ee5\u4e0b\u4ee3\u7801\u5c4f\u853d\u8fd9\u79cd\u6837\u5f0f
\n[java]-webkit-touch-callout: none;
\n-webkit-user-select: none;
\n-khtml-user-select: none;
\n-moz-user-select: none;
\n-ms-user-select: none;
\nuser-select: none;[\/java]<\/p>\n
[java]pre\u3001code\u3001legend\u3001fieldset\u3001blockquote \u2026 \u7b49\u6807\u7b7e\u4e0d\u662f\u5f88\u5e38\u7528\uff0c\u6240\u4ee5\u5c31\u4e0d\u4e00\u4e00\u5217\u4e3e\uff0c\u5982\u679c\u9879\u76ee\u4e2d\u4f7f\u7528\u5230\uff0c\u53ef\u4ee5\u81ea\u5df1\u5355\u72ec\u5199
\nbody,
\np,
\nh1,
\nh2,
\nh3,
\nh4,
\nh5,
\nh6,
\ndl,
\ndd,
\nul,
\nol,
\nth,
\ntd,
\nbutton,
\nfigure,
\ninput,
\ntextarea,
\nform {
\n margin: 0;
\n padding: 0;
\n}
\n[\/java]<\/p>\n
\u4e0d\u540c\u6d4f\u89c8\u5668\u7684 input\u3001select\u3001textarea \u7684\u76d2\u5b50\u6a21\u578b\u5bbd\u5ea6\u8ba1\u7b97\u65b9\u5f0f\u4e0d\u540c\uff0c\u7edf\u4e00\u4e3a\u6700\u5e38\u89c1\u7684 content-box\u3002
\n[java]input,
\nselect,
\ntextarea {
\n -webkit-box-sizing: content-box;
\n -moz-box-sizing: content-box;
\n box-sizing: content-box;
\n}<\/p>\n
table {
\n \/*table \u76f8\u90bb\u5355\u5143\u683c\u7684\u8fb9\u6846\u95f4\u7684\u8ddd\u79bb\u8bbe\u7f6e\u4e3a 0*\/
\n border-spacing: 0;
\n \/*\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u7ed9 tr \u8bbe\u7f6e border \u6ca1\u6709\u6548\u679c\uff0c\u5982\u679c table \u8bbe\u7f6e\u4e86\u8fb9\u6846\u4e3a\u5408\u5e76\u6a21\u5f0f\uff1a\u300cborder-collapse: collapse;\u300d\u5c31\u53ef\u4ee5\u4e86*\/
\n border-collapse: collapse;
\n}
\n[\/java]<\/p>\n
[java]acronym\u3001fieldset \u2026 \u7b49\u5176\u4ed6\u6807\u7b7e\u4e0d\u662f\u5f88\u5e38\u7528\uff0c\u5c31\u4e0d\u4f1a\u4e00\u4e00\u5217\u4e3e\uff1b\u5982\u679c\u9879\u76ee\u4e2d\u7528\u5230\uff0c\u53ef\u4ee5\u81ea\u5df1\u5355\u72ec\u5199\u3002
\nimg,
\ninput,
\nbutton,
\ntextarea {
\n border: none;
\n -webkit-appearance: none;
\n}<\/p>\n
input {
\n \/*\u7531\u4e8e input \u9ed8\u8ba4\u4e0d\u7ee7\u627f\u7236\u5143\u7d20\u7684\u5c45\u4e2d\u6837\u5f0f\uff0c\u6240\u4ee5\u8bbe\u7f6e\uff1a\u300ctext-align: inherit\u300d*\/
\n text-align: inherit;
\n}<\/p>\n
textarea {
\n \/*textarea \u9ed8\u8ba4\u4e0d\u53ef\u4ee5\u653e\u7f29*\/
\n resize: none;
\n}[\/java]<\/p>\n
\u7531\u4e8e\u4ee5\u4e0b\u5143\u7d20\u7684\u90e8\u5206\u5c5e\u6027\u6ca1\u6709\u7ee7\u627f\u7236\u8282\u70b9\u6837\u5f0f\uff0c\u6240\u4ee5\u58f0\u660e\u8fd9\u4e9b\u5143\u7d20\u7684\u8fd9\u4e9b\u5c5e\u6027\u4e3a\u7236\u5143\u7d20\u7684\u5c5e\u6027\u3002
\n[java]a,
\nh1,
\nh2,
\nh3,
\nh4,
\nh5,
\nh6,
\ninput,
\nselect,
\nbutton,
\noption,
\ntextarea,
\noptgroup {
\n font-family: inherit;
\n font-size: inherit;
\n font-weight: inherit;
\n font-style: inherit;
\n line-height: inherit;
\n color: inherit;
\n outline: none;
\n}[\/java]<\/p>\n
\u53e6\u5916 del\u3001ins \u6807\u7b7e\u7684\u4e2d\u5212\u7ebf\u3001\u4e0b\u5212\u7ebf\u8fd8\u662f\u633a\u597d\u7684\uff0c\u5c31\u4e0d\u53bb\u6389
\n[java]a {
\n text-decoration: none;
\n}<\/p>\n
ol,
\nul {
\n \/*\u5f00\u53d1\u4e2d UI \u8bbe\u8ba1\u7684\u5217\u8868\u90fd\u662f\u548c\u539f\u751f\u7684\u6837\u5f0f\u5dee\u592a\u591a\uff0c\u6240\u4ee5\u76f4\u63a5\u7ed9\u53d6\u6d88 ol\uff0cul \u9ed8\u8ba4\u5217\u8868\u6837\u5f0f*\/
\n list-style: none;
\n}<\/p>\n
button,
\ninput[type="submit"],
\ninput[type="button"] {
\n \/*\u9f20\u6807\u7ecf\u8fc7\u662f\u300c\u5c0f\u624b\u300d\u5f62\u72b6\u8868\u793a\u53ef\u70b9\u51fb*\/
\n cursor: pointer;
\n}<\/p>\n
input::-moz-focus-inner {
\n \/*\u53d6\u6d88\u706b\u72d0\u6d4f\u89c8\u5668\u90e8\u5206\u7248\u672c input \u805a\u7126\u65f6\u9ed8\u8ba4\u7684\u300cpadding\u3001border\u300d*\/
\n padding: 0;
\n border: 0;
\n}[\/java]<\/p>\n
[java]input[type="number"] {
\n -moz-appearance: textfield;
\n}<\/p>\n
input[type="number"]::-webkit-inner-spin-button,
\ninput[type="number"]::-webkit-outer-spin-button {
\n margin: 0;
\n -webkit-appearance: none;
\n}[\/java]<\/p>\n
[java]input::-webkit-input-placeholder,
\ntextarea::-webkit-input-placeholder {
\n color: #999;
\n}<\/p>\n
input:-moz-placeholder,
\ntextarea:-moz-placeholder {
\n color: #999;
\n}<\/p>\n
input::-moz-placeholder,
\ntextarea::-moz-placeholder {
\n color: #999;
\n}<\/p>\n
input:-ms-input-placeholder,
\ntextarea:-ms-input-placeholder {
\n color: #999;
\n}<\/p>\n
template {
\n \/*\u7531\u4e8e\u90e8\u5206\u6d4f\u89c8 template \u4f1a\u663e\u793a\u51fa\u6765\uff0c\u6240\u4ee5\u8981\u9690*\/
\n display: none;
\n}<\/p>\n
position: fixed \u7684\u7f29\u5199
\n.pf {
\n position: fixed;
\n \/*chrome \u5185\u6838 \u6d4f\u89c8\u5668 position: fixed \u9632\u6b62\u6296\u52a8*\/
\n -webkit-transform: translateZ(0);
\n}[\/java]<\/p>\n
[java].middle {
\n position: absolute;
\n top: 0;
\n right: 0;
\n bottom: 0;
\n left: 0;
\n margin: auto;
\n}[\/java]<\/p>\n
[java].v-middle {
\n position: relative;
\n top: 50%;
\n -webkit-transform: -webkit-translateY(-50%);
\n -moz-transform: -moz-translateY(-50%);
\n -o-transform: -o-translateY(-50%);
\n transform: translateY(-50%);
\n}[\/java]<\/p>\n
[java].bb {
\n -webkit-box-sizing: border-box;
\n -moz-box-sizing: border-box;
\n box-sizing: border-box;
\n}
\n[\/java]<\/p>\n
[java].to {
\n overflow: hidden;
\n white-space: nowrap;
\n text-overflow: ellipsis;
\n}[\/java]<\/p>\n
\u4e0d\u540c\u7684\u6d4f\u89c8\u5668\u5bf9\u5404\u4e2a\u6807\u7b7e\u9ed8\u8ba4\u7684\u6837\u5f0f\u662f\u4e0d\u4e00\u6837\u7684\uff0c\u800c\u4e14\u6709\u65f6\u5019\u6211\u4eec\u4e5f\u4e0d\u60f3\u4f7f\u7528\u6d4f\u89c8\u5668\u7ed9\u51fa\u7684\u9ed8\u8ba4\u6837\u5f0f\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u7528 reset.css \u53bb\u6389\u5176\u9ed8\u8ba4\u6837\u5f0f
\n[java]body,
\nh1,
\nh2,
\nh3,
\nh4,
\nh5,
\nh6,
\nhr,
\np,
\nblockquote,
\ndl,
\ndt,
\ndd,
\nul,
\nol,
\nli,
\npre,
\nform,
\nfieldset,
\nlegend,
\nbutton,
\ninput,
\ntextarea,
\nth,
\ntd {
\n margin: 0;
\n padding: 0;
\n}
\nbody,
\nbutton,
\ninput,
\nselect,
\ntextarea {
\n font: 12px\/1.5 tahoma, arial, \\5b8b\\4f53;
\n}
\nh1,
\nh2,
\nh3,
\nh4,
\nh5,
\nh6 {
\n font-size: 100%;
\n}
\naddress,
\ncite,
\ndfn,
\nem,
\nvar {
\n font-style: normal;
\n}
\ncode,
\nkbd,
\npre,
\nsamp {
\n font-family: couriernew, courier, monospace;
\n}
\nsmall {
\n font-size: 12px;
\n}
\nul,
\nol {
\n list-style: none;
\n}
\na {
\n text-decoration: none;
\n}
\na:hover {
\n text-decoration: underline;
\n}
\nsup {
\n vertical-align: text-top;
\n}
\nsub {
\n vertical-align: text-bottom;
\n}
\nlegend {
\n color: #000;
\n}
\nfieldset,
\nimg {
\n border: 0;
\n}
\nbutton,
\ninput,
\nselect,
\ntextarea {
\n font-size: 100%;
\n}
\ntable {
\n border-collapse: collapse;
\n border-spacing: 0;
\n}
\n[\/java]<\/p>\n
[java]\/* \u5f3a\u5236\u4e0d\u6362\u884c *\/
\ndiv {
\n white-space: nowrap;
\n}<\/p>\n
\/* \u81ea\u52a8\u6362\u884c *\/
\ndiv {
\n word-wrap: break-word;
\n word-break: normal;
\n}<\/p>\n
\/* \u5f3a\u5236\u82f1\u6587\u5355\u8bcd\u65ad\u884c *\/
\ndiv {
\n word-break: break-all;
\n}[\/java]<\/p>\n
[java]table {
\n border: 1px solid #000;
\n padding: 0;
\n border-collapse: collapse;
\n table-layout: fixed;
\n margin-top: 10px;
\n}
\ntable td {
\n height: 30px;
\n border: 1px solid #000;
\n background: #fff;
\n font-size: 15px;
\n padding: 3px 3px 3px 8px;
\n color: #000;
\n width: 160px;
\n}[\/java]<\/p>\n
\u5f53\u6211\u4eec\u63d0\u524d\u77e5\u9053\u8981\u5c45\u4e2d\u5143\u7d20\u7684\u957f\u5ea6\u548c\u5bbd\u5ea6\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528\u8fd9\u79cd\u65b9\u5f0f\uff1a
\n[java].container {
\n position: relative;
\n width: 300px;
\n height: 200px;
\n border: 1px solid #333333;
\n}
\n.content {
\n background-color: #ccc;
\n width: 160px;
\n height: 100px;
\n position: absolute;
\n top: 50%;
\n left: 50%;
\n margin-left: -80px; \/* \u5bbd\u5ea6\u7684\u4e00\u534a *\/
\n margin-top: -50px; \/* \u9ad8\u5ea6\u7684\u4e00\u534a *\/
\n}
\n[\/java]<\/p>\n
\u5f53\u8981\u5c45\u4e2d\u7684\u5143\u7d20\u4e0d\u5b9a\u5bbd\u548c\u5b9a\u9ad8\u65f6\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528 transform \u6765\u8ba9\u5143\u7d20\u8fdb\u884c\u504f\u79fb\u3002
\n[java].container {
\n position: relative;
\n width: 300px;
\n height: 200px;
\n border: 1px solid #333333;
\n}
\n.content {
\n background-color: #ccc;
\n position: absolute;
\n top: 50%;
\n left: 50%;
\n transform: translate3d(-50%, -50%, 0);
\n text-align: center;
\n}[\/java]<\/p>\n
line-height\u5176\u5b9e\u662f\u884c\u9ad8\uff0c\u6211\u4eec\u53ef\u4ee5\u7528\u884c\u9ad8\u6765\u8c03\u6574\u5e03\u5c40\uff01
\n\u4e0d\u8fc7\u8fd9\u4e2a\u65b9\u6848\u6709\u4e00\u4e2a\u6bd4\u8f83\u5927\u7684\u7f3a\u70b9\u662f\uff1a\u6587\u6848\u5fc5\u987b\u662f\u5355\u884c\u7684\uff0c\u591a\u884c\u7684\u8bdd\uff0c\u8bbe\u7f6e\u7684\u884c\u9ad8\u5c31\u4f1a\u6709\u95ee\u9898\u3002
\n[java].container {
\n width: 300px;
\n height: 200px;
\n border: 1px solid #333333;
\n}
\n.content {
\n line-height: 200px;
\n}
\n[\/java]<\/p>\n
\u7ed9\u5bb9\u5668\u5143\u7d20\u8bbe\u7f6edisplay: table\uff0c\u5f53\u524d\u5143\u7d20\u8bbe\u7f6edisplay: table-cell\uff1a
\n[java].container {
\n width: 300px;
\n height: 200px;
\n border: 1px solid #333333;
\n display: table;
\n}
\n.content {
\n display: table-cell;
\n vertical-align: middle;
\n text-align: center;
\n}[\/java]<\/p>\n
\u6211\u4eec\u53ef\u4ee5\u7ed9\u7236\u7ea7\u5143\u7d20\u8bbe\u7f6e\u4e3adisplay: flex\uff0c\u5229\u7528 flex \u4e2d\u7684align-items\u548cjustify-content\u8bbe\u7f6e\u5782\u76f4\u65b9\u5411\u548c\u6c34\u5e73\u65b9\u5411\u7684\u5c45\u4e2d\u3002\u8fd9\u79cd\u65b9\u5f0f\u4e5f\u4e0d\u9650\u5236\u4e2d\u95f4\u5143\u7d20\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u3002
\n\u540c\u65f6\uff0cflex \u5e03\u5c40\u4e5f\u80fd\u66ff\u6362line-height\u65b9\u6848\u5728\u67d0\u4e9b Android \u673a\u578b\u4e2d\u6587\u5b57\u4e0d\u5c45\u4e2d\u7684\u95ee\u9898\u3002
\n[java].container {
\n width: 300px;
\n height: 200px;
\n border: 1px solid #333333;
\n display: flex;
\n align-items: center;
\n justify-content: center;
\n}
\n.content {
\n background-color: #ccc;
\n text-align: center;
\n}[\/java]<\/p>\n
\u4e00\u79cd\u5e38\u7528\u7684\u65b9\u5f0f\u662f\u628a\u5916\u5c42\u7684 div \u8bbe\u7f6e\u4e3a table-cell\uff1b\u7136\u540e\u8ba9\u5185\u90e8\u7684\u5143\u7d20\u4e0a\u4e0b\u5de6\u53f3\u5c45\u4e2d\u3002\u5f53\u7136\u4e5f\u8fd8\u6709\u4e00\u79cd\u65b9\u5f0f\uff0c\u5c31\u662f\u628a img \u5f53\u505a div\uff0c\u53c2\u8003 6 \u4e2d\u7684\u4ee3\u7801\u8fdb\u884c\u8bbe\u7f6e\u3002
\nCSS \u4ee3\u7801\u5982\u4e0b\uff1a
\n[java].content {
\n width: 400px;
\n height: 400px;
\n border: 1px solid #ccc;
\n text-align: center;
\n display: table-cell;
\n vertical-align: middle;
\n}
\nhtml \u4ee3\u7801\u5982\u4e0b\uff1a
\n<div class="content">
\n <img src=".\/4.jpg" alt="img" \/>
\n<\/div>[\/java]<\/p>\n
\u6211\u4eec\u7ecf\u5e38\u4f1a\u9047\u5230\u8fd9\u6837\u7684 UI \u9700\u6c42\uff0c\u5c31\u662f\u6807\u9898\u4e24\u8fb9\u6709\u4e24\u4e2a\u5c0f\u6a2a\u5c97\uff0c\u4e4b\u524d\u662f\u600e\u4e48\u5b9e\u73b0\u7684\u5462\uff1f\u6bd4\u5982\u7528\u4e2aborder-top\u5c5e\u6027\uff0c\u7136\u540e\u518d\u628a\u4e2d\u95f4\u7684\u6587\u5b57\u8fdb\u884c\u7edd\u5bf9\u5b9a\u4f4d\uff0c\u540c\u65f6\u7ed9\u8fd9\u4e2a\u6587\u5b57\u4e00\u4e2a\u80cc\u666f\u989c\u8272\uff0c\u628a\u4e2d\u95f4\u7684\u8fd9\u90e8\u5206\u76d6\u4f4f\u3002
\n\u73b0\u5728\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u4f2a\u5143\u7d20\u6765\u5b9e\u73b0\uff01
\n[java]<div class="title">\u6807\u9898<\/div>
\ntitle {
\n color: #e1767c;
\n font-size: 0.3rem;
\n position: relative;<\/p>\n
&:before,
\n &:after {
\n content: "";
\n position: absolute;
\n display: block;
\n left: 50%;
\n top: 50%;
\n -webkit-transform: translate3d(-50%, -50%, 0);
\n transform: translate3d(-50%, -50%, 0);
\n border-top: 0.02rem solid #e1767c;
\n width: 0.4rem;
\n }
\n &:before {
\n margin-left: -1.2rem;
\n }
\n &:after {
\n margin-left: 1.2rem;
\n }
\n}[\/java]<\/p>\n
border \u9664\u4e86\u4f5c\u4e3a\u7b80\u5355\u7684\u7ed8\u5236\u8fb9\u6846\u4ee5\u5916\uff0c\u8fd8\u53ef\u4ee5\u7ed8\u5236\u4e09\u89d2\u5f62\uff0c\u68af\u5f62\uff0c\u661f\u5f62\u7b49\u4efb\u610f\u7684\u591a\u8fb9\u5f62\uff0c\u4ee5\u4e0b\u4e3a\u7ed8\u5236\u7684\u4e24\u4e2a\u4e09\u89d2\u5f62\u548c\u68af\u5f62
\n<[java]div class="triangle1"><\/div>\n<div class="triangle2"><\/div>\n<div class="trapezoid"><\/div>\n.triangle1 {\n \/*\u9510\u89d2\u4e09\u89d2\u5f62*\/\n width: 0;\n height: 0;\n border-top: 50px solid transparent;\n border-bottom: 100px solid #249ff1;\n border-left: 30px solid transparent;\n border-right: 100px solid transparent;\n}\n.triangle2 {\n \/*\u76f4\u89d2\u4e09\u89d2\u5f62*\/\n width: 0;\n height: 0;\n border-top: 80px solid transparent;\n border-bottom: 80px solid #ff5b01;\n border-left: 50px solid #ff5b01;\n border-right: 50px solid transparent;\n}\n.trapezoid {\n \/*\u68af\u5f62*\/\n width: 0;\n height: 0;\n border-top: none;\n border-right: 80px solid transparent;\n border-bottom: 60px solid #13dbed;\n border-left: 80px solid #13dbed;\n}[\/java]\n\n\n\n
border-radius\u4e3b\u8981\u7528\u4e8e\u7ed8\u5236\u5706\u70b9\u3001\u5706\u5f62\u3001\u692d\u5706\u3001\u5706\u89d2\u77e9\u5f62\u7b49\u5f62\u72b6\uff0c\u4ee5\u4e0b\u4e3a\u7b80\u5355\u7ed8\u5236\u7684\u4e24\u4e2a\u56fe\u5f62\u3002
\n[java]<div class="circle"><\/div>
\n<div class="ellipse"><div><\/div><\/div>
\n.circle,
\n.ellipse {
\n width: 100px;
\n height: 100px;
\n background: #249ff1;
\n border-radius: 50%;
\n}
\n.ellipse {
\n width: 150px;
\n background: #ff9e01;
\n}[\/java]
\n\u4f46border-radius\u5c5e\u6027\u5b9e\u9645\u4e0a\u53ef\u4ee5\u8bbe\u7f6e\u6700\u591a 8 \u4e2a\u503c\uff0c\u901a\u8fc7\u6539\u53d8 8 \u4e2a\u503c\u53ef\u4ee5\u5f97\u5230\u8bb8\u591a\u610f\u60f3\u4e0d\u5230\u7684\u56fe\u50cf<\/p>\n
\u5bf9\u4e8ebox-shadow\uff0c\u5176\u5b8c\u6574\u7684\u58f0\u660e\u4e3abox-shadow: h-shadow v-shadow blur spread color inset,\u5404\u4e2a\u503c\u8868\u793a\u7684\u610f\u4e49\u5206\u522b\u4e3a\uff1as \u6c34\u5e73\u65b9\u5411\u7684\u504f\u79fb\uff0c\u5782\u76f4\u65b9\u5411\u7684\u4fbf\u5b9c\uff0c\u6a21\u7cca\u7684\u8ddd\u79bb\uff08\u7fbd\u5316\u503c\uff09\uff0c\u9634\u5f71\u7684\u5927\u5c0f\uff08\u4e0d\u8bbe\u7f6e\u6216\u4e3a 0 \u65f6\u9634\u5f71\u4e0e\u4e3b\u4f53\u7684\u5927\u5c0f\u4e00\u81f4\uff09\uff0c\u9634\u5f71\u7684\u989c\u8272\u548c\u662f\u5426\u4f7f\u7528\u5185\u9634\u5f71\u3002\u5b9e\u9645\u5e94\u7528\u65f6\u53ef\u4ee5\u63a5\u6536 3-6 \u4e2a\u503c\uff0c\u5bf9\u5e94\u5206\u522b\u5982\u4e0b\uff1a
\n3 \u4e2a\u503c\uff1ah-shadow v-shadow color
\n4 \u4e2a\u503c\uff1ah-shadow v-shadow blur color
\n5 \u4e2a\u503c\uff1ah-shadow v-shadow blur spread color
\n6 \u4e2a\u503c\uff1ah-shadow v-shadow blur spread color inset
\n\u540c\u65f6\uff0cborder-shadow\u63a5\u53d7\u7531\u591a\u4e2a\u4ee5\u4e0a\u5404\u79cd\u503c\u7ec4\u6210\u7684\u4ee5\u9017\u53f7\u5206\u9694\u7684\u503c\uff0c\u901a\u8fc7\u8fd9\u4e00\u7279\u6027\uff0c\u6211\u4eec\u53ef\u4ee5\u5b9e\u73b0\u5982\u591a\u91cd\u8fb9\u6846\u7684\u7b49\u6548\u679c\u3002\u4ee5\u4e0b\u6211\u4eec\u7528\u8be5\u5c5e\u6027\u6765\u5b9e\u73b0\u4e00\u4e2a\u5355\u6807\u7b7e\u4e14\u4e0d\u501f\u52a9\u4f2a\u5143\u7d20\u7684\u6dfb\u52a0\u56fe\u6807\u548c\u4ee3\u8868\u76ee\u6807\u7684\u7684\u56fe\u6807\u3002
\n[java]<div class="plus"><\/div>
\n<div class="target"><\/div>
\n.plus {
\n width: 30px;
\n height: 30px;
\n margin-left: 50px; \/*\u7531\u4e8ebox-shadow\u4e0d\u5360\u7a7a\u95f4\uff0c\u5e38\u5e38\u9700\u8981\u6dfb\u52a0margin\u6765\u6821\u6b63\u4f4d\u7f6e*\/
\n background: #000;
\n box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;
\n}
\n.target {
\n width: 30px;
\n height: 30px;
\n background: red;
\n border-radius: 50%;
\n margin-left: 50px;
\n box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;
\n}[\/java]<\/p>\n
CSS3 \u7684\u6e10\u53d8\u5c5e\u6027\u5341\u5206\u5f3a\u5927\uff0c\u7406\u8bba\u4e0a\u901a\u8fc7\u6e10\u53d8\u53ef\u4ee5\u7ed8\u5236\u51fa\u4efb\u4f55\u7684\u56fe\u5f62\uff0c\u6e10\u53d8\u7684\u7279\u6027\u548c\u4f7f\u7528\u8db3\u8db3\u53ef\u4ee5\u5199\u4e00\u7bc7\u957f\u6587\uff0c\u4ee5\u4e0b\u4e3a\u4e00\u4e2a\u4f8b\u5b50
\n[java]<div class="gradient"><\/div>
\n.gradient {
\n position: relative;
\n width: 300px;
\n height: 300px;
\n border-radius: 50%;
\n background-color: silver;
\n background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
\n linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(
\n 335deg,
\n #b00 23px,
\n transparent 23px
\n ), linear-gradient(155deg, #d00 23px, transparent 23px);
\n background-size: 58px 58px;
\n background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
\n}[\/java]<\/p>\n
[java].cup {
\n display: inline-block;
\n width: 0.9em;
\n height: 0.4em;
\n border: 0.25em solid;
\n border-bottom: 1.1em solid;
\n border-radius: 0 0 0.25em 0.25em;
\n}
\ncup:before {
\n position: absolute;
\n right: -0.6em;
\n top: 0;
\n width: 0.3em;
\n height: 0.8em;
\n border: 0.25em solid;
\n border-left: none;
\n border-radius: 0 0.25em 0.25em 0;
\n content: "";
\n}[\/java]<\/p>\n
[java].heart {
\n display: inline-block;
\n margin-top: 1.5em;
\n width: 50px;
\n height: 50px;
\n background: green;
\n}
\n.heart:before,
\n.heart:after {
\n position: absolute;
\n width: 1em;
\n height: 1.6em;
\n background: #000;
\n border-radius: 50% 50% 0 0;
\n content: "";
\n bottom: 0;
\n}
\n.heart:before {
\n -webkit-transform: rotate(45deg);
\n -webkit-transform-origin: 100% 100%;
\n right: 0;
\n background: red;
\n opacity: 0.5;
\n z-index: 5;
\n}
\n.:after {
\n -webkit-transform: rotate(-45deg);
\n -webkit-transform-origin: 0 100%;
\n left: 0;
\n opacity: 0.8;
\n}[\/java]<\/p>\n
[java].camera {
\n display: inline-block;
\n border-style: solid;
\n border-width: 0.65em 0.9em;
\n border-radius: 0.1em;
\n}
\n.camera:before {
\n position: absolute;
\n top: -0.3em;
\n left: -0.3em;
\n width: 0.4em;
\n height: 0.4em;
\n border-radius: 50%;
\n border: 0.1em solid #fff;
\n box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;
\n content: "";
\n}
\n.camera:after {
\n position: absolute;
\n top: -0.5em;
\n left: 0.5em;
\n width: 0.2em;
\n border-top: 0.125em solid #fff;
\n content: "";[\/java]
\n}<\/p>\n
[java].moon {
\n display: inline-block;
\n height: 1.5em;
\n width: 1.5em;
\n box-shadow: inset -0.4em 0 0;
\n border-radius: 2em;
\n transform: rotate(20deg);
\n}[\/java]<\/p>\n
\u5e38\u89c4\u6d6e\u52a8 list \u6d6e\u52a8 image \u6d6e\u52a8
\n[java].float-left {
\n float: left;
\n}
\n.float-right {
\n float: right;
\n}
\n.float-li li,\/*\u5b9a\u4e49\u5230li\u7236\u5143\u7d20\u6216\u7956\u5148\u5143\u7d20\u4e0a*\/ li.float-li {
\n float: left;
\n}
\n.float-img img,\/*\u5b9a\u4e49\u5230img\u7236\u5143\u7d20\u6216\u7956\u5148\u5143\u7d20\u4e0a*\/ img.float-li {
\n float: left;
\n}
\n.float-span span,\/*\u5b9a\u4e49\u5230span\u7236\u5143\u7d20\u6216\u7956\u5148\u5143\u7d20\u4e0a*\/ span.float-span {
\n float: right;
\n}[\/java]<\/p>\n
[java].bg-img {
\n background-image: url("..\/img\/bg.png");
\n background-position: center top;
\n background-repeat: no-repeat;
\n}
\n.bg01-img {
\n background-image: url("..\/img\/bg01.png");
\n background-position: center top;
\n background-repeat: no-repeat;
\n}
\n.bg02-img {
\n background-image: url("..\/img\/bg02.png");
\n background-position: center top;
\n background-repeat: no-repeat;
\n}
\n.bg03-img {
\n background-image: url("..\/img\/bg03.png");
\n background-position: center top;
\n background-repeat: no-repeat;
\n}
\n.bg04-img {
\n background-image: url("..\/img\/bg04.png");
\n background-position: center top;
\n background-repeat: no-repeat;
\n}[\/java]<\/p>\n
[java].inherit-width {
\n width: inherit;
\n}
\n.inherit-min-width {
\n min-width: inherit;
\n}
\n.inherit-height {
\n height: inherit;
\n}
\n.inherit-min-height {
\n min-height: inherit;
\n}
\n.inherit-color {
\n color: inherit;
\n}[\/java]<\/p>\n
[java].text-indent {
\n text-indent: 2rem;
\n}
\n\/*16px*\/
\n.text-indent-xs {
\n text-indent: 1.5rem;
\n}
\n\/*12px*\/
\n.text-indent-sm {
\n text-indent: 1.7rem;
\n}
\n\/*14px*\/
\n.text-indent-md {
\n text-indent: 2rem;
\n}
\n\/*18px*\/
\n.text-indent-lg {
\n text-indent: 2.4rem;
\n}
\n\/*20px*\/[\/java]<\/p>\n
[java].line-height-xs {
\n line-height: 1.3rem;
\n}
\n.line-height-sm {
\n line-height: 1.5rem;
\n}
\n.line-height-md {
\n line-height: 1.7rem;
\n}
\n.line-height-lg {
\n line-height: 2rem;
\n}<\/p>\n
.line-height-25x {
\n line-height: 25px;
\n}
\n.line-height-30x {
\n line-height: 30px;
\n}
\n[\/java]<\/p>\n
[java].ul-indent-xs {
\n margin-left: 0.5rem;
\n}
\n.ul-indent-sm {
\n margin-left: 1rem;
\n}
\n.ul-indent-md {
\n margin-left: 1.5rem;
\n}
\n.ul-indent-lg {
\n margin-left: 2rem;
\n}
\n.ol-list,
\n.ul-list {
\n list-style: disc;
\n}[\/java]<\/p>\n
[java].truncate {
\n max-width: 100%;
\n overflow: hidden;
\n text-overflow: ellipsis;
\n white-space: nowrap;
\n}
\n.hide {
\n display: none;
\n}[\/java]<\/p>\n
[java].img-max,
\n.video-max {
\n width: 100%;
\n height: auto;
\n}
\n\/*display\u663e\u793a\u65b9\u5f0f*\/
\n.inline {
\n display: inline;
\n}
\n.inline-block {
\n display: inline-block;
\n}
\n.block {
\n display: block;
\n}[\/java]<\/p>\n
[java].border-xs-black {
\n border: 1px solid #000;
\n}
\n.border-sm-black {
\n border: 2px solid #000;
\n}
\n.border-md-black {
\n border: 3px solid #000;
\n}
\n.border-lg-black {
\n border: 5px solid #000;
\n}<\/p>\n
.border-xs-gray {
\n border: 1px solid #9c9c9c;
\n}
\n.border-sm-gray {
\n border: 2px solid #9c9c9c;
\n}
\n.border-md-gray {
\n border: 3px solid #9c9c9c;
\n}
\n.border-lg-gray {
\n border: 5px solid #9c9c9c;
\n}[\/java]<\/p>\n
[java].bg-white {
\n background: #fff !important;
\n}
\n.bg-black {
\n background: #1b1c1d !important;
\n}
\n.bg-gray {
\n background: #767676 !important;
\n}
\n.bg-light-gray {
\n background: #f8f7f7 !important;
\n}
\n.bg-yellow {
\n background: #fbbd08 !important;
\n}
\n.bg-orange {
\n background: #f2711c !important;
\n}
\n.bg-red {
\n background: #db2828 !important;
\n}
\n.bg-olive {
\n background: #b5cc18 !important;
\n}
\n.bg-green {
\n background: #21ba45 !important;
\n}
\n.bg-teal {
\n background: #00b5ad !important;
\n}
\n.bg-darkGreen {
\n background: #19a97b !important;
\n}
\n.bg-threeGreen {
\n background: #097c25 !important;
\n}
\n.bg-blue {
\n background: #2185d0 !important;
\n}
\n.bg-violet {
\n background: #6435c9 !important;
\n}
\n.bg-purple {
\n background: #a333c8 !important;
\n}
\n.bg-brown {
\n background: #a5673f !important;
\n}[\/java]<\/p>\n
[java]hr,
\n.hr-xs-Silver,
\n.hr-sm-black,
\n.hr-sm-Silver,
\n.hr-xs-gray,
\n.hr-sm-gray {
\n margin: 20px 0;
\n}
\nhr {
\n border: none;
\n border-top: 1px solid #000;
\n}
\n.hr-xs-Silver {
\n border: none;
\n border-top: 1px solid #c0c0c0;
\n}
\n.hr-sm-black {
\n border: none;
\n border-top: 2px solid #000;
\n}
\n.hr-sm-Silver {
\n border: none;
\n border-top: 2px solid #c0c0c0;
\n}
\n.hr-xs-gray {
\n border: none;
\n border-top: 1px solid #767676;
\n}
\n.hr-sm-gray {
\n border: none;
\n border-top: 2px solid #767676;
\n}[\/java]<\/p>\n
[java].hover-red a:hover,\/*\u4e3aa\u6807\u7b7e\u7956\u5148\u5143\u7d20\u6dfb\u52a0\u7c7b\u540d \u9ed8\u8ba4\u65e0\u667a\u80fd\u63d0\u9192*\/ a.hover-red:hover {
\n color: red;
\n} \/*\u5355\u72ec\u4e3aa\u6807\u7b7e\u6dfb\u52a0\u7c7b\u540d*\/
\n.hover-yellow a:hover,\/*\u4e3aa\u6807\u7b7e\u7956\u5148\u5143\u7d20\u6dfb\u52a0\u7c7b\u540d \u9ed8\u8ba4\u65e0\u667a\u80fd\u63d0\u9192*\/ a.hover-yellow:hover {
\n color: #ffd700;
\n} \/*\u5355\u72ec\u4e3aa\u6807\u7b7e\u6dfb\u52a0\u7c7b\u540d*\/
\n.hover-green a:hover,\/*\u4e3aa\u6807\u7b7e\u7956\u5148\u5143\u7d20\u6dfb\u52a0\u7c7b\u540d \u9ed8\u8ba4\u65e0\u667a\u80fd\u63d0\u9192*\/ a.hover-green:hover {
\n color: #70aa39;
\n} \/*\u5355\u72ec\u4e3aa\u6807\u7b7e\u6dfb\u52a0\u7c7b\u540d*\/
\n.hover-blue a:hover,\/*\u4e3aa\u6807\u7b7e\u7956\u5148\u5143\u7d20\u6dfb\u52a0\u7c7b\u540d \u9ed8\u8ba4\u65e0\u667a\u80fd\u63d0\u9192*\/ a.hover-blue:hover {
\n color: blue;
\n} \/*\u5355\u72ec\u4e3aa\u6807\u7b7e\u6dfb\u52a0\u7c7b\u540d*\/
\n.hover-gray a:hover,\/*\u4e3aa\u6807\u7b7e\u7956\u5148\u5143\u7d20\u6dfb\u52a0\u7c7b\u540d \u9ed8\u8ba4\u65e0\u667a\u80fd\u63d0\u9192*\/ a.hover-gray:hover {
\n color: #9c9c9c;
\n} \/*\u5355\u72ec\u4e3aa\u6807\u7b7e\u6dfb\u52a0\u7c7b\u540d*\/
\n.underline a:hover,
\na.underline:hover {
\n text-decoration: underline;
\n}<\/p>\n
[\/java]<\/p>\n
[java].shadow-text-xs {
\n text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);
\n} \/*\u667a\u80fd\u517c\u5bb9ie10\u4ee5\u4e0a \u6682\u4e0d\u8003\u8651*\/<\/p>\n
.shadow-xs {
\n -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color=’#cccccc’)"; \/* For IE 8 *\/
\n filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color=’#cccccc’); \/* For IE 5.5 – 7 *\/
\n -moz-box-shadow: 1px 1px 2px #cccccc; \/* for firefox *\/
\n -webkit-box-shadow: 1px 1px 2px #cccccc; \/* for safari or chrome *\/
\n box-shadow: 1px 1px 2px #cccccc; \/* for opera or ie9 *\/
\n}
\n.shadow-sm {
\n -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color=’#cccccc’)"; \/* For IE 8 *\/
\n filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color=’#cccccc’); \/* For IE 5.5 – 7 *\/
\n -moz-box-shadow: 2px 2px 3px #cccccc; \/* for firefox *\/
\n -webkit-box-shadow: 2px 2px 3px #cccccc; \/* for safari or chrome *\/
\n box-shadow: 2px 2px 3px #cccccc; \/* for opera or ie9 *\/
\n}
\n.shadow-md {
\n -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color=’#cccccc’)"; \/* For IE 8 *\/
\n filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color=’#cccccc’); \/* For IE 5.5 – 7 *\/
\n -moz-box-shadow: 3px 3px 5px #cccccc; \/* for firefox *\/
\n -webkit-box-shadow: 3px 3px 5px #cccccc; \/* for safari or chrome *\/
\n box-shadow: 3px 3px 5px #cccccc; \/* for opera or ie9 *\/
\n}
\n.shadow-lg {
\n -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color=’#cccccc’)"; \/* For IE 8 *\/
\n filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color=’#cccccc’); \/* For IE 5.5 – 7 *\/
\n -moz-box-shadow: 5px 5px 8px #cccccc; \/* for firefox *\/
\n -webkit-box-shadow: 5px 5px 8px #cccccc; \/* for safari or chrome *\/
\n box-shadow: 5px 5px 8px #cccccc; \/* for opera or ie9 *\/
\n}[\/java]<\/p>\n
[java].border-radius-xs {
\n -webkit-border-radius: 3px;
\n -moz-border-radius: 3px;
\n border-radius: 3px;
\n}
\n.border-radius-sm {
\n -webkit-border-radius: 5px;
\n -moz-border-radius: 5px;
\n border-radius: 5px;
\n}
\n.border-radius-md {
\n -webkit-border-radius: 7px;
\n -moz-border-radius: 5px;
\n border-radius: 5px;
\n}
\n.border-radius-lg {
\n -webkit-border-radius: 9px;
\n -moz-border-radius: 9px;
\n border-radius: 9px;
\n}[\/java]<\/p>\n","protected":false},"excerpt":{"rendered":"
\u6765\u6e90 | https:\/\/segmentfault.com\/a\/1190000022019129 \u8fd9\u7bc7\u6587\u7ae0\u4f1a\u8bb0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[109,105],"tags":[],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2451"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2451"}],"version-history":[{"count":2,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2451\/revisions"}],"predecessor-version":[{"id":2453,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2451\/revisions\/2453"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}