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


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

\n

CSS border-image<\/h1>\n<\/p><\/div>\n
\n \u6b64CSS\u5c5e\u6027\u5b9a\u4e49\u4e86\u7528\u4f5c\u5143\u7d20\u8fb9\u6846\u7684\u56fe\u50cf\u3002\u5b83\u5728\u5143\u7d20\u5916\u90e8\u7ed8\u5236\u56fe\u50cf\uff0c\u5e76\u7528\u76f8\u5e94\u7684\u56fe\u50cf\u66ff\u6362\u5143\u7d20\u7684\u8fb9\u6846\u3002\u7528\u56fe\u50cf\u66ff\u6362\u5143\u7d20\u7684\u8fb9\u6846\u662f\u4e00\u9879\u6709\u8da3\u7684\u4efb\u52a1\u3002\n <\/div>\n
\n border-image <\/strong>\u5c5e\u6027\u53ef\u4ee5\u5e94\u7528\u4e8e\u9664\u5185\u90e8\u8868\u7684\u5143\u7d20\uff08\u4f8b\u5982\uff0c\u5185\u90e8\u5143\u7d20\uff09\u4e4b\u5916\u7684\u6240\u6709\u5143\u7d20\u3002\u5f53
\n border-collapse<\/strong>\u8bbe\u7f6e\u4e3a
\n collapse<\/strong>\u3002\n <\/div>\n
\n \u8fd9\u662f
\n border-image-source\uff0cborder-image-slice\uff0cborder-image-width\uff0cborder-image-outset <\/strong>\u548c
\n border-image-repeat <\/strong>\u7684\u7b80\u5199\u5c5e\u6027\u3002\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528
\n border-image <\/strong>\u5c5e\u6027\u7acb\u5373\u8bbe\u7f6e\u6240\u6709\u8fd9\u4e9b\u5c5e\u6027\u3002\u5982\u679c\u672a\u6307\u5b9a\u4efb\u4f55\u503c\uff0c\u5219\u5c06\u5b83\u4eec\u8bbe\u7f6e\u4e3a\u5176\u9ed8\u8ba4\u503c\u3002\u6b64\u5c5e\u6027\u7684\u9ed8\u8ba4\u503c\u5982\u4e0b\uff1a\n <\/div>\n
\n
 border-image: none 100% 1 0 stretch
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\u8bed\u6cd5<\/h3>\n
\n
 border-image: source slice width outset repeat | initial | inherit;
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n    \u6b64\u5c5e\u6027\u7684\u503c\u5217\u8868\u5982\u4e0b\u3002\n  <\/div>\n\n\n\n\n\n\n\n\n\n\n
\u503c<\/td>\n\u8bf4\u660e<\/td>\n<\/tr>\n
 border-image-source:<\/strong> <\/td>\n\u5b83\u6307\u5b9a\u8fb9\u6846\u56fe\u50cf\u7684\u6765\u6e90\u3002\u5b83\u8bbe\u7f6e\u56fe\u50cf\u7684\u8def\u5f84\uff0c\u6216\u8005\u53ef\u4ee5\u8bf4\u5b83\u6307\u5b9a\u4e86\u8981\u7528\u4f5c\u8fb9\u6846\u7684\u56fe\u50cf\u7684\u4f4d\u7f6e\u3002<\/td>\n<\/tr>\n
 border-image-slice:<\/strong> <\/td>\n\u5b83\u7528\u4e8e\u5bf9\u56fe\u50cf\u8fdb\u884c\u5206\u5272\u6216\u5207\u7247\uff0c\u8be5\u56fe\u50cf\u7531 border-image-source <\/strong>\u5c5e\u6027\u6307\u5b9a\u3002\u6b64\u5c5e\u6027\u7684\u503c\u6307\u5b9a\u5982\u4f55\u5bf9\u56fe\u50cf\u8fdb\u884c\u5207\u7247\u4ee5\u521b\u5efa\u8fb9\u6846\u3002\u6b64\u5c5e\u6027\u5c06\u56fe\u50cf\u5206\u4e3a\u4e5d\u4e2a\u90e8\u5206\uff1a
 \u56db\u4e2a\u89d2\u843d<\/span> \u56db\u6761\u8fb9\uff0c<\/span> \u4e00\u4e2a\u4e2d\u5fc3<\/span> \u53ef\u4ee5\u63a5\u53d7\u56db\u4e2a\u65e0\u5355\u4f4d\u7684\u6b63\u503c\u3002\u5176\u9ed8\u8ba4\u503c\u4e3a 100\uff05<\/strong>\u3002<\/td>\n<\/tr>\n
 border-image-width:<\/strong> <\/td>\n\u5b83\u8bbe\u7f6e\u8fb9\u6846\u56fe\u50cf\u7684\u5bbd\u5ea6\u3002\u5b83\u53ef\u4ee5\u63a5\u53d7\u65e0\u5355\u4f4d\u7684\u6b63\u503c\uff0c\u767e\u5206\u6bd4\u503c\u6216\u5173\u952e\u5b57auto<\/strong>\u3002\u5176\u9ed8\u8ba4\u503c\u4e3a 1 <\/strong>\u3002\u6211\u4eec\u6700\u591a\u53ef\u4ee5\u6307\u5b9a\u56db\u4e2a\u503c\u6765\u63d0\u4f9b\u5404\u4e2a\u8fb9\u7684\u5bbd\u5ea6\u3002<\/td>\n<\/tr>\n
 border-image-outset:<\/strong> <\/td>\n\u5b83\u8bbe\u7f6e\u4e86\u4ece\u8fb9\u6846\u6846\u4e2d\u663e\u793a\u8fb9\u6846\u56fe\u50cf\u7684\u7a7a\u95f4\u91cf\u3002<\/td>\n<\/tr>\n
 border-image-repeat:<\/strong> <\/td>\n\u5b83\u63a7\u5236\u56fe\u50cf\u7684\u91cd\u590d\u4ee5\u586b\u5145\u8fb9\u6846\u533a\u57df\u3002\u6211\u4eec\u6700\u591a\u53ef\u4ee5\u4e3a\u6b64\u5c5e\u6027\u6307\u5b9a\u4e24\u4e2a\u503c\u3002\u5982\u679c\u6211\u4eec\u6307\u5b9a\u4e00\u4e2a\u503c\uff0c\u90a3\u4e48\u5b83\u5c06\u540c\u65f6\u5e94\u7528\u4e8e\u5782\u76f4\u548c\u6c34\u5e73\u65b9\u5411\u3002\u4f46\u662f\uff0c\u5982\u679c\u6211\u4eec\u6307\u5b9a\u4e24\u4e2a\u503c\uff0c\u5219\u7b2c\u4e00\u4e2a\u503c\u5e94\u7528\u4e8e\u6c34\u5e73\u8fb9\uff0c\u7b2c\u4e8c\u4e2a\u503c\u5e94\u7528\u4e8e\u5782\u76f4\u8fb9\u3002
