{"id":2451,"date":"2020-03-22T19:52:45","date_gmt":"2020-03-22T11:52:45","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2451"},"modified":"2026-08-18T12:35:24","modified_gmt":"2026-08-18T04:35:24","slug":"55-%e4%b8%aa%e6%8f%90%e9%ab%98%e4%bd%a0-css-%e5%bc%80%e5%8f%91%e6%95%88%e7%8e%87%e7%9a%84%e5%bf%85%e5%a4%87%e7%89%87%e6%ae%b5","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2451","title":{"rendered":"55 \u4e2a\u63d0\u9ad8\u4f60 CSS \u5f00\u53d1\u6548\u7387\u7684\u5fc5\u5907\u7247\u6bb5"},"content":{"rendered":"
\n

\u628a\u5e73\u65f6\u6700\u5e38\u7528\u7684 55 \u4e2a CSS \u7247\u6bb5<\/strong> \u6536\u6210\u4e00\u4efd\u901f\u67e5\uff1a\u6e05\u6d6e\u52a8\u3001\u5c45\u4e2d\u3001\u7701\u7565\u53f7\u3001loading\u3001\u5c0f\u4e09\u89d2\uff0c\u4e00\u76f4\u5230\u9634\u5f71\u548c\u5706\u89d2\u3002\u6765\u6e90\uff1ahttps:\/\/segmentfault.com\/a\/1190000022019129 \u3002<\/p>\n

\u6bcf\u4e2a\u7247\u6bb5\u4fdd\u7559\u5b8c\u6574\u58f0\u660e\uff08\u542b\u5f53\u65f6\u7684\u6d4f\u89c8\u5668\u524d\u7f00\uff09\u3002\u9700\u8981\u65f6\u6309\u6807\u9898\u8df3\u8f6c\u5373\u53ef\uff0c\u4e0d\u5fc5\u6574\u9875\u80cc\u4e0b\u6765\u3002<\/p>\n

\u5e03\u5c40\u7c7b\uff08clearfix \/ flex \/ \u7edd\u5bf9\u5b9a\u4f4d\u5c45\u4e2d\uff09\u548c\u7ed8\u5236\u7c7b\uff08border-radius \/ box-shadow \/ \u7eaf CSS \u56fe\u6807\uff09\u53ef\u4ee5\u5206\u5f00\u8bb0\u3002<\/p>\n\n\n\n\n\n\n\n\n\n
\u573a\u666f<\/th>\n\u7247\u6bb5<\/th>\n\u5173\u952e\u8bcd<\/th>\n<\/tr>\n<\/thead>\n
\u6e05\u9664 \/ \u91cd\u7f6e<\/td>\nclearfix\u3001margin\/padding\u3001outline<\/td>\n:after + zoom<\/td>\n<\/tr>\n
\u5c45\u4e2d<\/td>\n\u7edd\u5bf9\u5b9a\u4f4d\u3001translate\u3001flex<\/td>\n\u5df2\u77e5\u5bbd\u9ad8 vs \u672a\u77e5\u5bbd\u9ad8<\/td>\n<\/tr>\n
\u6587\u672c<\/td>\nellipsis\u3001\u9996\u5b57\u4e0b\u6c89\u3001\u6a21\u7cca\u3001\u9009\u4e2d\u8272<\/td>\n\u5355\u884c nowrap \/ \u591a\u884c -webkit-line-clamp<\/td>\n<\/tr>\n
\u7ed8\u5236<\/td>\n\u5c0f\u4e09\u89d2\u3001\u8d34\u7eb8\u3001\u676f\u5b50\/\u5fc3\u5f62\/\u6708\u4eae<\/td>\nborder \/ radius \/ shadow \/ \u6e10\u53d8<\/td>\n<\/tr>\n
\u4ea4\u4e92<\/td>\n\u624b\u578b\u3001placeholder\u3001hover\u3001\u9634\u5f71\u5706\u89d2<\/td>\n\u79fb\u52a8\u7aef\u53bb\u9ad8\u4eae<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\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

\u6e05\u9664\u6d6e\u52a8<\/h2>\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<\/p>\n

<div style=\"clear:both;\"><\/div>\uff1b<\/code><\/pre>\n
\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<\/p>\n
\/\/ \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}<\/code><\/pre>\n
\u5782\u76f4\u6c34\u5e73\u5c45\u4e2d<\/h2>\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 \u7edd\u5bf9\u5b9a\u4f4d\u65b9\u5f0f\u4e14\u5df2\u77e5\u5bbd\u9ad8<\/p>\n
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;<\/code><\/pre>\n
\u6587\u672c\u672b\u5c3e\u6dfb\u52a0\u7701\u7565\u53f7<\/h2>\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 \u5bbd\u5ea6\u56fa\u5b9a\uff0c\u9002\u5408\u5355\u884c\u663e\u793a…<\/p>\n
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;<\/code><\/pre>\n
\u5236\u9020\u6587\u672c\u7684\u6a21\u7cca\u6548\u679c<\/h2>\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<\/p>\n
color: transparent;\ntext-shadow: 0 0 2px rgba(0, 0, 0, 0.5);<\/code><\/pre>\n
\u52a8\u753b\u5b9e\u73b0\u7b80\u6d01 loading \u6548\u679c<\/h2>\n
\u6211\u4eec\u6765\u5b9e\u73b0\u4e00\u4e2a\u975e\u5e38\u7b80\u6d01\u7684 loading \u6548\u679c<\/p>\n
.loading:after {\n  display: inline-block;\n  overflow: hidden;\n  vertical-align: bottom;\n  content: \"\\2026\";\n  -webkit-animation: ellipsis 2s infinite;\n}\n\n\/\/ \u52a8\u753b\u90e8\u5206\n@-webkit-keyframes ellipsis {\n  from {\n    width: 2px;\n  }\n  to {\n    width: 15px;\n  }\n}<\/code><\/pre>\n
\u81ea\u5b9a\u4e49\u6587\u672c\u9009\u4e2d\u6837\u5f0f<\/h2>\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<\/p>\n
\/\/ \u6ce8\u610f\u53ea\u80fd\u4fee\u6539\u8fd9\u4e24\u4e2a\u5c5e\u6027 \u5b57\u4f53\u989c\u8272 \u9009\u4e2d\u80cc\u666f\u989c\u8272\n\nelement::selection {\n  color: green;\n  background-color: pink;\n}\nelement::-moz-selection {\n  color: green;\n  background-color: pink;\n}<\/code><\/pre>\n
\u9876\u89d2\u8d34\u7eb8\u6548\u679c<\/h2>\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 \u63a5\u4e0b\u6765\u6211\u4eec\u5f00\u59cb\u4e00\u6b65\u6b65\u5b8c\u6210\u6700\u5de6\u8fb9\u7684\u8fd9\u4e2a\u6548\u679c<\/p>\n
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}\n\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}\n\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}<\/code><\/pre>\n
input \u5360\u4f4d\u7b26<\/h2>\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<\/p>\n
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}<\/code><\/pre>\n
\u79fb\u52a8\u7aef\u53ef\u70b9\u51fb\u5143\u7d20\u53bb\u5904\u9ed8\u8ba4\u8fb9\u6846<\/h2>\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?<\/p>\n
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);<\/code><\/pre>\n
\u9996\u5b57\u4e0b\u6c89<\/h2>\n
\u8981\u5b9e\u73b0\u7c7b\u4f3c word \u4e2d\u9996\u5b57\u4e0b\u6c89\u7684\u6548\u679c\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u4ee3\u7801<\/p>\n
element:first-letter {\n  float: left;\n  color: green;\n  font-size: 30px;\n}<\/code><\/pre>\n
\u5c0f\u4e09\u89d2<\/h2>\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<\/p>\n
.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}<\/code><\/pre>\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
\u9f20\u6807\u624b\u578b<\/h2>\n
\u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u5e0c\u671b\u5728\u4ee5\u4e0b\u5143\u7d20\u8eab\u4e0a\u6dfb\u52a0\u9f20\u6807\u624b\u578b<\/p>\n
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}<\/code><\/pre>\n
\u5c4f\u853d Webkit \u79fb\u52a8\u6d4f\u89c8\u5668\u4e2d\u5143\u7d20\u9ad8\u4eae\u6548\u679c<\/h2>\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<\/p>\n
-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;<\/code><\/pre>\n
\u79fb\u9664\u5e38\u7528\u6807\u7b7e\u7684\u6d4f\u89c8\u5668\u9ed8\u8ba4\u7684 margin \u548c padding<\/h2>\n
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}<\/code><\/pre>\n
\u7edf\u4e00 input\u3001select\u3001textarea \u5bbd\u5ea6<\/h2>\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<\/p>\n
input,\nselect,\ntextarea {\n  -webkit-box-sizing: content-box;\n  -moz-box-sizing: content-box;\n  box-sizing: content-box;\n}\n\ntable {\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}<\/code><\/pre>\n
\u79fb\u9664\u6d4f\u89c8\u5668\u90e8\u5206\u5143\u7d20\u7684\u9ed8\u8ba4\u8fb9\u6846<\/h2>\n
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}\n\ninput {\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}\n\ntextarea {\n  \/*textarea \u9ed8\u8ba4\u4e0d\u53ef\u4ee5\u653e\u7f29*\/\n  resize: none;\n}<\/code><\/pre>\n
\u53d6\u6d88\u5143\u7d20 outline \u6837\u5f0f<\/h2>\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<\/p>\n
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}<\/code><\/pre>\n
\u53d6\u6d88\u8d85\u94fe\u63a5\u5143\u7d20\u7684\u9ed8\u8ba4\u6587\u5b57\u88c5\u9970<\/h2>\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<\/p>\n
a {\n  text-decoration: none;\n}\n\nol,\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}\n\nbutton,\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}\n\ninput::-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}<\/code><\/pre>\n
\u53d6\u6d88\u90e8\u5206\u6d4f\u89c8\u5668\u6570\u5b57\u8f93\u5165\u63a7\u4ef6\u7684\u64cd\u4f5c\u6309\u94ae<\/h2>\n
input[type=\"number\"] {\n  -moz-appearance: textfield;\n}\n\ninput[type=\"number\"]::-webkit-inner-spin-button,\ninput[type=\"number\"]::-webkit-outer-spin-button {\n  margin: 0;\n  -webkit-appearance: none;\n}<\/code><\/pre>\n
\u8f93\u5165\u63a7\u4ef6 placeholder \u8272\u8bbe\u7f6e #999<\/h2>\n
input::-webkit-input-placeholder,\ntextarea::-webkit-input-placeholder {\n  color: #999;\n}\n\ninput:-moz-placeholder,\ntextarea:-moz-placeholder {\n  color: #999;\n}\n\ninput::-moz-placeholder,\ntextarea::-moz-placeholder {\n  color: #999;\n}\n\ninput:-ms-input-placeholder,\ntextarea:-ms-input-placeholder {\n  color: #999;\n}\n\ntemplate {\n  \/*\u7531\u4e8e\u90e8\u5206\u6d4f\u89c8 template \u4f1a\u663e\u793a\u51fa\u6765\uff0c\u6240\u4ee5\u8981\u9690*\/\n  display: none;\n}\n\nposition: 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}<\/code><\/pre>\n
\u5229\u7528\u7edd\u5bf9\u5b9a\u4f4d\u5bbd\u9ad8\u62c9\u5347\u539f\u7406\uff0c\u4e2d\u5fc3\u5c45\u4e2d\u5143\u7d20<\/h2>\n
.middle {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  margin: auto;\n}<\/code><\/pre>\n
\u5229\u7528\u76f8\u5bf9\u5b9a\u4f4d\u4e8e CSS3 \u4f7f\u5143\u7d20\u5782\u76f4\u5c45\u4e2d<\/h2>\n
.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}<\/code><\/pre>\n
\u5143\u7d20\u8ba1\u7b97\u5bbd\u9ad8\u7684\u76d2\u5b50\u6a21\u578b\u4ee5 border \u4e3a\u5916\u754c\u9650\u300cbb ==> border-box\u300d<\/h2>\n
.bb {\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n}<\/code><\/pre>\n
\u5355\u884c\u6587\u672c\u6ea2\u51fa\u663e\u793a\u7701\u7565\u53f7\u300cto ==> text-overflow\u300d<\/h2>\n
.to {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}<\/code><\/pre>\n
\u521d\u59cb\u5316\u6837\u5f0f<\/h2>\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<\/p>\n
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}<\/code><\/pre>\n
\u5f3a\u5236\u6362\u884c\/\u81ea\u52a8\u6362\u884c\/\u5f3a\u5236\u4e0d\u6362\u884c<\/h2>\n
\/* \u5f3a\u5236\u4e0d\u6362\u884c *\/\ndiv {\n  white-space: nowrap;\n}\n\n\/* \u81ea\u52a8\u6362\u884c *\/\ndiv {\n  word-wrap: break-word;\n  word-break: normal;\n}\n\n\/* \u5f3a\u5236\u82f1\u6587\u5355\u8bcd\u65ad\u884c *\/\ndiv {\n  word-break: break-all;\n}<\/code><\/pre>\n
table \u8fb9\u754c\u7684\u6837\u5f0f<\/h2>\n
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}<\/code><\/pre>\n
\u7edd\u5bf9\u5b9a\u4f4d\u4e0e margin<\/h2>\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<\/p>\n
.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}<\/code><\/pre>\n
\u7edd\u5bf9\u5b9a\u4f4d\u4e0e transform<\/h2>\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<\/p>\n
.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}<\/code><\/pre>\n
line-height<\/h2>\n
line-height\u5176\u5b9e\u662f\u884c\u9ad8\uff0c\u6211\u4eec\u53ef\u4ee5\u7528\u884c\u9ad8\u6765\u8c03\u6574\u5e03\u5c40\uff01 \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<\/p>\n
.container {\n  width: 300px;\n  height: 200px;\n  border: 1px solid #333333;\n}\n.content {\n  line-height: 200px;\n}<\/code><\/pre>\n
table \u5e03\u5c40<\/h2>\n
\u7ed9\u5bb9\u5668\u5143\u7d20\u8bbe\u7f6edisplay: table\uff0c\u5f53\u524d\u5143\u7d20\u8bbe\u7f6edisplay: table-cell\uff1a<\/p>\n
.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}<\/code><\/pre>\n
flex \u5e03\u5c40<\/h2>\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 \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<\/p>\n
.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}<\/code><\/pre>\n
\u56fe\u7247\u4e0a\u4e0b\u5de6\u53f3\u5c45\u4e2d<\/h2>\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 CSS \u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
.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><\/code><\/pre>\n
\u6807\u9898\u4e24\u8fb9\u7684\u5c0f\u6a2a\u6760<\/h2>\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 \u73b0\u5728\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u4f2a\u5143\u7d20\u6765\u5b9e\u73b0\uff01<\/p>\n
<div class=\"title\">\u6807\u9898<\/div>\ntitle {\n  color: #e1767c;\n  font-size: 0.3rem;\n  position: relative;\n\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}<\/code><\/pre>\n
\u7528 border \u5c5e\u6027\u7ed8\u5236\u5143\u7d20<\/h2>\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 <<\/p>\n
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}<\/code><\/pre>\n
\u7528 border-radius \u7ed8\u5236\u5143\u7d20<\/h2>\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<\/p>\n
<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}<\/code><\/pre>\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
\u7528 box-shadow \u7ed8\u5236\u5143\u7d20<\/h2>\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 3 \u4e2a\u503c\uff1ah-shadow v-shadow color 4 \u4e2a\u503c\uff1ah-shadow v-shadow blur color 5 \u4e2a\u503c\uff1ah-shadow v-shadow blur spread color 6 \u4e2a\u503c\uff1ah-shadow v-shadow blur spread color inset \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<\/p>\n
<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}<\/code><\/pre>\n
\u4f7f\u7528 CSS \u6e10\u53d8\u6765\u7ed8\u5236\u56fe\u6807<\/h2>\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<\/p>\n
<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}<\/code><\/pre>\n
\u676f\u5b50<\/h2>\n
.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}<\/code><\/pre>\n
\u5fc3\u5f62<\/h2>\n
.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}<\/code><\/pre>\n
\u76f8\u673a<\/h2>\n
.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: \"\";<\/code><\/pre>\n
}<\/p>\n
\u6708\u4eae<\/h2>\n
.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}<\/code><\/pre>\n
\u6d6e\u52a8\u7c7b<\/h2>\n
\u5e38\u89c4\u6d6e\u52a8 list \u6d6e\u52a8 image \u6d6e\u52a8<\/p>\n
.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}<\/code><\/pre>\n
\u80cc\u666f\u56fe\u7247\u5d4c\u5165\u4e0e\u5b9a\u4f4d<\/h2>\n
.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}<\/code><\/pre>\n
\u7ee7\u627f\u7c7b<\/h2>\n
.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}<\/code><\/pre>\n
\u6587\u672c\u7f29\u8fdb<\/h2>\n
.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*\/<\/code><\/pre>\n
\u884c\u9ad8<\/h2>\n
.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}\n\n.line-height-25x {\n  line-height: 25px;\n}\n.line-height-30x {\n  line-height: 30px;\n}<\/code><\/pre>\n
ul \u7f29\u8fdb<\/h2>\n
.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}<\/code><\/pre>\n
\u6587\u672c\u622a\u65ad<\/h2>\n
.truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.hide {\n  display: none;\n}<\/code><\/pre>\n
\u56fe\u7247\u3001\u89c6\u9891\u89c4\u8303<\/h2>\n
.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}<\/code><\/pre>\n
\u8fb9\u6846\u6837\u5f0f<\/h2>\n
.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}\n\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}<\/code><\/pre>\n
\u80cc\u666f\u989c\u8272<\/h2>\n
.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}<\/code><\/pre>\n
\u5206\u5272\u7ebf\u9884\u8bbe<\/h2>\n
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}<\/code><\/pre>\n
\u9f20\u6807 a \u6807\u7b7e hover \u6548\u679c<\/h2>\n
.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}<\/code><\/pre>\n
\u9634\u5f71\u6548\u679c<\/h2>\n
.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*\/\n\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}<\/code><\/pre>\n
\u5706\u89d2<\/h2>\n
.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}<\/code><\/pre>\n
\n
\u4e00\u53e5\u8bdd\u603b\u7ed3\uff1aCSS \u6548\u7387\u6765\u81ea\u53ef\u590d\u7528\u7247\u6bb5\uff1a\u5148\u6e05\u6d6e\u52a8\u548c\u76d2\u6a21\u578b\uff0c\u518d\u7528 flex\/\u7edd\u5bf9\u5b9a\u4f4d\u505a\u5c45\u4e2d\uff0c\u7701\u7565\u53f7\u548c\u91cd\u7f6e\u57ab\u5e95\uff0c\u88c5\u9970\u7528\u5706\u89d2\u9634\u5f71\u548c\u7eaf CSS \u56fe\u5f62\u3002<\/strong><\/p>\n<\/blockquote>\n<\/section>\n","protected":false},"excerpt":{"rendered":"
\u628a\u5e73\u65f6\u6700\u5e38\u7528\u7684 55 \u4e2a CSS \u7247\u6bb5 \u6536\u6210\u4e00\u4efd\u901f\u67e5\uff1a\u6e05\u6d6e\u52a8\u3001\u5c45\u4e2d\u3001\u7701\u7565\u53f7\u3001loading\u3001\u5c0f\u4e09\u89d2\uff0c\u4e00\u76f4\u5230\u9634\u5f71 […]<\/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":[142,150],"_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}]}}