CSS box-shadow<\/h1>\n<\/p><\/div>\n\n CSS box-shadow\u7528\u4e8e\u5728\u5143\u7d20\u6846\u67b6\u5468\u56f4\u6dfb\u52a0\u7c7b\u4f3c\u9634\u5f71\u7684\u6548\u679c\u3002\n <\/div>\n\n \u8bed\u6cd5<\/strong>\n <\/div>\n\n box-shadow: h-offset v-offset blur spread color |inset|inherit|initial|none;
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8ba9\u6211\u4eec\u4e86\u89e3\u5c5e\u6027\u503c\u3002\n <\/div>\n\n h-offset\uff1a<\/strong>\u6c34\u5e73\u8bbe\u7f6e\u9634\u5f71\u4f4d\u7f6e\u3002\u5176\u6b63\u503c\u4f1a\u5c06\u9634\u5f71\u8bbe\u7f6e\u5728\u6846\u7684\u53f3\u4fa7\u3002\u5176\u8d1f\u503c\u7528\u4e8e\u8bbe\u7f6e\u6846\u5de6\u4fa7\u7684\u9634\u5f71\u3002\n <\/div>\n\n v-offset\uff1a<\/strong>\u4e0eh-offset\u4e0d\u540c\uff0c\u5b83\u7528\u4e8e\u5782\u76f4\u8bbe\u7f6e\u9634\u5f71\u4f4d\u7f6e\u3002\u5176\u4e2d\u7684\u6b63\u503c\u8bbe\u7f6e\u6846\u4e0b\u65b9\u7684\u9634\u5f71\uff0c\u8d1f\u503c\u8bbe\u7f6e\u6846\u4e0a\u65b9\u7684\u9634\u5f71\u3002\n <\/div>\n\n blur\uff1a<\/strong>\u987e\u540d\u601d\u4e49\uff0c\u5b83\u7528\u4e8e\u6a21\u7cca\u76d2\u5b50\u9634\u5f71\u3002\u6b64\u5c5e\u6027\u662f\u53ef\u9009\u7684\u3002\n <\/div>\n\n spread\uff1a<\/strong>\u8bbe\u7f6e\u9634\u5f71\u5927\u5c0f\u3002\u70b9\u5dee\u5927\u5c0f\u53d6\u51b3\u4e8e\u70b9\u5dee\u503c\u3002\n <\/div>\n\n color\uff1a<\/strong>\u987e\u540d\u601d\u4e49\uff0c\u6b64\u5c5e\u6027\u7528\u4e8e\u8bbe\u7f6e\u9634\u5f71\u7684\u989c\u8272\u3002\u5b83\u662f\u4e00\u4e2a\u53ef\u9009\u5c5e\u6027\u3002\n <\/div>\n\n inset\uff1a<\/strong>\u901a\u5e38\uff0c\u9634\u5f71\u5728\u6846\u7684\u5916\u90e8\u751f\u6210\uff0c\u4f46\u662f\u901a\u8fc7\u4f7f\u7528\u63d2\u56fe\uff0c\u53ef\u4ee5\u5728\u6846\u5185\u521b\u5efa\u9634\u5f71\u3002\n <\/div>\n\n initial\uff1a<\/strong>\uff1a\u7528\u4e8e\u5c06\u76d2\u5b50\u9634\u5f71\u7684\u5c5e\u6027\u8bbe\u7f6e\u4e3a\u5176\u9ed8\u8ba4\u503c\u3002\n <\/div>\n\n inherit\uff1a<\/strong>\u5b83\u662f\u4ece\u5176\u7236\u7ee7\u627f\u3002\n <\/div>\n\n none\uff1a<\/strong>\u8fd9\u662f\u9ed8\u8ba4\u503c\uff0c\u4e0d\u5305\u542b\u4efb\u4f55\u9634\u5f71\u5c5e\u6027\u3002\n <\/div>\n\n \u8ba9\u6211\u4eec\u901a\u8fc7\u4e00\u4e9b\u63d2\u56fe\u6765\u7406\u89e3\u5b83\u3002\n <\/div>\n\u793a\u4f8b-\u7b80\u5355\u9634\u5f71<\/h3>\n\n <!DOCTYPE html>
<html><\/span>
<head><\/span>
<title><\/span>CSS box-shadow Property<\/title><\/span>
<style><\/span>
div
{
border: 1px solid;
padding: 10px;
}
#hvb
<\/span> {
\/* box-shadow: h-offset v-offset blur *\/
box-shadow: 5px 10px 10px;
}
#spr
<\/span> {
\/* box-shadow: h-offset v-offset blur spread *\/
box-shadow: 5px 10px 10px 10px;
}
#col
<\/span> {
\/* box-shadow: h-offset v-offset blur spread color *\/
box-shadow: 5px 10px 10px 10px orange;
}
#ins
<\/span> {
\/* box-shadow: h-offset v-offset blur spread color inset *\/
box-shadow: 5px 10px 10px 10px orange inset;
}
#init
<\/span> {
\/* box-shadow: initial *\/
box-shadow: initial;
}
#non
<\/span> {
\/* box-shadow: none *\/
box-shadow: none;
}
<\/style><\/span>
<\/head><\/span>
<body><\/span>
<div id = \"hvb\"<\/span>>
<h1><\/span>It is a shadow box that has h-offset, v-offset and blur attributes.<\/h1><\/span>
<\/div><\/span>
<br><br>
<div id = \"spr\"<\/span>>
<h1><\/span>It is a box that includes the spread attribute.<\/h1><\/span>
<\/div><\/span>
<br><br>
<div id = \"col\"<\/span>>
<h1><\/span>It is a box that includes the color attribute.<\/h1><\/span>
<\/div><\/span>
<br><br>
<div id = \"ins\"<\/span>>
<h1><\/span>It is a box that includes the inset attribute.<\/h1><\/span>
<\/div><\/span>
<br><br>
<div id = \"init\"<\/span>>
<h1><\/span>It is a box that includes the initial attribute.<\/h1><\/span>
<\/div><\/span>
<br><br>
<div id = \"non\"<\/span>>
<h1><\/span>It is a box that includes the default attribute i.e. none.<\/h1><\/span>
<\/div><\/span>
<\/body><\/span>
<\/html><\/span>
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8f93\u51fa\uff1a<\/strong>\n <\/div>\n ![CSS box-shadow_https:\/\/bianchenghao6.com_\u3010CSS \u6559\u7a0b\u3011_\u7b2c1\u5f20](\"https:\/\/img.mushiming.top\/app\/bianchenghao6_com\/2023-11-14-8ff0edddafbd4fe0af258b97fe89702b.png\" "CSS box-shadow_\u3010CSS \u6559\u7a0b\u3011_\u7b2c1\u5f20_\u7f16\u7a0b\u597d6\u6587\u6863")
\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-2377","post","type-post","status-publish","format-standard","hentry","category-css-jc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2377"}],"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=2377"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2377\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=2377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=2377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=2377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
box-shadow: h-offset v-offset blur spread color |inset|inherit|initial|none;
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8ba9\u6211\u4eec\u4e86\u89e3\u5c5e\u6027\u503c\u3002\n <\/div>\n\n h-offset\uff1a<\/strong>\u6c34\u5e73\u8bbe\u7f6e\u9634\u5f71\u4f4d\u7f6e\u3002\u5176\u6b63\u503c\u4f1a\u5c06\u9634\u5f71\u8bbe\u7f6e\u5728\u6846\u7684\u53f3\u4fa7\u3002\u5176\u8d1f\u503c\u7528\u4e8e\u8bbe\u7f6e\u6846\u5de6\u4fa7\u7684\u9634\u5f71\u3002\n <\/div>\n\n v-offset\uff1a<\/strong>\u4e0eh-offset\u4e0d\u540c\uff0c\u5b83\u7528\u4e8e\u5782\u76f4\u8bbe\u7f6e\u9634\u5f71\u4f4d\u7f6e\u3002\u5176\u4e2d\u7684\u6b63\u503c\u8bbe\u7f6e\u6846\u4e0b\u65b9\u7684\u9634\u5f71\uff0c\u8d1f\u503c\u8bbe\u7f6e\u6846\u4e0a\u65b9\u7684\u9634\u5f71\u3002\n <\/div>\n\n blur\uff1a<\/strong>\u987e\u540d\u601d\u4e49\uff0c\u5b83\u7528\u4e8e\u6a21\u7cca\u76d2\u5b50\u9634\u5f71\u3002\u6b64\u5c5e\u6027\u662f\u53ef\u9009\u7684\u3002\n <\/div>\n\n spread\uff1a<\/strong>\u8bbe\u7f6e\u9634\u5f71\u5927\u5c0f\u3002\u70b9\u5dee\u5927\u5c0f\u53d6\u51b3\u4e8e\u70b9\u5dee\u503c\u3002\n <\/div>\n\n color\uff1a<\/strong>\u987e\u540d\u601d\u4e49\uff0c\u6b64\u5c5e\u6027\u7528\u4e8e\u8bbe\u7f6e\u9634\u5f71\u7684\u989c\u8272\u3002\u5b83\u662f\u4e00\u4e2a\u53ef\u9009\u5c5e\u6027\u3002\n <\/div>\n\n inset\uff1a<\/strong>\u901a\u5e38\uff0c\u9634\u5f71\u5728\u6846\u7684\u5916\u90e8\u751f\u6210\uff0c\u4f46\u662f\u901a\u8fc7\u4f7f\u7528\u63d2\u56fe\uff0c\u53ef\u4ee5\u5728\u6846\u5185\u521b\u5efa\u9634\u5f71\u3002\n <\/div>\n\n initial\uff1a<\/strong>\uff1a\u7528\u4e8e\u5c06\u76d2\u5b50\u9634\u5f71\u7684\u5c5e\u6027\u8bbe\u7f6e\u4e3a\u5176\u9ed8\u8ba4\u503c\u3002\n <\/div>\n\n inherit\uff1a<\/strong>\u5b83\u662f\u4ece\u5176\u7236\u7ee7\u627f\u3002\n <\/div>\n\n none\uff1a<\/strong>\u8fd9\u662f\u9ed8\u8ba4\u503c\uff0c\u4e0d\u5305\u542b\u4efb\u4f55\u9634\u5f71\u5c5e\u6027\u3002\n <\/div>\n\n \u8ba9\u6211\u4eec\u901a\u8fc7\u4e00\u4e9b\u63d2\u56fe\u6765\u7406\u89e3\u5b83\u3002\n <\/div>\n\u793a\u4f8b-\u7b80\u5355\u9634\u5f71<\/h3>\n\n <!DOCTYPE html>
<html><\/span>
<head><\/span>
<title><\/span>CSS box-shadow Property<\/title><\/span>
<style><\/span>
div
{
border: 1px solid;
padding: 10px;
}
#hvb
<\/span> {
\/* box-shadow: h-offset v-offset blur *\/
box-shadow: 5px 10px 10px;
}
#spr
<\/span> {
\/* box-shadow: h-offset v-offset blur spread *\/
box-shadow: 5px 10px 10px 10px;
}
#col
<\/span> {
\/* box-shadow: h-offset v-offset blur spread color *\/
box-shadow: 5px 10px 10px 10px orange;
}
#ins
<\/span> {
\/* box-shadow: h-offset v-offset blur spread color inset *\/
box-shadow: 5px 10px 10px 10px orange inset;
}
#init
<\/span> {
\/* box-shadow: initial *\/
box-shadow: initial;
}
#non
<\/span> {
\/* box-shadow: none *\/
box-shadow: none;
}
<\/style><\/span>
<\/head><\/span>
<body><\/span>
<div id = \"hvb\"<\/span>>
<h1><\/span>It is a shadow box that has h-offset, v-offset and blur attributes.<\/h1><\/span>
<\/div><\/span>
<br><br>
<div id = \"spr\"<\/span>>
<h1><\/span>It is a box that includes the spread attribute.<\/h1><\/span>
<\/div><\/span>
<br><br>
<div id = \"col\"<\/span>>
<h1><\/span>It is a box that includes the color attribute.<\/h1><\/span>
<\/div><\/span>
<br><br>
<div id = \"ins\"<\/span>>
<h1><\/span>It is a box that includes the inset attribute.<\/h1><\/span>
<\/div><\/span>
<br><br>
<div id = \"init\"<\/span>>
<h1><\/span>It is a box that includes the initial attribute.<\/h1><\/span>
<\/div><\/span>
<br><br>
<div id = \"non\"<\/span>>
<h1><\/span>It is a box that includes the default attribute i.e. none.<\/h1><\/span>
<\/div><\/span>
<\/body><\/span>
<\/html><\/span>
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8f93\u51fa\uff1a<\/strong>\n <\/div>\n
\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-2377","post","type-post","status-publish","format-standard","hentry","category-css-jc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2377"}],"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=2377"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2377\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=2377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=2377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=2377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}