\u6b64\u5c5e\u6027\u7684\u503c\u5728\u4e0b\u9762\u5217\u51fa\u3002
 stretch<\/span> repeat<\/span> round<\/span> space<\/span> \u6b64\u5c5e\u6027\u7684\u9ed8\u8ba4\u503c\u4e3a stretch <\/strong>\u3002<\/td>\n<\/tr>\n
 Initial<\/strong> <\/td>\n\u5b83\u5c06\u5c5e\u6027\u8bbe\u7f6e\u4e3a\u5176\u9ed8\u8ba4\u503c\uff08\u8fb9\u6846\u56fe\u50cf\uff1a<\/strong>\u65e0100\uff051 0 Stretch\uff09\u3002<\/td>\n<\/tr>\n
 inherit<\/strong> <\/td>\n\u5b83\u4ece\u5176\u7236\u5143\u7d20\u7ee7\u627f\u5c5e\u6027\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n    \u73b0\u5728\uff0c\u8ba9\u6211\u4eec\u770b\u4e00\u4e9b\u793a\u4f8b\uff0c\u4ee5\u4e86\u89e3\u5982\u4f55\u4f7f\u7528
\n    border-image <\/strong>\u5c5e\u6027\u8bbe\u7f6e\u8fb9\u6846\u56fe\u50cf\u3002\n  <\/div>\n
\u793a\u4f8b<\/h3>\n
\n    \u5728\u6b64\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u5c06\u6bb5\u843d\u5143\u7d20\u7684\u8fb9\u6846\u66ff\u6362\u4e3a\u56fe\u50cf\u3002\u5728\u7b2c\u4e00\u6bb5\u4e2d\uff0c\u6211\u4eec\u6307\u5b9a
\n    border-image-repeat <\/strong>\u5c5e\u6027\u7684\u5355\u4e2a\u503c\uff08\u5373
\n    round <\/strong>\uff09\uff0c\u800c\u5728\u7b2c\u4e8c\u6bb5\u4e2d\uff0c\u6211\u4eec\u6307\u5b9a\u4e24\u4e2a\u503c\uff08
\n   \u5706\uff0c\u62c9\u4f38<\/strong>\uff09\uff0c\u7b2c\u4e00\u4e2a\u503c\u4e3a\u6c34\u5e73\u8fb9\uff0c\u7b2c\u4e8c\u4e2a\u503c\u4e3a\u5782\u76f4\u8fb9\u3002\n  <\/div>\n
\n
 <!DOCTYPE html>
 <html><\/span>
 <head><\/span>
     <title><\/span>
         CSS border-image Property
     <\/title><\/span>
     <style><\/span>
     p {
         border: 10px solid transparent;
         padding: 15px;
         text-align: center;
         font-size: 25px;
         color: darkviolet;
     }
     #border {
