{"id":2354,"date":"2023-11-14T15:10:41","date_gmt":"2023-11-14T03:59:38","guid":{"rendered":""},"modified":"2023-11-14T11:59:38","modified_gmt":"2023-11-14T03:59:38","slug":"CSS button","status":"publish","type":"post","link":"https:\/\/bianchenghao6.com\/2354.html","title":{"rendered":"CSS button"},"content":{"rendered":"


\n <\/head>
\n <\/p>\n

\n

CSS button<\/h1>\n<\/p><\/div>\n
\n \u5728HTML\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528button\u6807\u7b7e\u6765\u521b\u5efa\u6309\u94ae\uff0c\u4f46\u662f\u901a\u8fc7\u4f7f\u7528CSS\u5c5e\u6027\uff0c\u6211\u4eec\u53ef\u4ee5\u4e3a\u6309\u94ae\u8bbe\u7f6e\u6837\u5f0f\u3002\u6309\u94ae\u53ef\u5e2e\u52a9\u6211\u4eec\u521b\u5efa\u7528\u6237\u4ea4\u4e92\u548c\u4e8b\u4ef6\u5904\u7406\u3002\u5b83\u4eec\u662f\u7f51\u9875\u4e2d\u5e7f\u6cdb\u4f7f\u7528\u7684\u5143\u7d20\u4e4b\u4e00\u3002\n <\/div>\n
\n \u5728\u8868\u5355\u63d0\u4ea4\u671f\u95f4\uff0c\u4e3a\u4e86\u67e5\u770b\u6216\u83b7\u53d6\u4e00\u4e9b\u4fe1\u606f\uff0c\u6211\u4eec\u901a\u5e38\u4f7f\u7528\u6309\u94ae\u3002\n <\/div>\n
\n \u8ba9\u6211\u4eec\u770b\u770b\u5176\u4e2d\u7684\u57fa\u672c\u6837\u5f0f\u3002\n <\/div>\n

\u6309\u94ae\u4e2d\u7684\u57fa\u672c\u6837\u5f0f<\/h2>\n
\n \u6709\u591a\u4e2a\u53ef\u7528\u4e8e\u5bf9\u6309\u94ae\u5143\u7d20\u8fdb\u884c\u6837\u5f0f\u8bbe\u7f6e\u7684\u5c5e\u6027\u3002\u8ba9\u6211\u4eec\u4e00\u4e2a\u63a5\u4e00\u4e2a\u5730\u8ba8\u8bba\u5b83\u4eec\u3002\n <\/div>\n

background-color<\/h2>\n
\n \u6b63\u5982\u6211\u4eec\u524d\u9762\u6240\u8ba8\u8bba\u7684\uff0c\u6b64\u5c5e\u6027\u7528\u4e8e\u8bbe\u7f6e
\n \u6309\u94ae\u5143\u7d20\u7684\u80cc\u666f\u989c\u8272\u3002\n <\/div>\n
\n \u8bed\u6cd5<\/strong>\n <\/div>\n
\n
 element {
     \/\/ background-color style
 }
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n   \u793a\u4f8b<\/strong>\n  <\/div>\n
\n
 <!DOCTYPE html> 
 <html> 
 <head> 
     <title> 
         \u6309\u94ae\u80cc\u666f\u8272
     <\/title> 
     <style> 
     body{
        text-align: center;
     }
         button {
            color:lightgoldenrodyellow;
             font-size: 30px; 
         } 
         .b1 { 
             background-color: red; 
         } 
         .b2 { 
             background-color: blue; 
         } 
         .b3 { 
             background-color: violet; 
         } 
     <\/style> 
 <\/head> 
 <body> 
    <h1>background-color\u5c5e\u6027<\/h1>
     <button class=\"b1\">\u7ea2\u8272\u6309\u94ae<\/button> 
     <button class=\"b2\">\u84dd\u8272\u6309\u94ae<\/button> 
     <button class=\"b3\">\u7d2b\u7f57\u5170\u8272\u6309\u94ae<\/button> 
 <\/body> 
 <\/html> 
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n   \u8f93\u51fa<\/strong>\n  <\/div>\n
  CSS button_https:\/\/bianchenghao6.com_\u3010CSS \u6559\u7a0b\u3011_\u7b2c1\u5f20 <\/p>\n
 border <\/h2>\n
\n    \u5b83\u7528\u4e8e\u8bbe\u7f6e\u5e7f\u544a\u7684
\n   border\u6309\u94ae\u3002\u5b83\u662f
\n   \u8fb9\u6846\u5bbd\u5ea6\uff0c\u8fb9\u6846\u989c\u8272<\/strong>\u548c
\n   \u8fb9\u6846\u6837\u5f0f<\/strong>\u7684\u7b80\u5199\u5c5e\u6027\u3002\n  <\/div>\n
\n   \u8bed\u6cd5<\/strong>
\n    <\/p>\n
\n
 element {
     \/\/ border style
 }
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n    \u793a\u4f8b<\/strong>\n   <\/div>\n
\n
 <!DOCTYPE html> 
 <html> 
 <head> 
     <title> 
         \u6309\u94ae\u80cc\u666f\u8272
     <\/title> 
     <style> 
     body{
        text-align: center;
     }
         button {
            color:lightgoldenrodyellow;
             font-size: 30px; 
         } 
         .b1 { 
             background-color: red; 
             border:none;
         } 
         .b2 { 
             background-color: blue; 
             border:5px brown solid;
         } 
         .b3 { 
             background-color: yellow; 
             color:black;
             border:5px red groove;
         } 
         .b4{
            background-color:orange;
            border: 5px red dashed;
         }
         .b5{
            background-color: gray;
            border: 5px black dotted;
         }
         .b6{
            background-color: lightblue;
            border:5px blue double; 
         }
     <\/style> 
 <\/head> 
 <body> 
    <h1>The border property<\/h1>
     <button class=\"b1\">none<\/button> 
     <button class=\"b2\">solid<\/button> 
     <button class=\"b3\">groove<\/button> 
     <button class=\"b4\">dashed<\/button> 
     <button class=\"b5\">dotted<\/button>
     <button class=\"b6\">double<\/button> 
 <\/body> 
 <\/html>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n    \u8f93\u51fa<\/strong>\n   <\/div>\n
   CSS button_https:\/\/bianchenghao6.com_\u3010CSS \u6559\u7a0b\u3011_\u7b2c2\u5f20 <\/p>\n
border-radius<\/h2>\n
\n     \u5b83\u7528\u4e8e\u5236\u4f5c\u6309\u94ae\u7684\u5706\u89d2\u3002\u8bbe\u7f6e\u6309\u94ae\u7684\u8fb9\u6846\u534a\u5f84\u3002\n   <\/div>\n
\n    \u8bed\u6cd5<\/strong>\n   <\/div>\n
\n
 element {
     \/\/ border-radius property
 }
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n    \u793a\u4f8b<\/strong>\n   <\/div>\n
\n
 <!DOCTYPE html> 
 <html> 
 <head> 
     <title> 
         button background Color 
     <\/title> 
     <style> 
     body{
        text-align: center;
     }
         button {
            color:lightgoldenrodyellow;
             font-size: 30px; 
         } 
         .b1 { 
             background-color: red; 
             border:none;
         } 
         .b2 { 
             background-color: blue; 
             border:5px brown solid;
             border-radius: 7px;
         } 
         .b3 { 
             background-color: yellow; 
             color:black;
             border:5px red groove;
             border-radius: 10px;
         } 
         .b4{
            background-color:orange;
            border: 5px red dashed;
            border-radius: 20px;
         }
         .b5{
            background-color: gray;
            border: 5px black dotted;
            border-radius: 30px;
         }
         .b6{
            background-color: lightblue;
            border:5px blue double; 
            border-radius: 25px;
         }
     <\/style> 
 <\/head> 
 <body> 
    <h1>The border-radius property<\/h1>
    <h2>Below there is the border name and border-radius<\/h2>
     <button class=\"b1\">none<\/button> 
     <button class=\"b2\">solid 7px<\/button> 
     <button class=\"b3\">groove 10px<\/button> 
     <button class=\"b4\">dashed 20px<\/button> 
     <button class=\"b5\">dotted 30px<\/button>
     <button class=\"b6\">double 25px<\/button> 
 <\/body> 
 <\/html>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n    \u8f93\u51fa<\/strong>\n   <\/div>\n
   CSS button_https:\/\/bianchenghao6.com_\u3010CSS \u6559\u7a0b\u3011_\u7b2c3\u5f20 <\/p>\n
 box-shadow <\/h2>\n
\n     \u987e\u540d\u601d\u4e49\uff0c\u5b83\u7528\u4e8e\u521b\u5efa\u6309\u94ae\u6846\u7684\u9634\u5f71\u3002\u7528\u4e8e\u5c06\u9634\u5f71\u6dfb\u52a0\u5230\u6309\u94ae\u3002\u6211\u4eec\u8fd8\u53ef\u4ee5\u5728\u9f20\u6807\u60ac\u505c\u65f6\u5728\u6309\u94ae\u4e0a\u521b\u5efa\u9634\u5f71\u3002\n   <\/div>\n
\n    \u8bed\u6cd5<\/strong>\n   <\/div>\n
\n
 box-shadow: [horizontal offset] [vertical offset] [blur radius] 
             [optional spread radius] [color];
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n    \u793a\u4f8b<\/strong>\n   <\/div>\n
\n
 <!DOCTYPE html> 
 <html> 
 <head> 
     <title> 
         \u6309\u94ae\u80cc\u666f\u8272 
     <\/title> 
     <style> 
     body{
        text-align: center;
     }
         button {
            color:lightgoldenrodyellow;
             font-size: 30px; 
         } 
         .b1{
            background-color: lightblue;
            border:5px red double; 
            border-radius: 25px;
            color:black;
            box-shadow : 0 8px 16px 0 black, 
                     0 6px 20px 0 rgba(0, 0, 0, 0.19); 
         }
         .b2{
          background-color: lightblue;
            border:5px red dotted; 
            color:black;
            border-radius: 25px;
         }
         .b2:hover{
            box-shadow : 0 8px 16px 0 black, 
                     0 6px 20px 0 rgba(0, 0, 0, 0.19); 
         }
         <\/style> 
 <\/head> 
 <body> 
     <button class=\"b1\">Shadow on button<\/button> 
     <button class=\"b2\">Box-shadow on hover<\/button>
 <\/body> 
 <\/html>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n    \u8f93\u51fa<\/strong>\n   <\/div>\n
   CSS button_https:\/\/bianchenghao6.com_\u3010CSS \u6559\u7a0b\u3011_\u7b2c4\u5f20 <\/p>\n
padding<\/h2>\n
\n     \u7528\u4e8e\u8bbe\u7f6e\u5143\u7d20\u8fb9\u6846\u4e0e\u5143\u7d20\u5185\u5bb9\u4e4b\u95f4\u7684\u7a7a\u95f4\u3002\n   <\/div>\n
\n    \u8bed\u6cd5<\/strong>\n   <\/div>\n
\n
 element {
     \/\/ padding style
 }
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n     \u8ba9\u6211\u4eec\u7528\u63d2\u56fe\u6765\u7406\u89e3\u5b83\u3002\n   <\/div>\n
\n    \u793a\u4f8b<\/strong>\n   <\/div>\n
\n
 <!DOCTYPE html> 
 <html> 
 <head> 
     <title> 
         \u6309\u94ae\u80cc\u666f\u8272 
     <\/title> 
     <style> 
     body{
        text-align: center;
     }
         button {
            color:lightgoldenrodyellow;
             font-size: 30px; 
         } 
         .b1 { 
             background-color: red; 
             border:none;
             padding: 16px;
         } 
         .b2 { 
             background-color: blue; 
             border:5px brown solid;
             padding:15px 30px 25px 40px;
         } 
         .b3 { 
             background-color: yellow; 
             color:black;
             border:5px red groove;
             padding-top:30px;
         } 
         .b4{
            background-color:orange;
            border: 5px red dashed;
            padding-bottom:40px;
         }
         .b5{
            background-color: gray;
            border: 5px black dotted;
            padding-left: 40px;
         }
         .b6{
            background-color: lightblue;
            border:5px blue double; 
            padding-right: 40px;;
         }
     <\/style> 
 <\/head> 
 <body> 
    <h1>The padding property<\/h1>
     <button class=\"b1\">none<\/button> 
     <button class=\"b2\">solid<\/button> 
     <button class=\"b3\">groove<\/button> 
     <button class=\"b4\">dashed<\/button> 
     <button class=\"b5\">dotted<\/button>
     <button class=\"b6\">double<\/button> 
 <\/body> 
 <\/html>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n    \u8f93\u51fa<\/strong>\n   <\/div>\n
   CSS button_https:\/\/bianchenghao6.com_\u3010CSS \u6559\u7a0b\u3011_\u7b2c5\u5f20\n  <\/div>\n
\n   << Python \u8bed\u6cd5 \n   Python \u53d8\u91cf >>\n  <\/div>\n
 <\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"zh-cn","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[175],"tags":[],"class_list":["post-2354","post","type-post","status-publish","format-standard","hentry","category-css-jc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2354"}],"collection":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/comments?post=2354"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2354\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=2354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=2354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=2354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}