{"id":5564,"date":"2021-12-28T11:12:29","date_gmt":"2021-12-28T03:12:29","guid":{"rendered":"http:\/\/www.youngzi.cn\/?p=5564"},"modified":"2021-12-28T11:12:30","modified_gmt":"2021-12-28T03:12:30","slug":"css2-css3%e8%be%b9%e6%a1%86%e6%a0%b7%e5%bc%8f%ef%bc%9aborder%e6%9c%89%e5%93%aa%e4%ba%9b%e5%b1%9e%e6%80%a7%e5%80%bc%ef%bc%9f","status":"publish","type":"post","link":"http:\/\/www.youngzi.cn\/en\/5564.html","title":{"rendered":"CSS2\/CSS3\u8fb9\u6846\u6837\u5f0f\uff1aborder\u6709\u54ea\u4e9b\u5c5e\u6027\u503c\uff1f"},"content":{"rendered":"
CSS border \u5c5e\u6027\u5141\u8bb8\u60a8\u6307\u5b9a\u5143\u7d20\u8fb9\u6846\u7684\u6837\u5f0f\u3001\u5bbd\u5ea6\u548c\u989c\u8272\u3002<\/p>\n<\/div>\n<\/div>\n\n\n\n CSS\u8fb9\u6846 border<\/span><\/strong><\/p>\n\n\n\n 1.\u8bbe\u7f6e\u8fb9\u6846\u6837\u5f0f\uff1a<\/strong><\/p>\n\n\n\n border-style:\u6837\u5f0f\uff1b<\/p>\n\n\n\n \u53ef\u9009\u7684\u6837\u5f0f\u6709\uff1anone \u65e0\u8fb9\u6846 \uff0cdotted \u865a\u7ebf\u8fb9\u6846 \uff0cdashed \u865a\u7ebf\u8fb9\u6846 \uff0csolid \u5b9e\u7ebf\u8fb9\u6846 \uff0cdouble \u53cc\u8fb9\u6846 \uff0cgroove \u51f9\u69fd\u8fb9\u6846\uff0c ridge \u5784\u72b6\u8fb9\u6846 \uff0cinset \u5d4c\u5165\u8fb9\u6846 \uff0coutset \u5916\u51f8\u8fb9\u6846 \uff0chidden \u9690\u85cf\u8fb9\u6846<\/span><\/p>\n\n\n\n border-top-style:none; \u4e0a\u8fb9\u6846\u6837\u5f0f<\/p>\n\n\n\n border-bottom-style:solid; \u4e0b\u8fb9\u6846\u6837\u5f0f<\/p>\n\n\n\n border-left-style: dashed\uff1b \u5de6\u8fb9\u6846\u6837\u5f0f<\/p>\n\n\n\n border-right-style:double; \u53f3\u8fb9\u6846\u6837\u5f0f<\/p>\n\n\n\n border-style:dotted solid dashed double; \uff08\u4e0a\u53f3\u4e0b\u5de6\u8fb9\u6846\uff09<\/p>\n\n\n\n 2.\u8bbe\u7f6e\u8fb9\u6846\u5bbd\u5ea6\uff1a<\/strong><\/p>\n\n\n\n \u8fb9\u6846\u5bbd\u5ea6\u4e0d\u80fd\u5355\u72ec\u8bbe\u7f6e\uff0c\u5fc5\u987b\u5728\u8bbe\u7f6e\u4e86\u8fb9\u6846\u6837\u5f0f\u540e\u5bbd\u5ea6\u624d\u4f1a\u751f\u6548<\/p>\n\n\n\n border-width:1px; \u5bbd\u5ea6\u4e3a1\u50cf\u7d20\u7684\u8fb9\u6846<\/p>\n\n\n\n border-top-width:15px; \u4e0a\u8fb9\u684615\u50cf\u7d20<\/p>\n\n\n\n border-bottom-width:15px; \u4e0b\u8fb9\u6846<\/p>\n\n\n\n border-left-width:15px; \u5de6\u8fb9\u6846<\/p>\n\n\n\n border-right-width:15px; \u53f3\u8fb9\u6846<\/p>\n\n\n\n CSS\u8f6e\u5ed3 outline<\/span><\/strong><\/p>\n\n\n\n outline\uff08\u8f6e\u5ed3\uff09\u662f\u7ed8\u5236\u4e8e\u5143\u7d20\u5468\u56f4\u7684\u4e00\u6761\u7ebf\uff0c\u4f4d\u4e8e\u8fb9\u6846\u8fb9\u7f18\u5916\u56f4\uff0c\u53ef\u4ee5\u8d77\u5230\u7a81\u51fa\u5143\u7d20\u7684\u4f5c\u7528 \u53ef\u4ee5\u8bbe\u7f6e\u7684\u5c5e\u6027\u6709 \u989c\u8272 \u6837\u5f0f \u5bbd\u5ea6<\/p>\n\n\n\n 1\u3001\u8f6e\u5ed3\u989c\u8272<\/strong><\/p>\n\n\n\n outline-color\uff1ared\uff1b<\/p>\n\n\n\n 2.\u8f6e\u5ed3\u6837\u5f0f<\/strong><\/p>\n\n\n\n outline-style\uff1a\u6837\u5f0f\u503c\uff1b<\/p>\n\n\n\n \u6837\u5f0f\u503c\u53c2\u8003\u5982\u4e0b\uff1a<\/p>\n\n\n\n none \u9ed8\u8ba4\u3002\u5b9a\u4e49\u65e0\u8f6e\u5ed3\u3002<\/p>\n\n\n\n dotted \u5b9a\u4e49\u70b9\u72b6\u7684\u8f6e\u5ed3\u3002<\/p>\n\n\n\n dashed \u5b9a\u4e49\u865a\u7ebf\u8f6e\u5ed3\u3002<\/p>\n\n\n\n solid \u5b9a\u4e49\u5b9e\u7ebf\u8f6e\u5ed3\u3002<\/p>\n\n\n\n double \u5b9a\u4e49\u53cc\u7ebf\u8f6e\u5ed3\u3002\u53cc\u7ebf\u7684\u5bbd\u5ea6\u7b49\u540c\u4e8e outline-width \u7684\u503c\u3002<\/p>\n\n\n\n groove \u5b9a\u4e49 3D \u51f9\u69fd\u8f6e\u5ed3\u3002\u6b64\u6548\u679c\u53d6\u51b3\u4e8e outline-color \u503c\u3002<\/p>\n\n\n\n ridge \u5b9a\u4e49 3D \u51f8\u69fd\u8f6e\u5ed3\u3002\u6b64\u6548\u679c\u53d6\u51b3\u4e8e outline-color \u503c\u3002<\/p>\n\n\n\n inset \u5b9a\u4e49 3D \u51f9\u8fb9\u8f6e\u5ed3\u3002\u6b64\u6548\u679c\u53d6\u51b3\u4e8e outline-color \u503c\u3002<\/p>\n\n\n\n outset \u5b9a\u4e49 3D \u51f8\u8fb9\u8f6e\u5ed3\u3002\u6b64\u6548\u679c\u53d6\u51b3\u4e8e outline-color \u503c\u3002<\/p>\n\n\n\n 3\u3001\u8f6e\u5ed3\u5bbd\u5ea6\uff1a<\/strong><\/p>\n\n\n\n outline-width\uff1a\u5bbd\u5ea6\u503c\uff1b<\/p>\n\n\n\n \u53ef\u80fd\u51fa\u73b0\u7684\u5bbd\u5ea6\u503c\u53c2\u8003\u5982\u4e0b\uff1b<\/p>\n\n\n\n thin \u89c4\u5b9a\u7ec6\u8f6e\u5ed3\u3002<\/p>\n\n\n\n medium \u9ed8\u8ba4\u3002\u89c4\u5b9a\u4e2d\u7b49\u7684\u8f6e\u5ed3\u3002<\/p>\n\n\n\n thick \u89c4\u5b9a\u7c97\u7684\u8f6e\u5ed3\u3002<\/p>\n\n\n\n length \u5141\u8bb8\u60a8\u89c4\u5b9a\u8f6e\u5ed3\u7c97\u7ec6\u7684\u503c\u3002<\/p>\n\n\n\n CSS\u5916\u8fb9\u8ddd margin<\/span><\/strong><\/p>\n\n\n\n 1\u3001\u4ec0\u4e48\u662f\u5916\u8fb9\u8ddd<\/strong><\/p>\n\n\n\n \u5916\u8fb9\u8ddd\u63a7\u5236\u5757\u7ea7\u5143\u7d20\u4e4b\u95f4\u7684\u8ddd\u79bb\uff0c\u4ed6\u4eec\u662f\u900f\u660e\u4e0d\u53ef\u89c1\u7684\uff0c\u5305\u62ecmargin-top, margin-right, margin-bottom, margin-left<\/p>\n\n\n\n 2.\u5916\u8fb9\u8ddd\u7684\u5199\u6cd5<\/strong><\/p>\n\n\n\n \uff081\uff09margin: 40px 30px 20px 10px; \u4e0a\u53f3\u4e0b\u5de6<\/p>\n\n\n\n \uff082\uff09margin:30px 40px 20px; \u4e0a \u5de6\u53f3 \u4e0b<\/p>\n\n\n\n \uff083\uff09margin:30px 40px; \u4e0a\u4e0b \u5de6\u53f3<\/p>\n\n\n\n \uff084\uff09margin:40px; \u4e0a\u4e0b\u5de6\u53f3<\/p>\n\n\n\n 3.\u53ef\u80fd\u7684\u503c<\/strong><\/p>\n\n\n\n \uff081\uff09length \u89c4\u5b9a\u5177\u4f53\u5355\u4f4d\u8bb0\u7684\u5916\u8fb9\u8ddd\u957f\u5ea6<\/p>\n\n\n\n \uff082\uff09% \u57fa\u4e8e\u7236\u5143\u7d20\u7684\u5bbd\u5ea6\u7684\u5916\u8fb9\u8ddd\u7684\u957f\u5ea6<\/p>\n\n\n\n \uff083\uff09auto \u6d4f\u89c8\u5668\u8ba1\u7b97\u5916\u8fb9\u8ddd<\/p>\n\n\n\n \u56db\u3001CSS\u5185\u8fb9\u8dddpadding<\/span><\/strong><\/p>\n\n\n\n 1.\u4ec0\u4e48\u662f\u5185\u8fb9\u8ddd<\/strong><\/p>\n\n\n\n \u63a7\u5236\u5757\u7ea7\u5143\u7d20\u5185\u90e8content\u548cborder\u4e4b\u95f4\u7684\u8ddd\u79bb<\/p>\n\n\n\n 2\u3001\u5e38\u7528\u5199\u6cd5<\/strong><\/p>\n\n\n\n \uff081\uff09padding: 40px 30px 20px 10px; \u4e0a\u53f3\u4e0b\u5de6<\/p>\n\n\n\n \uff082\uff09padding:30px 40px 20px; \u4e0a \u5de6\u53f3 \u4e0b<\/p>\n\n\n\n \uff083\uff09padding:30px 40px; \u4e0a\u4e0b \u5de6\u53f3<\/p>\n\n\n\n \uff084\uff09padding:40px; \u4e0a\u4e0b\u5de6\u53f3<\/p>\n\n\n\n 3.\u53ef\u80fd\u53d6\u7684\u503c<\/strong><\/p>\n\n\n\n \uff081\uff09length \u89c4\u5b9a\u5177\u4f53\u5355\u4f4d\u8bb0\u7684\u5916\u8fb9\u8ddd\u957f\u5ea6<\/p>\n\n\n\n \uff082\uff09% \u57fa\u4e8e\u7236\u5143\u7d20\u7684\u5bbd\u5ea6\u7684\u5916\u8fb9\u8ddd\u7684\u957f\u5ea6<\/p>\n\n\n\n \uff083\uff09auto \u6d4f\u89c8\u5668\u8ba1\u7b97\u5916\u8fb9\u8ddd<\/figure>\n\n\n\n
<\/p>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":5565,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"themepark_post_bcolor":"#f5f5f5","themepark_post_width":"1022px","themepark_post_img":"","themepark_post_img_po":"left","themepark_post_img_re":false,"themepark_post_img_cover":false,"themepark_post_img_fixed":false,"themepark_post_hide_title":false,"themepark_post_main_b":"","themepark_post_main_p":100,"themepark_paddingblock":false,"footnotes":""},"categories":[4,18],"tags":[19],"class_list":["post-5564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jishufuwu","category-wangyesheji","tag-css"],"metadata":{"_edit_lock":["1640661392:1"],"_thumbnail_id":["5565"],"_edit_last":["1"],"wb_bsl_daily_push":["0"],"catce":["sidebar-widgets4"],"themepark_seo_title":["CSS2\/CSS3\u8fb9\u6846\u6837\u5f0f\uff1aborder\u6709\u54ea\u4e9b\u5c5e\u6027\u503c\uff1f"],"themepark_seo_description":["CSS2\/CSS3\u8fb9\u6846\u6837\u5f0f\uff1aborder\u6709\u54ea\u4e9b\u5c5e\u6027\u503c\uff1f"],"themepark_seo_keyword":["CSS,CSS3,CSS\u6837\u5f0f,CSS\u57fa\u7840\u77e5\u8bc6,CSS\u5199\u6cd5,CSS\u6559\u5b66,CSS\u77e5\u8bc6\u70b9,CSS\u8bed\u6cd5\u8be6\u89e3,CSS\u7528\u5904,CSS\u529f\u80fd,CSS\u4ee3\u7801,CSS3\u548cCSS\u7684\u533a\u522b"],"_yoast_wpseo_primary_category":["4"],"_yoast_wpseo_content_score":["90"],"_yoast_wpseo_estimated-reading-time-minutes":["2"],"views":["4594"],"url_in_baidu_ymd":["2022-06-28 00:23:23"],"url_in_baidu":["2"]},"yoast_head":"\n