{"id":486,"date":"2013-06-19T17:52:08","date_gmt":"2013-06-19T09:52:08","guid":{"rendered":"https:\/\/yanjingang.com\/blog\/?p=486"},"modified":"2016-03-09T17:54:05","modified_gmt":"2016-03-09T09:54:05","slug":"css%e7%bb%98%e5%9b%be%ef%bc%8c%e5%ae%9e%e7%8e%b0%e4%b8%80%e4%ba%9b%e7%89%b9%e6%ae%8a%e5%bd%a2%e7%8a%b6","status":"publish","type":"post","link":"https:\/\/yanjingang.com\/blog\/?p=486","title":{"rendered":"css\u7ed8\u56fe\uff0c\u5b9e\u73b0\u4e00\u4e9b\u7279\u6b8a\u5f62\u72b6"},"content":{"rendered":"

\u8fd8\u662f\u548c\u524d\u9762\u7684tips\u4e00\u6837\uff0c\u591a\u7528after\u548cbefore\uff0c\u80fd\u7701\u4fe9\u6807\u7b7e\uff01\u4fe9\uff01\u6bd4\u5982\u8fd9\u4e00\u5806\u7684\u5f62\u72b6<\/p>\n

\"6\"<\/a><\/p>\n

\u4ee3\u7801\uff1a<\/p>\n

<!DOCTYPE HTML>
\n<html>
\n<head>
\n<meta http-equiv=\u201dContent-Type\u201d content=\u201dtext\/html; charset=UTF-8\u2033 \/>
\n<meta name=\u201dkeywords\u201d content=\u201d\u524d\u7aef\u5f00\u53d1,CSS,HTML,XHTML,JS\u201d \/>
\n<meta name=\u201ddescription\u201d content=\u201d\u4e13\u6ce8\u524d\u7aef\u6280\u672f\u535a\u5ba2\u201d \/>
\n<title>WEB\u524d\u7aef\u5f00\u53d1 | \u95ea\u4eae\u4e8eWEB\u524d\u7aef\u7684\u5f69\u8679<\/title>
\n<title>\u6d4b\u8bd5<\/title>
\n<style type=\u201dtext\/css\u201d>
\n*{
\nmargin: 0;
\npadding: 0;
\nborder: 0;
\n}
\n.wrap{
\nposition: absolute;
\n}
\n.arrow { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid #000; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg);
\n}
\n.arrow:after {
\ncontent: \u201c\u201d; position: absolute; border: 0 solid transparent; border-top: 3px solid #000; border-radius: 20px 0 0 0; top: -12px; left: -9px; width: 12px; height: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);
\n}
\n.star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #99CC33; position: relative; }
\n.star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #99CC33; position: absolute; content: \u201c\u201d; top: 30px; left: -50px; }
\n.star-five { margin: 50px 0; position: relative; display: block; color: #0066CC; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #0066CC; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); }
\n.star-five:before { border-bottom: 80px solid #0066CC; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: \u201d; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); }
\n.star-five:after { position: absolute; display: block; color: #0066CC; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #0066CC; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: \u201d; }
\n.heart { position: relative; width: 100px; height: 90px; }
\n.heart:before, .heart:after { position: absolute; content: \u201c\u201d; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; }
\n.heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }
\n.infinity { position: relative; width: 212px; height: 100px; }
\n.infinity:before, .infinity:after { content: \u201c\u201d; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid #FF33CC; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
\n.infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
\n.pacman { width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 60px solid #FFCC00; border-left: 60px solid #FFCC00; border-bottom: 60px solid #FFCC00; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px;
\n}
\n.yin-yang { width: 96px; height: 48px; background: #fff; border-color: #000; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; }
\n.yin-yang:before { content: \u201c\u201d; position: absolute; top: 50%; left: 0; background: #fff; border: 18px solid #000; border-radius: 100%; width: 12px; height: 12px; }
\n.yin-yang:after { content: \u201c\u201d; position: absolute; top: 50%; left: 50%; background: #000; border: 18px solid #fff; border-radius:100%; width: 12px; height: 12px; }
\n<\/style>
\n<\/head>
\n<body>
\n<div class=\u201dwrap\u201d style=\u201dtop:30px; left:40px;\u201d>
\n<div class=\u201darrow\u201d><\/div>
\n<\/div>
\n<div class=\u201dwrap\u201d style=\u201dtop:20px; left:100px;\u201d>
\n<div class=\u201dstar-six\u201d><\/div>
\n<\/div>
\n<div class=\u201dwrap\u201d style=\u201dtop:20px; left:200px;\u201d>
\n<div class=\u201dstar-five\u201d><\/div>
\n<\/div>
\n<div class=\u201dwrap\u201d style=\u201dtop:20px; left:400px;\u201d>
\n<div class=\u201dheart\u201d><\/div>
\n<\/div>
\n<div class=\u201dwrap\u201d style=\u201dtop:220px; left:100px;\u201d>
\n<div class=\u201dinfinity\u201d><\/div>
\n<\/div>
\n<div class=\u201dwrap\u201d style=\u201dtop:220px; left:400px;\u201d>
\n<div class=\u201dpacman\u201d><\/div>
\n<\/div>
\n<div class=\u201dwrap\u201d style=\u201dtop:340px; left:200px;\u201d>
\n<div class=\u201dyin-yang\u201d><\/div>
\n<\/div>
\n<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"

\u8fd8\u662f\u548c\u524d\u9762\u7684tips\u4e00\u6837\uff0c\u591a\u7528after\u548cbefore\uff0c\u80fd\u7701\u4fe9\u6807\u7b7e\uff01\u4fe9\uff01\u6bd4\u5982\u8fd9\u4e00\u5806\u7684\u5f62\u72b6 \u4ee3\u7801\uff1a <!D […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[118],"tags":[119,271],"_links":{"self":[{"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/486"}],"collection":[{"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=486"}],"version-history":[{"count":0,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/486\/revisions"}],"wp:attachment":[{"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yanjingang.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}