{"id":1053,"date":"2017-03-15T13:17:39","date_gmt":"2017-03-15T05:17:39","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=1053"},"modified":"2017-03-15T13:17:39","modified_gmt":"2017-03-15T05:17:39","slug":"8%e6%ac%be%e5%a5%bd%e7%9c%8b%e7%9a%84%e7%ba%afcss3%e6%90%9c%e7%b4%a2%e6%a1%86","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=1053","title":{"rendered":"8\u6b3e\u597d\u770b\u7684\u7eafCSS3\u641c\u7d22\u6846"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>8\u6b3e\u7eafCSS3\u641c\u7d22\u6846<\/title>\r\n\r\n  <link href=\"http:\/\/cdn.bootcss.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\" rel=\"stylesheet\">\r\n  <link rel=\"stylesheet\" href=\"style.css\">\r\n  <style>\r\n    * {\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    body {\r\n      margin: 0;\r\n      padding: 0;\r\n      background: #494A5F;\r\n      font-weight: 500;\r\n      font-family: \"Microsoft YaHei\",\"\u5b8b\u4f53\",\"Segoe UI\", \"Lucida Grande\", Helvetica, Arial,sans-serif, FreeSans, Arimo;\r\n    }\r\n\r\n    #container {\r\n      width: 500px;\r\n      height: 820px;\r\n      margin: 0 auto;\r\n    }\r\n    div.search {padding: 30px 0;}\r\n\r\n    form {\r\n      position: relative;\r\n      width: 300px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    input, button {\r\n      border: none;\r\n      outline: none;\r\n    }\r\n\r\n    input {\r\n      width: 100%;\r\n      height: 42px;\r\n      padding-left: 13px;\r\n    }\r\n\r\n    button {\r\n      height: 42px;\r\n      width: 42px;\r\n      cursor: pointer;\r\n      position: absolute;\r\n    }\r\n\r\n    \/*\u641c\u7d22\u68461*\/\r\n    .bar1 {background: #A3D0C3;}\r\n    .bar1 input {\r\n      border: 2px solid #7BA7AB;\r\n      border-radius: 5px;\r\n      background: #F9F0DA;\r\n      color: #9E9C9C;\r\n    }\r\n    .bar1 button {\r\n      top: 0;\r\n      right: 0;\r\n      background: #7BA7AB;\r\n      border-radius: 0 5px 5px 0;\r\n    }\r\n    .bar1 button:before {\r\n      content: \"\\f002\";\r\n      font-family: FontAwesome;\r\n      font-size: 16px;\r\n      color: #F9F0DA;\r\n    }\r\n\r\n    \/*\u641c\u7d22\u68462*\/\r\n    .bar2 {background: #DABB52;}\r\n    .bar2 input, .bar2 button {\r\n      border-radius: 3px;\r\n    }\r\n    .bar2 input {\r\n      background: #F9F0DA;\r\n    }\r\n    .bar2 button {\r\n      height: 26px;\r\n      width: 26px;\r\n      top: 8px;\r\n      right: 8px;\r\n      background: #F15B42;\r\n    }\r\n    .bar2 button:before {\r\n      content: \"\\f105\";\r\n      font-family: FontAwesome;\r\n      color: #F9F0DA;\r\n      font-size: 20px;\r\n      font-weight: bold;\r\n    }\r\n\r\n    \/*\u641c\u7d22\u68463*\/\r\n    .bar3 {background: #F9F0DA;}\r\n    .bar3 form {background: #A3D0C3;}\r\n    .bar3 input, .bar3 button {\r\n      background: transparent;\r\n    }\r\n    .bar3 button {\r\n      top: 0;\r\n      right: 0;\r\n    }\r\n    .bar3 button:before {\r\n      content: \"\\f002\";\r\n      font-family: FontAwesome;\r\n      font-size: 16px;\r\n      color: #F9F0DA;\r\n    }\r\n\r\n    \/*\u641c\u7d22\u68464*\/\r\n    .bar4 {background: #F15B42;}\r\n    .bar4 form {\r\n      background: #F9F0DA;\r\n      border-bottom: 2px solid #BE290E;\r\n    }\r\n    .bar4 input, .bar4 button {\r\n      background: transparent;\r\n    }\r\n    .bar4 button {\r\n      top: 0;\r\n      right: 0;\r\n    }\r\n    .bar4 button:before {\r\n      content: \"\\f178\";\r\n      font-family: FontAwesome;\r\n      font-size: 20px;\r\n      color: #be290e;\r\n    }\r\n\r\n    \/*\u641c\u7d22\u68465*\/\r\n    .bar5 {background: #683B4D;}\r\n    .bar5 input, .bar5 button {\r\n      background: transparent;\r\n    }\r\n    .bar5 input {\r\n      border: 2px solid #F9F0DA;\r\n    }\r\n    .bar5 button {\r\n      top: 0;\r\n      right: 0;\r\n    }\r\n    .bar5 button:before {\r\n      content: \"\\f002\";\r\n      font-family: FontAwesome;\r\n      font-size: 16px;\r\n      color: #F9F0DA;\r\n    }\r\n    .bar5 input:focus {\r\n        border-color: #311c24\r\n    }\r\n\r\n    \/*\u641c\u7d22\u68466*\/\r\n    .bar6 {background: #F9F0DA;}\r\n    .bar6 input {\r\n      border: 2px solid #c5464a;\r\n      border-radius: 5px;\r\n      background: transparent;\r\n      top: 0;\r\n      right: 0;\r\n    }\r\n    .bar6 button {\r\n      background: #c5464a;\r\n      border-radius: 0 5px 5px 0;\r\n      width: 60px;\r\n      top: 0;\r\n      right: 0;\r\n    }\r\n    .bar6 button:before {\r\n      content: \"\u641c\u7d22\";\r\n      font-size: 13px;\r\n      color: #F9F0DA;\r\n    }\r\n\r\n\r\n    \/*\u641c\u7d22\u68467*\/\r\n    .bar7 {background: #7BA7AB;}\r\n    .bar7 form {\r\n      height: 42px;\r\n    }\r\n    .bar7 input {\r\n      width: 250px;\r\n      border-radius: 42px;\r\n      border: 2px solid #324B4E;\r\n      background: #F9F0DA;\r\n      transition: .3s linear;\r\n      float: right;\r\n    }\r\n    .bar7 input:focus {\r\n      width: 300px;\r\n    }\r\n    .bar7 button {\r\n      background: none;\r\n      top: -2px;\r\n      right: 0;\r\n    }\r\n    .bar7 button:before{\r\n      content: \"\\f002\";\r\n      font-family: FontAwesome;\r\n      color: #324b4e;\r\n    }\r\n\r\n    \/*\u641c\u7d22\u68468*\/\r\n    .bar8 {background: #B46381;}\r\n    .bar8 form {\r\n        height: 42px;\r\n    }\r\n    .bar8 input {\r\n      width: 0;\r\n      padding: 0 42px 0 15px;\r\n      border-bottom: 2px solid transparent;\r\n      background: transparent;\r\n      transition: .3s linear;\r\n      position: absolute;\r\n      top: 0;\r\n      right: 0;\r\n      z-index: 2;\r\n    }\r\n    .bar8 input:focus {\r\n      width: 300px;\r\n      z-index: 1;\r\n      border-bottom: 2px solid #F9F0DA;\r\n    }\r\n    .bar8 button {\r\n      background: #683B4D;\r\n      top: 0;\r\n      right: 0;\r\n    }\r\n    .bar8 button:before {\r\n      content: \"\\f002\";\r\n      font-family: FontAwesome;\r\n      font-size: 16px;\r\n      color: #F9F0DA;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"container\">\r\n  <div class=\"search bar1\">\r\n    <form>\r\n      <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n      <button type=\"submit\"><\/button>\r\n    <\/form>\r\n  <\/div>\r\n\r\n  <div class=\"search bar2\">\r\n    <form>\r\n      <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n      <button type=\"submit\"><\/button>\r\n    <\/form>\r\n  <\/div>\r\n\r\n  <div class=\"search bar3\">\r\n    <form>\r\n      <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n      <button type=\"submit\"><\/button>\r\n    <\/form>\r\n  <\/div>\r\n\r\n  <div class=\"search bar4\">\r\n    <form>\r\n      <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n      <button type=\"submit\"><\/button>\r\n    <\/form>\r\n  <\/div>\r\n\r\n  <div class=\"search bar5\">\r\n    <form>\r\n      <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n      <button type=\"submit\"><\/button>\r\n    <\/form>\r\n  <\/div>\r\n\r\n  <div class=\"search bar6\">\r\n    <form>\r\n      <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n      <button type=\"submit\"><\/button>\r\n    <\/form>\r\n  <\/div>\r\n\r\n  <div class=\"search bar7\">\r\n    <form>\r\n      <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n      <button type=\"submit\"><\/button>\r\n    <\/form>\r\n  <\/div>\r\n\r\n  <div class=\"search bar8\">\r\n    <form>\r\n      <input type=\"text\" placeholder=\"\u8bf7\u8f93\u5165\u60a8\u8981\u641c\u7d22\u7684\u5185\u5bb9...\">\r\n      <button type=\"submit\"><\/button>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » 8\u6b3e\u597d\u770b\u7684\u7eafCSS3\u641c\u7d22\u6846<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <meta name=”viewport […]<\/p>\n","protected":false},"author":1,"featured_media":316,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[28,12],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1053"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1053"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1053\/revisions"}],"predecessor-version":[{"id":1054,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1053\/revisions\/1054"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/316"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1053"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}