<\/span>         border-image: url('border.png'<\/span>) 60 \/ 20px 20px round;
     }
     #border1 {
<\/span>         border-image: url('diamond.png'<\/span>) 43 \/ 10px 15px round stretch;
     }
     <\/style><\/span>
 <\/head><\/span>
 <body><\/span>
     <h2><\/span>border-image property<\/h2><\/span>
     <p id=\"border\"<\/span>>
         Welcome to the bianchenghao6.com
     <\/p><\/span>
     <p id=\"border1\"<\/span>>
         Welcome to the bianchenghao6.com
     <\/p><\/span>
 <\/body><\/span>
 <\/html><\/span>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n   \u8f93\u51fa<\/strong>\n  <\/div>\n
  CSS border-image_https:\/\/bianchenghao6.com_\u3010CSS \u6559\u7a0b\u3011_\u7b2c1\u5f20 <\/p>\n
\n    \u6211\u4eec\u8fd8\u53ef\u4ee5\u5c06\u6e10\u53d8\u6307\u5b9a\u4e3a\u8fb9\u754c\u56fe\u50cf\u3002\n  <\/div>\n
\u793a\u4f8b-\u4f7f\u7528\u7ebf\u6027\u6e10\u53d8<\/h3>\n
\n    \u5728\u6b64\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528
\n   \u7ebf\u6027\u6e10\u53d8<\/strong>\u548c
\n   \u91cd\u590d\u7ebf\u6027\u6e10\u53d8<\/strong>\u4f5c\u4e3a\u6bb5\u843d\u5143\u7d20\u7684\u8fb9\u6846\u56fe\u50cf\u3002\n  <\/div>\n
\n
 <!DOCTYPE html>
 <html><\/span>
 <head><\/span>
     <title><\/span>
         CSS border-image Property
     <\/title><\/span>
     <style><\/span>
     p {
         border: 10px solid transparent;
         padding: 15px;
         text-align: center;
         font-size: 25px;
         color: darkviolet;
     }
     #border {
<\/span>         border-image: url('..\/uploads\/html\/border.jpg'<\/span>) 40 round stretch;
     }
     #border1 {
<\/span>         border-image: linear-gradient(orange, yellow, green) 40 \/ 30px 10px stretch;
     }
     #border2 {
<\/span>         border-image: repeating-linear-gradient(50deg, blue, yellow, lightgreen 20px) 30 \/ 20px 30px round;
     }
     <\/style><\/span>
 <\/head><\/span>
 <body><\/span>
     <h2><\/span>border-image property<\/h2><\/span>
     <p id=\"border\"<\/span>>
         Welcome to the bianchenghao6.com
     <\/p><\/span>
     <p id=\"border1\"<\/span>>
         Welcome to the bianchenghao6.com
     <\/p><\/span>
     <p id=\"border2\"<\/span>>
         Welcome to the bianchenghao6.com
     <\/p><\/span>
 <\/body><\/span>
 <\/html><\/span>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n   \u8f93\u51fa<\/strong>\n  <\/div>\n
  CSS border-image_https:\/\/bianchenghao6.com_\u3010CSS \u6559\u7a0b\u3011_\u7b2c2\u5f20 <\/p>\n
\u793a\u4f8b-\u4f7f\u7528\u5f84\u5411\u6e10\u53d8<\/h3>\n
\n    \u5728\u6b64\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528
\n    radial-gradient <\/strong>\u4f5c\u4e3a\u6bb5\u843d\u5143\u7d20\u7684\u8fb9\u6846\u56fe\u50cf\u3002\n  <\/div>\n
\n
 <!DOCTYPE html>
 <html>
 <head>
 <title>
 CSS border-image Property
 <\/title>
 <style>
 p{
 border: 10px solid transparent;
 padding: 15px;
 text-align:center;
 font-size: 25px;
 color: darkviolet;
 }
 #border1 {
<\/span> border-image: radial-gradient(circle, yellow, magenta, blue) 30 \/ 15px repeat;
 }
 #border2 {
<\/span> border-image: radial-gradient(farthest-side, red, yellow, green) 30 \/ 15px round;
 }
 <\/style>
 <\/head>
 <body>
 <h2>border-image property<\/h2>
 <p id = \"border1\">
 Welcome to the bianchenghao6.com
 <\/p>
 <p id = \"border2\">
 Welcome to the bianchenghao6.com
 <\/p>
 <\/body>
 <\/html>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n   \u8f93\u51fa<\/strong>\n  <\/div>\n
  CSS border-image_https:\/\/bianchenghao6.com_\u3010CSS \u6559\u7a0b\u3011_\u7b2c3\u5f20
\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-2430","post","type-post","status-publish","format-standard","hentry","category-css-jc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2430"}],"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=2430"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2430\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=2430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=2430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=2430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}