{"id":55,"date":"2020-04-04T22:07:59","date_gmt":"2020-04-04T14:07:59","guid":{"rendered":"https:\/\/www.bailicao.top\/?p=55"},"modified":"2020-04-04T22:09:01","modified_gmt":"2020-04-04T14:09:01","slug":"45%e4%b8%aa%e7%82%ab%e9%85%b7%e7%9a%84-css-%e5%bd%a2%e7%8a%b6%ef%bc%88%e5%80%bc%e5%be%97%e6%94%b6%e8%97%8f%ef%bc%89","status":"publish","type":"post","link":"https:\/\/www.bailicao.com\/index.php\/2020\/04\/04\/45%e4%b8%aa%e7%82%ab%e9%85%b7%e7%9a%84-css-%e5%bd%a2%e7%8a%b6%ef%bc%88%e5%80%bc%e5%be%97%e6%94%b6%e8%97%8f%ef%bc%89\/","title":{"rendered":"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09"},"content":{"rendered":"\n<ul class=\"wp-block-list\"><li>1.\u6b63\u65b9\u5f62<\/li><li>2.\u957f\u65b9\u5f62<\/li><li>3.\u5706\u5f62<\/li><li>4.\u692d\u5706\u5f62<\/li><li>5.\u4e0a\u4e09\u89d2<\/li><li>6.\u4e0b\u4e09\u89d2<\/li><li>7.\u5de6\u4e09\u89d2<\/li><li>8.\u53f3\u4e09\u89d2<\/li><li>9.\u5de6\u4e0a\u89d2<\/li><li>10.\u53f3\u4e0a\u89d2<\/li><li>11.\u5de6\u4e0b\u89d2<\/li><li>12.\u53f3\u4e0b\u89d2<\/li><li>13.\u7bad\u5934<\/li><li>14.\u68af\u5f62<\/li><li>15.\u5e73\u884c\u56db\u8fb9\u5f62<\/li><li>16.\u661f\u661f (6\u89d2)<\/li><li>17.\u661f\u661f (5\u89d2)<\/li><li>18.\u4e94\u8fb9\u5f62<\/li><li>19.\u516d\u8fb9\u5f62<\/li><li>20.\u516b\u8fb9\u5f62<\/li><li>21.\u7231\u5fc3<\/li><li>22.\u65e0\u7a77\u5927<\/li><li>23.\u83f1\u5f62<\/li><li>24.\u94bb\u77f3<\/li><li>25.\u94bb\u6212<\/li><li>26.\u94bb\u77f32<\/li><li>27.\u86cb\u86cb<\/li><li>28.\u5403\u8c46\u4eba<\/li><li>29.\u5bf9\u8bdd\u6ce1\u6ce1<\/li><li>30. 12\u70b9 \u7206\u53d1<\/li><li>31. 8\u70b9 \u7206\u53d1<\/li><li>32.\u592a\u6781<\/li><li>33.\u5fbd\u7ae0\u4e1d\u5e26<\/li><li>34.\u592a\u7a7a\u5165\u4fb5\u8005\uff08\u7535\u8111\u6e38\u620f\u540d\uff09<\/li><li>35.\u7535\u89c6<\/li><li>36.\u96ea\u4f5b\u9f99<\/li><li>37.\u653e\u5927\u955c<\/li><li>38.Facebook\u56fe\u6807<\/li><li>39.\u6708\u4eae<\/li><li>40.\u65d7<\/li><li>41.\u5706\u9525<\/li><li>42.\u5341\u5b57\u67b6<\/li><li>43.\u6839\u57fa<\/li><li>44.\u6307\u793a\u5668<\/li><li>45.\u9501<\/li><\/ul>\n\n\n\n<p>1.\u6b63\u65b9\u5f62<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/38360920ad1a4b81ad1f7e9d07cbf796\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#square {<br> width: 100px;<br> height: 100px<br> background: red;<br>}<br><\/pre>\n\n\n\n<p>2.\u957f\u65b9\u5f62<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p9.pstatp.com\/large\/pgc-image\/d70a6099f7b444daaa1c53d52f813c8a\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#rectangle {<br> width: 200px;<br> height: 100px;<br> background: red;<br>}<br><\/pre>\n\n\n\n<p>3.\u5706\u5f62<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/41f5cb5657d8420fa18ce4e503c02cbd\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#circle {<br> width: 100px;<br> height: 100px;<br> background: red;<br> border-radius: 50%<br>}<br><\/pre>\n\n\n\n<p>4.\u692d\u5706\u5f62<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/ea6b06e1abcb47f89f4c47b17b666fdd\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<p>#oval {<\/p>\n\n\n\n<p>width: 200px;<\/p>\n\n\n\n<p>height: 100px;<\/p>\n\n\n\n<p>background: red;<\/p>\n\n\n\n<p>border-radius: 100px \/ 50px;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>5.\u4e0a\u4e09\u89d2<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/36011308e1624ba7b88b999ddd4d07b2\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#triangle-up {<br> width: 0;<br> height: 0;<br> border-left: 50px solid transparent;<br> border-right: 50px solid transparent;<br> border-bottom: 100px solid red;<br>}<br><\/pre>\n\n\n\n<p>6.\u4e0b\u4e09\u89d2<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/2125802e6b724c06b8a9e62e55b9a772\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#triangle-down {<br> width: 0;<br> height: 0;<br> border-left: 50px solid transparent;<br> border-right: 50px solid transparent;<br> border-top: 100px solid red;<br>}<br><\/pre>\n\n\n\n<p>7.\u5de6\u4e09\u89d2<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/1c53258b34b54e0db3f4aacfae3526a7\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#triangle-left {<br> width: 0;<br> height: 0;<br> border-top: 50px solid transparent;<br> border-right: 100px solid red;<br> border-bottom: 50px solid transparent;<br>}<br><\/pre>\n\n\n\n<p>8.\u53f3\u4e09\u89d2<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/d7ece09ea6b0468293522828022b6d6a\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#triangle-right {<br> width: 0;<br> height: 0;<br> border-top: 50px solid transparent;<br> border-left: 100px solid red;<br> border-bottom: 50px solid transparent;<br>}<br><\/pre>\n\n\n\n<p>9.\u5de6\u4e0a\u89d2<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/dbacbb491b9d4d9d95dde086e02b280b\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<p>#triangle-topleft {<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> width: 0;<br> height: 0;<br> border-top: 100px solid red;<br> border-right: 100px solid transparent;<br>}<br><\/pre>\n\n\n\n<p>10.\u53f3\u4e0a\u89d2<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/e3e69cb598aa4b9f90531a64e4032b50\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#triangle-topright {<br> width: 0;<br> height: 0;<br> border-top: 100px solid red;<br> border-left: 100px solid transparent;<br>}<br><\/pre>\n\n\n\n<p>11.\u5de6\u4e0b\u89d2<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/4dfe584d9c1e40e4bdb66069fc4d75bc\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#triangle-bottomleft {<br> width: 0;<br> height: 0;<br> border-bottom: 100px solid red;<br> border-right: 100px solid transparent;<br>}<br><\/pre>\n\n\n\n<p>12.\u53f3\u4e0b\u89d2<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/819d345ef53443d0bc4b34d9bf47d5cf\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#triangle-bottomright {<br> width: 0;<br> height: 0;<br> border-bottom: 100px solid red;<br> border-left: 100px solid transparent;<br>}<br><\/pre>\n\n\n\n<p>13.\u7bad\u5934<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/3aab2ae8cbd240d88db129ec9880618e\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#curvedarrow {<br> position: relative;<br> width: 0;<br> height: 0;<br> border-top: 9px solid transparent;<br> border-right: 9px solid red;<br> transform: rotate(10deg);<br>}<br>#curvedarrow:after {<br> content: \"\";<br> position: absolute;<br> border: 0 solid transparent;<br> border-top: 3px solid red;<br> border-radius: 20px 0 0 0;<br> top: -12px;<br> left: -9px;<br> width: 12px;<br> height: 12px;<br> transform: rotate(45deg);<br>}<br><\/pre>\n\n\n\n<p>14.\u68af\u5f62<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/c79124ee66a641a09dbf7d05541bd1d8\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#trapezoid {<br> border-bottom: 100px solid red;<br> border-left: 25px solid transparent;<br> border-right: 25px solid transparent;<br> height: 0;<br> width: 100px;<br>}<br><\/pre>\n\n\n\n<p>15.\u5e73\u884c\u56db\u8fb9\u5f62<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/be953c24b2b9417b92e6aeb6f2f0bfae\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#parallelogram {<br> width: 150px;<br> height: 100px;<br> transform: skew(20deg);<br> background: red;<br>}<br><\/pre>\n\n\n\n<p>16.\u661f\u661f (6\u89d2)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/186c6b8e2c1c408a832f316437802cb3\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#star-six {<br> width: 0;<br> height: 0;<br> border-left: 50px solid transparent;<br> border-right: 50px solid transparent;<br> border-bottom: 100px solid red;<br> position: relative;<br>}<br>#star-six:after {<br> width: 0;<br> height: 0;<br> border-left: 50px solid transparent;<br> border-right: 50px solid transparent;<br> border-top: 100px solid red;<br> position: absolute;<br> content: \"\";<br> top: 30px;<br> left: -50px;<br>}<br><\/pre>\n\n\n\n<p>17.\u661f\u661f (5\u89d2)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/ac9bd0f27b9d4502833068073d0bf8d9\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<p>#star-five {<\/p>\n\n\n\n<p>margin: 50px 0;<\/p>\n\n\n\n<p>position: relative;<\/p>\n\n\n\n<p>display: block;<\/p>\n\n\n\n<p>color: red;<\/p>\n\n\n\n<p>width: 0px;<\/p>\n\n\n\n<p>height: 0px;<\/p>\n\n\n\n<p>border-right: 100px solid transparent;<\/p>\n\n\n\n<p>border-bottom: 70px solid red;<\/p>\n\n\n\n<p>border-left: 100px solid transparent;<\/p>\n\n\n\n<p>transform: rotate(35deg);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>#star-five:before {<\/p>\n\n\n\n<p>border-bottom: 80px solid red;<\/p>\n\n\n\n<p>border-left: 30px solid transparent;<\/p>\n\n\n\n<p>border-right: 30px solid transparent;<\/p>\n\n\n\n<p>position: absolute;<\/p>\n\n\n\n<p>height: 0;<\/p>\n\n\n\n<p>width: 0;<\/p>\n\n\n\n<p>top: -45px;<\/p>\n\n\n\n<p>left: -65px;<\/p>\n\n\n\n<p>display: block;<\/p>\n\n\n\n<p>content: &#8221;;<\/p>\n\n\n\n<p>transform: rotate(-35deg);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>#star-five:after {<\/p>\n\n\n\n<p>position: absolute;<\/p>\n\n\n\n<p>display: block;<\/p>\n\n\n\n<p>color: red;<\/p>\n\n\n\n<p>top: 3px;<\/p>\n\n\n\n<p>left: -105px;<\/p>\n\n\n\n<p>width: 0px;<\/p>\n\n\n\n<p>height: 0px;<\/p>\n\n\n\n<p>border-right: 100px solid transparent;<\/p>\n\n\n\n<p>border-bottom: 70px solid red;<\/p>\n\n\n\n<p>border-left: 100px solid transparent;<\/p>\n\n\n\n<p>transform: rotate(-70deg);<\/p>\n\n\n\n<p>content: &#8221;;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>18.\u4e94\u8fb9\u5f62<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/02526c846cde4f4080eff7f77f73894e\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#pentagon {<br> position: relative;<br> width: 54px;<br> box-sizing: content-box;<br> border-width: 50px 18px 0;<br> border-style: solid;<br> border-color: red transparent;<br>}<br>#pentagon:before {<br> content: \"\";<br> position: absolute;<br> height: 0;<br> width: 0;<br> top: -85px;<br> left: -18px;<br> border-width: 0 45px 35px;<br> border-style: solid;<br> border-color: transparent transparent red;<br>}<br><\/pre>\n\n\n\n<p>19.\u516d\u8fb9\u5f62<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/422580a8341f413695160949365be490\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#hexagon {<br> width: 100px;<br> height: 55px;<br> background: red;<br> position: relative;<br>}<br>#hexagon:before {<br> content: \"\";<br> position: absolute;<br> top: -25px;<br> left: 0;<br> width: 0;<br> height: 0;<br> border-left: 50px solid transparent;<br> border-right: 50px solid transparent;<br> border-bottom: 25px solid red;<br>}<br>#hexagon:after {<br> content: \"\";<br> position: absolute;<br> bottom: -25px;<br> left: 0;<br> width: 0;<br> height: 0;<br> border-left: 50px solid transparent;<br> border-right: 50px solid transparent;<br> border-top: 25px solid red;<br>}<br><\/pre>\n\n\n\n<p>20.\u516b\u8fb9\u5f62<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/625f62fab01f46488b483c4a3ac5aca3\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#octagon {<br> width: 100px;<br> height: 100px;<br> background: red;<br> position: relative;<br>}<br>#octagon:before {<br> content: \"\";<br> width: 100px;<br> height: 0;<br> position: absolute;<br> top: 0;<br> left: 0;<br> border-bottom: 29px solid red;<br> border-left: 29px solid #eee;<br> border-right: 29px solid #eee;<br>}<br>#octagon:after {<br> content: \"\";<br> width: 100px;<br> height: 0;<br> position: absolute;<br> bottom: 0;<br> left: 0;<br> border-top: 29px solid red;<br> border-left: 29px solid #eee;<br> border-right: 29px solid #eee;<br>} <br><\/pre>\n\n\n\n<p>21.\u7231\u5fc3<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/1a972827ec824036b7bbd2654a08db50\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<p>#heart {<\/p>\n\n\n\n<p>position: relative;<\/p>\n\n\n\n<p>width: 100px;<\/p>\n\n\n\n<p>height: 90px;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>#heart:before,<\/p>\n\n\n\n<p>#heart:after {<\/p>\n\n\n\n<p>position: absolute;<\/p>\n\n\n\n<p>content: &#8220;&#8221;;<\/p>\n\n\n\n<p>left: 50px;<\/p>\n\n\n\n<p>top: 0;<\/p>\n\n\n\n<p>width: 50px;<\/p>\n\n\n\n<p>height: 80px;<\/p>\n\n\n\n<p>background: red;<\/p>\n\n\n\n<p>border-radius: 50px 50px 0 0;<\/p>\n\n\n\n<p>transform: rotate(-45deg);<\/p>\n\n\n\n<p>transform-origin: 0 100%;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>#heart:after {<\/p>\n\n\n\n<p>left: 0;<\/p>\n\n\n\n<p>transform: rotate(45deg);<\/p>\n\n\n\n<p>transform-origin: 100% 100%;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>22.\u65e0\u7a77\u5927<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/bdd9ba8fd1814813883a4e252a3e98f1\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#infinity {<br> position: relative;<br> width: 212px;<br> height: 100px;<br> box-sizing: content-box;<br>}<br>#infinity:before,<br>#infinity:after {<br> content: \"\";<br> box-sizing: content-box;<br> position: absolute;<br> top: 0;<br> left: 0;<br> width: 60px;<br> height: 60px;<br> border: 20px solid red;<br> border-radius: 50px 50px 0 50px;<br> transform: rotate(-45deg);<br>}<br>#infinity:after {<br> left: auto;<br> right: 0;<br> border-radius: 50px 50px 50px 0;<br> transform: rotate(45deg);<br>}<br><\/pre>\n\n\n\n<p>23.\u83f1\u5f62<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/a560cd053c3346b3bf0e45a397bbb4b9\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#diamond {<br> width: 0;<br> height: 0;<br> border: 50px solid transparent;<br> border-bottom-color: red;<br> position: relative;<br> top: -50px;<br>}<br>#diamond:after {<br> content: '';<br> position: absolute;<br> left: -50px;<br> top: 50px;<br> width: 0;<br> height: 0;<br> border: 50px solid transparent;<br> border-top-color: red;<br>}<br><\/pre>\n\n\n\n<p>24.\u94bb\u77f3<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/8eac6ce15c9c491a8b0f9706c8d0bb2e\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#diamond-shield {<br> width: 0;<br> height: 0;<br> border: 50px solid transparent;<br> border-bottom: 20px solid red;<br> position: relative;<br> top: -50px;<br>}<br>#diamond-shield:after {<br> content: '';<br> position: absolute;<br> left: -50px;<br> top: 20px;<br> width: 0;<br> height: 0;<br> border: 50px solid transparent;<br> border-top: 70px solid red;<br>}<br><\/pre>\n\n\n\n<p>25.\u94bb\u6212<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/21bcecedc9674902874f6fea35808adc\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#diamond-narrow {<br> width: 0;<br> height: 0;<br> border: 50px solid transparent;<br> border-bottom: 70px solid red;<br> position: relative;<br> top: -50px;<br>}<br>#diamond-narrow:after {<br> content: '';<br> position: absolute;<br> left: -50px;<br> top: 70px;<br> width: 0;<br> height: 0;<br> border: 50px solid transparent;<br> border-top: 70px solid red;<br>}<br><\/pre>\n\n\n\n<p>26.\u94bb\u77f32<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/9869a99eaa094a0dab9d29b93bc7f18f\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#cut-diamond {<br> border-style: solid;<br> border-color: transparent transparent red transparent;<br> border-width: 0 25px 25px 25px;<br> height: 0;<br> width: 50px;<br> box-sizing: content-box;<br> position: relative;<br> margin: 20px 0 50px 0;<br>}<br>#cut-diamond:after {<br> content: \"\";<br> position: absolute;<br> top: 25px;<br> left: -25px;<br> width: 0;<br> height: 0;<br> border-style: solid;<br> border-color: red transparent transparent transparent;<br> border-width: 70px 50px 0 50px;<br>}<br><\/pre>\n\n\n\n<p>27.\u86cb\u86cb<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/6b8d4f7bf7fa48c48f8c2cf5e4ee4df3\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#egg {<br> display: block;<br> width: 126px;<br> height: 180px;<br> background-color: red;<br> border-radius: 50% 50% 50% 50% \/ 60% 60% 40% 40%;<br>}<br><\/pre>\n\n\n\n<p>28.\u5403\u8c46\u4eba<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/327da767418f4d4c9ef4e09a951af835\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#pacman {<br> width: 0px;<br> height: 0px;<br> border-right: 60px solid transparent;<br> border-top: 60px solid red;<br> border-left: 60px solid red;<br> border-bottom: 60px solid red;<br> border-top-left-radius: 60px;<br> border-top-right-radius: 60px;<br> border-bottom-left-radius: 60px;<br> border-bottom-right-radius: 60px;<br>}<br><\/pre>\n\n\n\n<p>29.\u5bf9\u8bdd\u6ce1\u6ce1<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/af35de06872940a4a58f6b46f9812caa\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#talkbubble {<br> width: 120px;<br> height: 80px;<br> background: red;<br> position: relative;<br> -moz-border-radius: 10px;<br> -webkit-border-radius: 10px;<br> border-radius: 10px;<br>}<br>#talkbubble:before {<br> content: \"\";<br> position: absolute;<br> right: 100%;<br> top: 26px;<br> width: 0;<br> height: 0;<br> border-top: 13px solid transparent;<br> border-right: 26px solid red;<br> border-bottom: 13px solid transparent;<br>}<br><\/pre>\n\n\n\n<p>30. 12\u70b9 \u7206\u53d1<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/87a43049bc1f486ab3ee6b6124423d5a\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#burst-12 {<br> background: red;<br> width: 80px;<br> height: 80px;<br> position: relative;<br> text-align: center;<br>}<br>#burst-12:before,<br>#burst-12:after {<br> content: \"\";<br> position: absolute;<br> top: 0;<br> left: 0;<br> height: 80px;<br> width: 80px;<br> background: red;<br>}<br>#burst-12:before {<br> transform: rotate(30deg);<br>}<br>#burst-12:after {<br> transform: rotate(60deg);<br>}<br><\/pre>\n\n\n\n<p>31. 8\u70b9 \u7206\u53d1<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/a386ad0e0b2047b497270c56830cedd3\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#burst-8 {<br> background: red;<br> width: 80px;<br> height: 80px;<br> position: relative;<br> text-align: center;<br> transform: rotate(20deg);<br>}<br>#burst-8:before {<br> content: \"\";<br> position: absolute;<br> top: 0;<br> left: 0;<br> height: 80px;<br> width: 80px;<br> background: red;<br> transform: rotate(135deg);<br>}<br><\/pre>\n\n\n\n<p>32.\u592a\u6781<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/24d3195b90f4474f9289cc0fad1e4d14\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#yin-yang {<br> width: 96px;<br> box-sizing: content-box;<br> height: 48px;<br> background: #eee;<br> border-color: red;<br> border-style: solid;<br> border-width: 2px 2px 50px 2px;<br> border-radius: 100%;<br> position: relative;<br>}<br>#yin-yang:before {<br> content: \"\";<br> position: absolute;<br> top: 50%;<br> left: 0;<br> background: #eee;<br> border: 18px solid red;<br> border-radius: 100%;<br> width: 12px;<br> height: 12px;<br> box-sizing: content-box;<br>}<br>#yin-yang:after {<br> content: \"\";<br> position: absolute;<br> top: 50%;<br> left: 50%;<br> background: red;<br> border: 18px solid #eee;<br> border-radius: 100%;<br> width: 12px;<br> height: 12px;<br> box-sizing: content-box;<br>} <br><\/pre>\n\n\n\n<p>33.\u5fbd\u7ae0\u4e1d\u5e26<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/9845677146a747159e128e159b7d676f\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#badge-ribbon {<br> position: relative;<br> background: red;<br> height: 100px;<br> width: 100px;<br> border-radius: 50px;<br>}<br>#badge-ribbon:before,<br>#badge-ribbon:after {<br> content: '';<br> position: absolute;<br> border-bottom: 70px solid red;<br> border-left: 40px solid transparent;<br> border-right: 40px solid transparent;<br> top: 70px;<br> left: -10px;<br> transform: rotate(-140deg);<br>}<br>#badge-ribbon:after {<br> left: auto;<br> right: -10px;<br> transform: rotate(140deg);<br>}<br> <br><\/pre>\n\n\n\n<p>34.\u592a\u7a7a\u5165\u4fb5\u8005\uff08\u7535\u8111\u6e38\u620f\u540d\uff09<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/bb7690ceceb246cfb7ac61eaf7f67914\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<p>#space-invader {<\/p>\n\n\n\n<p>box-shadow: 0 0 0 1em red,<\/p>\n\n\n\n<p>0 1em 0 1em red,<\/p>\n\n\n\n<p>-2.5em 1.5em 0 .5em red,<\/p>\n\n\n\n<p>2.5em 1.5em 0 .5em red,<\/p>\n\n\n\n<p>-3em -3em 0 0 red,<\/p>\n\n\n\n<p>3em -3em 0 0 red,<\/p>\n\n\n\n<p>-2em -2em 0 0 red,<\/p>\n\n\n\n<p>2em -2em 0 0 red,<\/p>\n\n\n\n<p>-3em -1em 0 0 red,<\/p>\n\n\n\n<p>-2em -1em 0 0 red,<\/p>\n\n\n\n<p>2em -1em 0 0 red,<\/p>\n\n\n\n<p>3em -1em 0 0 red,<\/p>\n\n\n\n<p>-4em 0 0 0 red,<\/p>\n\n\n\n<p>-3em 0 0 0 red,<\/p>\n\n\n\n<p>3em 0 0 0 red,<\/p>\n\n\n\n<p>4em 0 0 0 red,<\/p>\n\n\n\n<p>-5em 1em 0 0 red,<\/p>\n\n\n\n<p>-4em 1em 0 0 red,<\/p>\n\n\n\n<p>4em 1em 0 0 red,<\/p>\n\n\n\n<p>5em 1em 0 0 red,<\/p>\n\n\n\n<p>-5em 2em 0 0 red,<\/p>\n\n\n\n<p>5em 2em 0 0 red,<\/p>\n\n\n\n<p>-5em 3em 0 0 red,<\/p>\n\n\n\n<p>-3em 3em 0 0 red,<\/p>\n\n\n\n<p>3em 3em 0 0 red,<\/p>\n\n\n\n<p>5em 3em 0 0 red,<\/p>\n\n\n\n<p>-2em 4em 0 0 red,<\/p>\n\n\n\n<p>-1em 4em 0 0 red,<\/p>\n\n\n\n<p>1em 4em 0 0 red,<\/p>\n\n\n\n<p>2em 4em 0 0 red;<\/p>\n\n\n\n<p>background: red;<\/p>\n\n\n\n<p>width: 1em;<\/p>\n\n\n\n<p>height: 1em;<\/p>\n\n\n\n<p>overflow: hidden;<\/p>\n\n\n\n<p>margin: 50px 0 70px 65px;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>35.\u7535\u89c6<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/02af487faabb40229b8ab4f4d95297e6\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#tv {<br> position: relative;<br> width: 200px;<br> height: 150px;<br> margin: 20px 0;<br> background: red;<br> border-radius: 50% \/ 10%;<br> color: white;<br> text-align: center;<br> text-indent: .1em;<br>}<br>#tv:before {<br> content: '';<br> position: absolute;<br> top: 10%;<br> bottom: 10%;<br> right: -5%;<br> left: -5%;<br> background: inherit;<br> border-radius: 5% \/ 50%;<br>}<br> <br><\/pre>\n\n\n\n<p>36.\u96ea\u4f5b\u9f99<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/98d794951e40442189c4424760ab6c60\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#chevron {<br> position: relative;<br> text-align: center;<br> padding: 12px;<br> margin-bottom: 6px;<br> height: 60px;<br> width: 200px;<br>}<br>#chevron:before {<br> content: '';<br> position: absolute;<br> top: 0;<br> left: 0;<br> height: 100%;<br> width: 51%;<br> background: red;<br> transform: skew(0deg, 6deg);<br>}<br>#chevron:after {<br> content: '';<br> position: absolute;<br> top: 0;<br> right: 0;<br> height: 100%;<br> width: 50%;<br> background: red;<br> transform: skew(0deg, -6deg);<br>} <br><\/pre>\n\n\n\n<p>37.\u653e\u5927\u955c<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/9fb212599d404b57a22ddaa5d1d61580\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#magnifying-glass {<br> font-size: 10em;<br> display: inline-block;<br> width: 0.4em;<br> box-sizing: content-box;<br> height: 0.4em;<br> border: 0.1em solid red;<br> position: relative;<br> border-radius: 0.35em;<br>}<br>#magnifying-glass:before {<br> content: \"\";<br> display: inline-block;<br> position: absolute;<br> right: -0.25em;<br> bottom: -0.1em;<br> border-width: 0;<br> background: red;<br> width: 0.35em;<br> height: 0.08em;<br> transform: rotate(45deg);<br>}<br><\/pre>\n\n\n\n<p>38.Facebook\u56fe\u6807<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/d3b91eb0318648bcb5782eee765e4747\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#facebook-icon {<br> background: red;<br> text-indent: -999em;<br> width: 100px;<br> height: 110px;<br> box-sizing: content-box;<br> border-radius: 5px;<br> position: relative;<br> overflow: hidden;<br> border: 15px solid red;<br> border-bottom: 0;<br>}<br>#facebook-icon:before {<br> content: \"\/20\";<br> position: absolute;<br> background: red;<br> width: 40px;<br> height: 90px;<br> bottom: -30px;<br> right: -37px;<br> border: 20px solid #eee;<br> border-radius: 25px;<br> box-sizing: content-box;<br>}<br>#facebook-icon:after {<br> content: \"\/20\";<br> position: absolute;<br> width: 55px;<br> top: 50px;<br> height: 20px;<br> background: #eee;<br> right: 5px;<br> box-sizing: content-box;<br>}<br><\/pre>\n\n\n\n<p>39.\u6708\u4eae<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/eb9e638653704f96a51214280bd28a62\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#moon {<br> width: 80px;<br> height: 80px;<br> border-radius: 50%;<br> box-shadow: 15px 15px 0 0 red;<br>} <br><\/pre>\n\n\n\n<p>40.\u65d7<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p9.pstatp.com\/large\/pgc-image\/80f6a04ddac446f791e4d32610e394c6\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#flag {<br> width: 110px;<br> height: 56px;<br> box-sizing: content-box;<br> padding-top: 15px;<br> position: relative;<br> background: red;<br> color: white;<br> font-size: 11px;<br> letter-spacing: 0.2em;<br> text-align: center;<br> text-transform: uppercase;<br>}<br>#flag:after {<br> content: \"\";<br> position: absolute;<br> left: 0;<br> bottom: 0;<br> width: 0;<br> height: 0;<br> border-bottom: 13px solid #eee;<br> border-left: 55px solid transparent;<br> border-right: 55px solid transparent;<br>}<br><\/pre>\n\n\n\n<p>41.\u5706\u9525<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/8e8980f760554483a72a2064120dc47e\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\"> #cone {<br> width: 0;<br> height: 0;<br> border-left: 70px solid transparent;<br> border-right: 70px solid transparent;<br> border-top: 100px solid red;<br> border-radius: 50%;<br>}<br><\/pre>\n\n\n\n<p>42.\u5341\u5b57\u67b6<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/60639606b6434172819b8543a460b44f\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#cross {<br> background: red;<br> height: 100px;<br> position: relative;<br> width: 20px;<br>}<br>#cross:after {<br> background: red;<br> content: \"\";<br> height: 20px;<br> left: -40px;<br> position: absolute;<br> top: 40px;<br> width: 100px;<br>}<br><\/pre>\n\n\n\n<p>43.\u6839\u57fa<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p3.pstatp.com\/large\/pgc-image\/b7d49cff96b44d05baf5b24d239d8be1\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\"> #base {<br> background: red;<br> display: inline-block;<br> height: 55px;<br> margin-left: 20px;<br> margin-top: 55px;<br> position: relative;<br> width: 100px;<br>}<br>#base:before {<br> border-bottom: 35px solid red;<br> border-left: 50px solid transparent;<br> border-right: 50px solid transparent;<br> content: \"\";<br> height: 0;<br> left: 0;<br> position: absolute;<br> top: -35px;<br> width: 0;<br>}<br><\/pre>\n\n\n\n<p>44.\u6307\u793a\u5668<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/c39ea8bf92d8435ca088e8e907e9606e\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#pointer {<br> width: 200px;<br> height: 40px;<br> position: relative;<br> background: red;<br>}<br>#pointer:after {<br> content: \"\";<br> position: absolute;<br> left: 0;<br> bottom: 0;<br> width: 0;<br> height: 0;<br> border-left: 20px solid white;<br> border-top: 20px solid transparent;<br> border-bottom: 20px solid transparent;<br>}<br>#pointer:before {<br> content: \"\";<br> position: absolute;<br> right: -20px;<br> bottom: 0;<br> width: 0;<br> height: 0;<br> border-left: 20px solid red;<br> border-top: 20px solid transparent;<br> border-bottom: 20px solid transparent;<br>}<br><\/pre>\n\n\n\n<p>45.\u9501<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/e8facc0eae5a4bda8bf057985e156b69\" alt=\"45\u4e2a\u70ab\u9177\u7684 CSS \u5f62\u72b6\uff08\u503c\u5f97\u6536\u85cf\uff09\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">#lock {<br> font-size: 8px;<br> position: relative;<br> width: 18em;<br> height: 13em;<br> border-radius: 2em;<br> top: 10em;<br> box-sizing: border-box;<br> border: 3.5em solid red;<br> border-right-width: 7.5em;<br> border-left-width: 7.5em;<br> margin: 0 0 6rem 0;<br>}<br>#lock:before {<br> content: \"\";<br> box-sizing: border-box;<br> position: absolute;<br> border: 2.5em solid red;<br> width: 14em;<br> height: 12em;<br> left: 50%;<br> margin-left: -7em;<br> top: -12em;<br> border-top-left-radius: 7em;<br> border-top-right-radius: 7em;<br>}<br>#lock:after {<br> content: \"\";<br> box-sizing: border-box;<br> position: absolute;<br> border: 1em solid red;<br> width: 5em;<br> height: 8em;<br> border-radius: 2.5em;<br> left: 50%;<br> top: -1em;<br> margin-left: -2.5em;<br>}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1.\u6b63\u65b9\u5f62 2.\u957f\u65b9\u5f62 3.\u5706\u5f62 4.\u692d\u5706\u5f62 5.\u4e0a\u4e09\u89d2 6.\u4e0b\u4e09\u89d2 7.\u5de6\u4e09\u89d2 8.\u53f3\u4e09\u89d2 9.\u5de6\u4e0a\u89d2 10 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-55","post","type-post","status-publish","format-standard","hentry","category-css3"],"_links":{"self":[{"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/posts\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":1,"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/posts\/55\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/posts\/55\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/media?parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/categories?post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/tags?post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}