{"id":73143,"date":"2024-06-14T17:22:49","date_gmt":"2024-06-14T10:22:49","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=73143"},"modified":"2025-07-23T11:06:15","modified_gmt":"2025-07-23T04:06:15","slug":"box-shadow-css","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/box-shadow-css\/","title":{"rendered":"Box shadow CSS l\u00e0 g\u00ec? 7 c\u00e1ch d\u00f9ng box shadow CSS c\u01a1 b\u1ea3n"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/box-shadow-css\/#Box_shadow_CSS_la_gi_Loi_ich_khi_su_dung_box_shadow\" >Box shadow CSS l\u00e0 g\u00ec? L\u1ee3i \u00edch khi s\u1eed d\u1ee5ng box shadow<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/box-shadow-css\/#Cu_phap_cac_gia_tri_thuoc_tinh_cua_box_shadow_CSS\" >C\u00fa ph\u00e1p, c\u00e1c gi\u00e1 tr\u1ecb thu\u1ed9c t\u00ednh c\u1ee7a box shadow CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/box-shadow-css\/#Huong_dan_chi_tiet_cach_dieu_chinh_box_shadow_CSS\" >H\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1ch \u0111i\u1ec1u ch\u1ec9nh box shadow CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/box-shadow-css\/#Ung_dung_box_shadow_CSS_de_thiet_ke_pixel_art\" >\u1ee8ng d\u1ee5ng box shadow CSS \u0111\u1ec3 thi\u1ebft k\u1ebf pixel art<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/box-shadow-css\/#Cac_cau_hoi_thuong_gap_ve_box_shadow_CSS\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 box shadow CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/box-shadow-css\/#Tong_ket_box_shadow_CSS\" >T\u1ed5ng k\u1ebft box shadow CSS<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><em><strong>Trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng m\u1ed9t website, vi\u1ec7c th\u00eam c\u00e1c y\u1ebfu t\u1ed1 h\u1ea5p d\u1eabn \u0111\u1ec3 gi\u1eef ch\u00e2n ng\u01b0\u1eddi d\u00f9ng r\u1ea5t quan tr\u1ecdng. S\u1eed d\u1ee5ng box shadow CSS l\u00e0 m\u1ed9t trong nh\u1eefng c\u00e1ch tuy\u1ec7t v\u1eddi \u0111\u1ec3 n\u00e2ng cao giao di\u1ec7n tr\u1ef1c quan c\u1ee7a trang web, t\u1ea1o th\u00eam chi\u1ec1u s\u00e2u cho c\u00e1c ph\u1ea7n t\u1eed HTML nh\u01b0 n\u00fat, v\u0103n b\u1ea3n ho\u1eb7c h\u00ecnh \u1ea3nh. Trong b\u00e0i vi\u1ebft n\u00e0y, h\u00e3y c\u00f9ng ITviec t\u00ecm hi\u1ec3u c\u00e1ch d\u00f9ng box shadow CSS.<\/strong><\/em><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft \u0111\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Box shadow l\u00e0 g\u00ec? L\u1ee3i \u00edch khi s\u1eed d\u1ee5ng box shadow CSS<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p, gi\u00e1 tr\u1ecb thu\u1ed9c t\u00ednh c\u1ee7a box shadow CSS<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">H\u01b0\u1edbng d\u1eabn 7 c\u00e1ch d\u00f9ng box shadow CSS c\u01a1 b\u1ea3n<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 box shadow CSS<\/span><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Tham kh\u1ea3o <a href=\"https:\/\/itviec.com\/viec-lam-it\/css?utm_medium=anchor_text_high&amp;utm_source=blog&amp;utm_campaign=viec_lam_css&amp;utm_content=box_shadow_css\" target=\"_blank\" rel=\"noreferrer noopener\">vi\u1ec7c l\u00e0m CSS<\/a> to\u00e0n qu\u1ed1c<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-box-shadow-css-la-gi-l\u1ee3i-ich-khi-s\u1eed-d\u1ee5ng-box-shadow\"><span class=\"ez-toc-section\" id=\"Box_shadow_CSS_la_gi_Loi_ich_khi_su_dung_box_shadow\"><\/span><b>Box shadow CSS l\u00e0 g\u00ec? L\u1ee3i \u00edch khi s\u1eed d\u1ee5ng box shadow<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Box shadow l\u00e0 m\u1ed9t thu\u1ed9c t\u00ednh CSS cho ph\u00e9p b\u1ea1n th\u00eam hi\u1ec7u \u1ee9ng b\u00f3ng \u0111\u1ed5 xung quanh khung c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed. N\u00f3 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o ra nhi\u1ec1u hi\u1ec7u \u1ee9ng kh\u00e1c nhau nh\u01b0 b\u00f3ng \u0111\u1ed5 \u0111\u01a1n gi\u1ea3n, b\u00f3ng \u0111\u1ed5 b\u00ean trong v\u00e0 b\u00f3ng \u0111\u1ed5 ph\u1ee9c t\u1ea1p v\u1edbi nhi\u1ec1u m\u00e0u s\u1eafc v\u00e0 \u0111\u1ed9 m\u1edd.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Box shadow c\u00f3 th\u1ec3 gi\u00fap trang web c\u1ee7a b\u1ea1n tr\u1edf n\u00ean thu h\u00fat h\u01a1n nh\u1edd nh\u1eefng l\u1ee3i \u00edch sau:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Th\u00eam chi\u1ec1u s\u00e2u: <\/b><span style=\"font-weight: 400;\">Box shadow gi\u00fap c\u00e1c ph\u1ea7n t\u1eed HTML tr\u00ean trang web c\u00f3 chi\u1ec1u s\u00e2u nh\u01b0 th\u1ec3 ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c n\u00e2ng l\u00ean kh\u1ecfi trang ho\u1eb7c n\u1ed5i tr\u00ean c\u00e1c ph\u1ea7n t\u1eed HTML kh\u00e1c.<\/span><\/li>\n\n\n\n<li><b>L\u00e0m n\u1ed5i b\u1eadt ph\u1ea7n t\u1eed: <\/b><span style=\"font-weight: 400;\">V\u1edbi box shadow, c\u00e1c ph\u1ea7n t\u1eed nh\u01b0 n\u00fat b\u1ea5m ho\u1eb7c bi\u1ec3u t\u01b0\u1ee3ng \u0111\u01b0\u1ee3c l\u00e0m n\u1ed5i b\u1eadt h\u01a1n, t\u1eeb \u0111\u00f3 thu h\u00fat s\u1ef1 ch\u00fa \u00fd v\u00e0 t\u1eadp trung c\u1ee7a ng\u01b0\u1eddi \u0111\u1ecdc v\u00e0o th\u00e0nh ph\u1ea7n \u0111\u00f3. Ngo\u00e0i ra, vi\u1ec7c s\u1eed d\u1ee5ng box shadow c\u00f2n t\u1ea1o ra s\u1ef1 ph\u00e2n c\u1ea5p r\u00f5 r\u00e0ng, d\u1ec5 x\u00e1c \u0111\u1ecbnh c\u00e1c ph\u1ea7n t\u1eed tr\u00ean trang, gi\u00fap ng\u01b0\u1eddi d\u00f9ng d\u1ec5 d\u00e0ng hi\u1ec3u c\u1ea5u tr\u00fac v\u00e0 b\u1ed1 c\u1ee5c c\u1ee7a trang h\u01a1n.<\/span><\/li>\n\n\n\n<li><b>T\u1ea1o s\u1ef1 t\u01b0\u01a1ng ph\u1ea3n: <\/b><span style=\"font-weight: 400;\">Hi\u1ec7u \u1ee9ng box shadow gi\u00fap thi\u1ebft l\u1eadp ranh gi\u1edbi r\u00f5 r\u00e0ng gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed, gi\u00fap ng\u01b0\u1eddi d\u00f9ng d\u1ec5 d\u00e0ng ph\u00e2n bi\u1ec7t v\u00e0 nh\u1eadn bi\u1ebft c\u00e1c ph\u1ea7n t\u1eed tr\u00ean trang web.<\/span><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Tham kh\u1ea3o th\u00eam c\u00e1c b\u00e0i vi\u1ebft kh\u00e1c thu\u1ed9c c\u00f9ng ch\u1ee7 \u0111\u1ec1 CSS:<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/itviec.com\/blog\/css-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>CSS l\u00e0 g\u00ec? H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng hi\u1ec7u qu\u1ea3 CSS \u0111\u1ec3 thi\u1ebft k\u1ebf web<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>H\u01b0\u1edbng d\u1eabn c\u0103n gi\u1eefa CSS chi ti\u1ebft theo chi\u1ec1u ngang, d\u1ecdc, hai chi\u1ec1u<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/lo-trinh-hoc-html-css-cho-nguoi-moi-bat-dau\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>H\u1ecdc HTML v\u00e0 CSS: L\u1ed9 tr\u00ecnh 18 b\u01b0\u1edbc chi ti\u1ebft cho ng\u01b0\u1eddi m\u1edbi b\u1eaft \u0111\u1ea7u<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/itviec.com\/blog\/grid-css\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>C\u1ea9m nang s\u1eed d\u1ee5ng Grid CSS c\u01a1 b\u1ea3n<\/strong><\/a><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/itviec.com\/blog\/tailwind-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">H\u01b0\u1edbng d\u1eabn 3 c\u00e1ch thi\u1ebft l\u1eadp Tailwind CSS chi ti\u1ebft<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/itviec.com\/blog\/animation-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">T\u1ed5ng h\u1ee3p 11 hi\u1ec7u \u1ee9ng Animation CSS ph\u1ed5 bi\u1ebfn<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/itviec.com\/blog\/huong-dan-su-dung-bootstrap-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">C\u00e1ch \u00e1p d\u1ee5ng v\u00e0 qu\u1ea3n l\u00fd CSS v\u1edbi Bootstrap<\/a><\/strong><\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cu-phap-cac-gia-tr\u1ecb-thu\u1ed9c-tinh-c\u1ee7a-box-shadow-css\"><span class=\"ez-toc-section\" id=\"Cu_phap_cac_gia_tri_thuoc_tinh_cua_box_shadow_CSS\"><\/span><b>C\u00fa ph\u00e1p, c\u00e1c gi\u00e1 tr\u1ecb thu\u1ed9c t\u00ednh c\u1ee7a box shadow CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3, c\u00e1c gi\u00e1 tr\u1ecb thu\u1ed9c t\u00ednh \u0111\u01b0\u1ee3c gi\u1ea3i \u0111\u00e1p chi ti\u1ebft nh\u01b0 b\u1ea3ng sau:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\n<p style=\"text-align: left;\"><b>Thu\u1ed9c t\u00ednh<\/b><\/p>\n<\/td><td><b>M\u00f4 t\u1ea3<\/b><\/td><td><b>V\u00ed d\u1ee5<\/b><\/td><td><b>H\u00ecnh minh h\u1ecda<\/b><\/td><\/tr><tr><td><b>none<\/b><\/td><td><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh. V\u1edbi gi\u00e1 tr\u1ecb n\u00e0y, ph\u1ea7n t\u1eed s\u1ebd kh\u00f4ng hi\u1ec7n shadow.&nbsp;<\/span><\/td><td><b>box-shadow: none;&nbsp;<\/b><\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-73159 alignleft\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-none-vippro.png\" alt=\"\" width=\"648\" height=\"272\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-none-vippro.png 648w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-none-vippro-300x126.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-none-vippro-640x269.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-none-vippro-200x84.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-none-vippro-100x42.png 100w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/figure><\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><b>h-offset<\/b><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb b\u1eaft bu\u1ed9c, ch\u1ec9 \u0111\u1ed9 l\u1ec7ch ngang c\u1ee7a shadow. Trong \u0111\u00f3, gi\u00e1 tr\u1ecb d\u01b0\u01a1ng \u0111\u1eb7t b\u00f3ng \u1edf b\u00ean ph\u1ea3i h\u1ed9p v\u00e0 gi\u00e1 tr\u1ecb \u00e2m \u0111\u1eb7t b\u00f3ng b\u00ean tr\u00e1i h\u1ed9p.<\/span><\/td><td><b>box-shadow: <\/b><b>10px<\/b><b> 10px grey;<\/b>\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3, gi\u00e1 tr\u1ecb \u201c10px\u201d \u0111\u1ea7u ti\u00ean ch\u00ednh l\u00e0 h-offset.<\/span><\/p>\n<\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-73160\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-hoffset-vippro.png\" alt=\"\" width=\"700\" height=\"284\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-hoffset-vippro.png 700w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-hoffset-vippro-300x122.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-hoffset-vippro-640x260.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-hoffset-vippro-200x81.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-hoffset-vippro-100x41.png 100w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/td><\/tr><tr><td><b>v-offset<\/b><\/td><td><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb b\u1eaft bu\u1ed9c, ch\u1ec9 \u0111\u1ed9 l\u1ec7ch d\u1ecdc c\u1ee7a b\u00f3ng. Trong \u0111\u00f3, gi\u00e1 tr\u1ecb d\u01b0\u1edbi \u0111\u1eb7t b\u00f3ng ph\u00eda d\u01b0\u1edbi h\u1ed9p v\u00e0 gi\u00e1 tr\u1ecb \u00e2m \u0111\u1eb7t b\u00f3ng ph\u00eda tr\u00ean h\u1ed9p.<\/span><\/td><td><b>box-shadow: 50px <\/b><b>50px<\/b><b> grey;<\/b>\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3, gi\u00e1 tr\u1ecb \u201c50px\u201d th\u1ee9 hai l\u00e0 v-offset.<\/span><\/p>\n<\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-73158 alignleft\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-voffset-vippro.png\" alt=\"\" width=\"810\" height=\"394\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-voffset-vippro.png 810w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-voffset-vippro-300x146.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-voffset-vippro-700x340.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-voffset-vippro-200x97.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-voffset-vippro-100x49.png 100w\" sizes=\"auto, (max-width: 810px) 100vw, 810px\" \/><\/figure><\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><b>blur<\/b><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb t\u00f9y ch\u1ecdn ch\u1ec9 b\u00e1n k\u00ednh m\u1edd c\u1ee7a b\u00f3ng. Gi\u00e1 tr\u1ecb c\u00e0ng cao, b\u00f3ng c\u00e0ng m\u1edd \u0111i.<\/span><\/td><td><b>box-shadow: 20px 20px 1<\/b><b>0px<\/b><b> grey;<\/b>\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3, \u201c10px\u201d ch\u00ednh l\u00e0 gi\u00e1 tr\u1ecb c\u1ee7a blur.<\/span><\/p>\n<\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-73156\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-blur-vippro.jpg\" alt=\"\" width=\"846\" height=\"388\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-blur-vippro.jpg 846w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-blur-vippro-300x138.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-blur-vippro-700x321.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-blur-vippro-200x92.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-blur-vippro-100x46.jpg 100w\" sizes=\"auto, (max-width: 846px) 100vw, 846px\" \/><\/figure><\/td><\/tr><tr><td><b>spread<\/b><\/td><td><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb t\u00f9y ch\u1ecdn ch\u1ec9 b\u00e1n k\u00ednh ph\u00e1t t\u00e1n c\u1ee7a b\u00f3ng. Gi\u00e1 tr\u1ecb d\u01b0\u01a1ng t\u0103ng k\u00edch th\u01b0\u1edbc c\u1ee7a b\u00f3ng, gi\u00e1 tr\u1ecb \u00e2m gi\u1ea3m k\u00edch th\u01b0\u1edbc c\u1ee7a b\u00f3ng.<\/span><\/td><td><b>box-shadow: 20px 20px 50px <\/b><b>15px <\/b><b>grey;<\/b>\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3, \u201c15px\u201d ch\u00ednh l\u00e0 gi\u00e1 tr\u1ecb c\u1ee7a spread.<\/span><\/p>\n<\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-73157 alignleft\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-spread-vippro.jpg\" alt=\"\" width=\"1044\" height=\"528\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-spread-vippro.jpg 1044w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-spread-vippro-300x152.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-spread-vippro-700x354.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-spread-vippro-200x101.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-spread-vippro-100x51.jpg 100w\" sizes=\"auto, (max-width: 1044px) 100vw, 1044px\" \/><\/figure><\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><b>color<\/b><\/p>\n<\/td><td><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb t\u00f9y ch\u1ecdn d\u00f9ng \u0111\u1ec3 ch\u1ec9 m\u00e0u c\u1ee7a b\u00f3ng. Gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh l\u00e0 m\u00e0u c\u1ee7a v\u0103n b\u1ea3n.&nbsp;<\/span><\/td><td><b>box-shadow: 20px 20px 20px 10px <\/b><b>red<\/b><b>;<\/b>\n<p><span style=\"font-weight: 400;\">Trong \u0111\u00f3, \u201cred\u201d ch\u00ednh l\u00e0 gi\u00e1 tr\u1ecb c\u1ee7a color.<\/span><\/p>\n<\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-73155\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-color-vippro.jpg\" alt=\"\" width=\"870\" height=\"428\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-color-vippro.jpg 870w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-color-vippro-300x148.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-color-vippro-700x344.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-color-vippro-200x98.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-color-vippro-100x49.jpg 100w\" sizes=\"auto, (max-width: 870px) 100vw, 870px\" \/><\/figure><\/td><\/tr><tr><td><b>inset<\/b><\/td><td><span style=\"font-weight: 400;\">Gi\u00e1 tr\u1ecb t\u00f9y ch\u1ecdn, c\u00f3 ch\u1ee9c n\u0103ng chuy\u1ec3n \u0111\u1ed5i b\u00f3ng t\u1eeb b\u00f3ng ngo\u00e0i (outset) th\u00e0nh b\u00f3ng b\u00ean trong.<\/span><\/td><td><b>box-shadow: 20px 20px 50px 10px pink<\/b><b> inset<\/b><b>;<\/b><\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-73154 alignleft\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-inset-vippro.jpg\" alt=\"\" width=\"752\" height=\"346\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-inset-vippro.jpg 752w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-inset-vippro-300x138.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-inset-vippro-700x322.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-inset-vippro-200x92.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-inset-vippro-100x46.jpg 100w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><\/figure><\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><b>initial<\/b><\/p>\n<\/td><td><span style=\"font-weight: 400;\">\u0110\u1eb7t thu\u1ed9c t\u00ednh n\u00e0y v\u1ec1 gi\u00e1 tr\u1ecb m\u1eb7c \u0111\u1ecbnh.<\/span><\/td><td><strong>box-shadow: initial;<\/strong><\/td><td>&nbsp;<\/td><\/tr><tr><td><b>inherit<\/b><\/td><td><span style=\"font-weight: 400;\">K\u1ebf th\u1eeba thu\u1ed9c t\u00ednh n\u00e0y t\u1eeb ph\u1ea7n t\u1eed cha.<\/span><\/td><td><strong>box-shadow: inherit;<\/strong><\/td><td>&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-h\u01b0\u1edbng-d\u1eabn-chi-ti\u1ebft-cach-di\u1ec1u-ch\u1ec9nh-box-shadow-css\"><span class=\"ez-toc-section\" id=\"Huong_dan_chi_tiet_cach_dieu_chinh_box_shadow_CSS\"><\/span><b>H\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1ch \u0111i\u1ec1u ch\u1ec9nh box shadow CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ch\u1ec9-d\u1ecbnh-box-shadow-css-theo-chi\u1ec1u-ngang-va-chi\u1ec1u-d\u1ecdc-h-offset-v-offset\"><b>Ch\u1ec9 \u0111\u1ecbnh box shadow CSS theo chi\u1ec1u ngang v\u00e0 chi\u1ec1u d\u1ecdc (h-offset v-offset)<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Trong tr\u01b0\u1eddng h\u1ee3p \u0111\u01a1n gi\u1ea3n nh\u1ea5t, b\u1ea1n ch\u1ec9 c\u1ea7n x\u00e1c \u0111\u1ecbnh m\u1ed9t b\u00f3ng ngang v\u00e0 m\u1ed9t b\u00f3ng d\u1ecdc. M\u00e0u s\u1eafc m\u1eb7c \u0111\u1ecbnh c\u1ee7a b\u00f3ng l\u00e0 m\u00e0u c\u1ee7a v\u0103n b\u1ea3n hi\u1ec7n t\u1ea1i. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p nh\u01b0 sau: <\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>box-shadow: h-offset v-offset;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;style&gt;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">div {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;width: 300px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;height: 100px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;padding: 15px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;background-color: coral;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;<\/span><b>&nbsp;box-shadow: 10px 10px;<\/b>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;h1&gt;H\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1ch \u0111i\u1ec1u ch\u1ec9nh box shadow&lt;\/h1&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div&gt;Ch\u1ec9 \u0111\u1ecbnh box shadow theo chi\u1ec1u ngang v\u00e0 chi\u1ec1u d\u1ecdc (h-offset v-offset) 10px&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/code><\/pre>\n\n\n\n<p><strong>K\u1ebft qu\u1ea3:<\/strong><i><br><\/i><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"2170\" height=\"740\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-hoffset-voffset-vippro.jpg\" alt=\"\" class=\"wp-image-73163\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-hoffset-voffset-vippro.jpg 2170w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-hoffset-voffset-vippro-300x102.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-hoffset-voffset-vippro-1600x546.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-hoffset-voffset-vippro-200x68.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-hoffset-voffset-vippro-100x34.jpg 100w\" sizes=\"auto, (max-width: 2170px) 100vw, 2170px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ch\u1ec9-d\u1ecbnh-mau-cho-box-shadow-css\"><b>Ch\u1ec9 \u0111\u1ecbnh m\u00e0u cho box shadow CSS<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 ch\u1ec9 \u0111\u1ecbnh m\u00e0u s\u1eafc b\u1ea5t k\u1ef3 cho box shadow mi\u1ec5n l\u00e0 n\u00f3 ph\u00f9 h\u1ee3p v\u1edbi phong c\u00e1ch trang web c\u1ee7a b\u1ea1n. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p nh\u01b0 sau: <\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>box-shadow: h-offset v-offset color;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;style&gt;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">div {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;width: 300px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;height: 100px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;padding: 15px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;background-color: coral;<\/span>\n\n<b>&nbsp;&nbsp;box-shadow: 10px 10px green;<\/b>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;h1&gt;H\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1ch \u0111i\u1ec1u ch\u1ec9nh box shadow&lt;\/h1&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div&gt;Ch\u1ec9 \u0111\u1ecbnh m\u00e0u xanh l\u1ee5c cho box shadow&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/code><\/pre>\n\n\n\n<p><strong>K\u1ebft qu\u1ea3:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2156\" height=\"724\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-color-green-vippro.jpg\" alt=\"\" class=\"wp-image-73162\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-color-green-vippro.jpg 2156w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-color-green-vippro-300x101.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-color-green-vippro-1600x537.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-color-green-vippro-200x67.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-color-green-vippro-100x34.jpg 100w\" sizes=\"auto, (max-width: 2156px) 100vw, 2156px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-them-hi\u1ec7u-\u1ee9ng-lam-m\u1edd-blur-cho-box-shadow-css\"><b>Th\u00eam hi\u1ec7u \u1ee9ng l\u00e0m m\u1edd (blur) cho box shadow CSS<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 th\u00eam hi\u1ec7u \u1ee9ng b\u00f3ng m\u1edd cho ph\u1ea7n t\u1eed HTML b\u1eb1ng c\u00e1ch th\u00eam tham s\u1ed1 cho thu\u1ed9c t\u00ednh blur. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p nh\u01b0 sau: <\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>box-shadow: h-offset v-offset blur color;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n l\u01b0u \u00fd, tham s\u1ed1 c\u00e0ng cao th\u00ec b\u00f3ng s\u1ebd c\u00e0ng m\u1edd.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;style&gt;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">div {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;width: 300px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;height: 100px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;padding: 15px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;background-color: coral;<\/span>\n\n<b>box-shadow: 10px 10px 50px green;<\/b>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;h1&gt;H\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1ch \u0111i\u1ec1u ch\u1ec9nh box shadow&lt;\/h1&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div&gt;Th\u00eam hi\u1ec7u \u1ee9ng l\u00e0m m\u1edd cho box shadow v\u1edbi tham s\u1ed1 l\u00e0 50px.&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/code><\/pre>\n\n\n\n<p><strong>K\u1ebft qu\u1ea3:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2184\" height=\"748\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-blur-example-vippro.jpg\" alt=\"\" class=\"wp-image-73161\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-blur-example-vippro.jpg 2184w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-blur-example-vippro-300x103.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-blur-example-vippro-1600x548.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-blur-example-vippro-200x68.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-blur-example-vippro-100x34.jpg 100w\" sizes=\"auto, (max-width: 2184px) 100vw, 2184px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-d\u1eb7t-ban-kinh-tr\u1ea3i-r\u1ed9ng-spread-c\u1ee7a-box-shadow-css\"><b>\u0110\u1eb7t b\u00e1n k\u00ednh tr\u1ea3i r\u1ed9ng (spread) c\u1ee7a box shadow CSS <\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ed9 tr\u1ea3i r\u1ed9ng c\u1ee7a b\u00f3ng c\u00f3 th\u1ec3 gi\u00fap ph\u1ea7n t\u1eed c\u00f3 th\u00eam chi\u1ec1u s\u00e2u, n\u1ed5i b\u1eadt v\u00e0 thu h\u00fat h\u01a1n. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p th\u1ef1c hi\u1ec7n nh\u01b0 sau: <\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>box-shadow: h-offset v-offset blur spread color;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;style&gt;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">div {<\/span>\n\n<span style=\"font-weight: 400;\">width: 300px;<\/span>\n\n<span style=\"font-weight: 400;\">height: 100px;<\/span>\n\n<span style=\"font-weight: 400;\">padding: 15px;<\/span>\n\n<span style=\"font-weight: 400;\">background-color: coral;<\/span>\n\nbox-shadow: 10px 10px 5px 12px green;\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;h1&gt;H\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1ch \u0111i\u1ec1u ch\u1ec9nh box shadow&lt;\/h1&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div&gt;\u0110\u1eb7t b\u00e1n k\u00ednh tr\u1ea3i r\u1ed9ng (spread) c\u1ee7a box shadow 12px.&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/code><\/pre>\n\n\n\n<p><strong>K\u1ebft qu\u1ea3:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2182\" height=\"744\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-spread-example-vippro.jpg\" alt=\"\" class=\"wp-image-73164\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-spread-example-vippro.jpg 2182w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-spread-example-vippro-300x102.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-spread-example-vippro-1600x546.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-spread-example-vippro-200x68.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-spread-example-vippro-100x34.jpg 100w\" sizes=\"auto, (max-width: 2182px) 100vw, 2182px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-d\u1eb7t-tham-s\u1ed1-chen\"><b>\u0110\u1eb7t tham s\u1ed1 ch\u00e8n<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u1edbi tham s\u1ed1 ch\u00e8n, ph\u1ea7n b\u00f3ng s\u1ebd n\u1eb1m b\u00ean trong box thay v\u00ec b\u00ean ngo\u00e0i. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p: <\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>box-shadow: h-offset v-offset spread color inset;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;style&gt;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">div {<\/span>\n\n<span style=\"font-weight: 400;\">width: 300px;<\/span>\n\n<span style=\"font-weight: 400;\">height: 100px;<\/span>\n\n<span style=\"font-weight: 400;\">padding: 15px;<\/span>\n\n<span style=\"font-weight: 400;\">background-color: coral;<\/span>\n\nbox-shadow: 10px 10px 5px green inset;\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;h1&gt;H\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1ch \u0111i\u1ec1u ch\u1ec9nh box shadow&lt;\/h1&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div&gt;\u0110\u1eb7t tham s\u1ed1 ch\u00e8n&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/code><\/pre>\n\n\n\n<p><strong>K\u1ebft qu\u1ea3:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2174\" height=\"738\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-inset-example-vippro.jpg\" alt=\"\" class=\"wp-image-73165\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-inset-example-vippro.jpg 2174w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-inset-example-vippro-300x102.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-inset-example-vippro-1600x543.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-inset-example-vippro-200x68.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-inset-example-vippro-100x34.jpg 100w\" sizes=\"auto, (max-width: 2174px) 100vw, 2174px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-them-nhi\u1ec1u-box-shadow-css\"><b>Th\u00eam nhi\u1ec1u box shadow CSS<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u1edbi box shadow CSS b\u1ea1n kh\u00f4ng ch\u1ec9 c\u00f3 th\u1ec3 th\u00eam 1 b\u00f3ng, m\u00e0 c\u00f3 th\u1ec3 th\u00eam nhi\u1ec1u b\u00f3ng kh\u00e1c nhau, b\u1eb1ng c\u00e1ch ng\u0103n c\u00e1ch c\u00e1c gi\u00e1 tr\u1ecb b\u1edfi d\u1ea5u \u201c,\u201d. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">C\u00fa ph\u00e1p nh\u01b0 sau: <\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>box-shadow: h-offset v-offset blur spread color, h-offset v-offset blur spread color,\u2026;<\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;style&gt;&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">#example1 {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;border: 1px solid;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;padding: 10px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;margin: 20px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">#example2 {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;border: 1px solid;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;padding: 10px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;margin: 20px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;h1&gt;H\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1ch \u0111i\u1ec1u ch\u1ec9nh box shadow&lt;\/h1&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div id=\"example1\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&lt;h2&gt;Box shadow 1&lt;\/h2&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&lt;p&gt;box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;br&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div id=\"example2\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&lt;h2&gt;Box shadow 2 v\u1edbi hi\u1ec7u \u1ee9ng l\u00e0m m\u1edd&lt;\/h2&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&lt;p&gt;box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/code><\/pre>\n\n\n\n<p><strong>K\u1ebft qu\u1ea3:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"299\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-multi-shadow-vippro-scaled.jpg\" alt=\"\" class=\"wp-image-73166\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-multi-shadow-vippro-scaled.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-multi-shadow-vippro-300x140.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-multi-shadow-vippro-200x93.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-multi-shadow-vippro-100x47.jpg 100w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-t\u1ea1o-box-shadow-css-cho-card\"><b>T\u1ea1o box shadow CSS cho card<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 d\u1ee5ng box shadow CSS \u0111\u1ec3 t\u1ea1o hi\u1ec7u \u1ee9ng cho card ch\u1eef ho\u1eb7c card h\u00ecnh \u1ea3nh.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:&nbsp;<\/span><\/p>\n\n\n\n<p><b>C\u00e1ch t\u1ea1o box shadow cho card ch\u1eef:<\/b><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">div.card {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;width: 250px;<\/span>\n\nbox-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;text-align: center;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">div.header {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;background-color: #4CAF50;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;color: white;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;padding: 10px;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;font-size: 40px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">div.container {<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;padding: 10px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;h1&gt;H\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1ch \u0111i\u1ec1u ch\u1ec9nh box shadow&lt;\/h1&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p&gt;Thu\u1ed9c t\u00ednh box-shadow c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o ra nh\u1eefng t\u1ea5m thi\u1ec7p d\u1ea1ng gi\u1ea5y:&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div class=\"card\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div class=\"header\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;h1&gt;19&lt;\/h1&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div class=\"container\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p&gt;Ng\u00e0y 19 th\u00e1ng 5 n\u0103m 2024&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;\n<\/span><\/code><\/pre>\n\n\n\n<p><strong>K\u1ebft qu\u1ea3:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2182\" height=\"1328\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-text-card-vippro.jpg\" alt=\"\" class=\"wp-image-73173\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-text-card-vippro.jpg 2182w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-text-card-vippro-300x183.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-text-card-vippro-1600x974.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-text-card-vippro-200x122.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-text-card-vippro-100x61.jpg 100w\" sizes=\"auto, (max-width: 2182px) 100vw, 2182px\" \/><\/figure>\n\n\n\n<p><b>C\u00e1ch t\u1ea1o box shadow cho card \u1ea3nh:<\/b><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">div.polaroid {<\/span>\n\n<span style=\"font-weight: 400;\">width: 250px;<\/span>\n\n<b>box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);<\/b>\n\n<span style=\"font-weight: 400;\">text-align: center;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">div.container {<\/span>\n\n<span style=\"font-weight: 400;\">padding: 10px;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;h1&gt;H\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1ch \u0111i\u1ec1u ch\u1ec9nh box shadow&lt;\/h1&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p&gt;Thu\u1ed9c t\u00ednh box-shadow c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 t\u1ea1o \u1ea3nh Polaroid:&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div class=\"polaroid\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;img src=\"rock600x400.jpg\" alt=\"Norway\" style=\"width:100%\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;div class=\"container\"&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;p&gt;Hardanger, Na-uy&lt;\/p&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/code><\/pre>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p><strong>K\u1ebft qu\u1ea3:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2184\" height=\"1328\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-image-card-vippro.jpg\" alt=\"\" class=\"wp-image-73174\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-image-card-vippro.jpg 2184w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-image-card-vippro-300x182.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-image-card-vippro-1600x973.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-image-card-vippro-200x122.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-image-card-vippro-100x61.jpg 100w\" sizes=\"auto, (max-width: 2184px) 100vw, 2184px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Xem th\u00eam Vi\u1ec7c l\u00e0m <strong><a href=\"https:\/\/itviec.com\/viec-lam-it\/frontend-developer\/ho-chi-minh-hcm?utm_medium=anchor_text_mid&amp;utm_source=blog&amp;utm_campaign=lap_trinh_vien_frontend&amp;utm_content=box_shadow_css\" target=\"_blank\" rel=\"noreferrer noopener\">L\u1eadp tr\u00ecnh vi\u00ean Front-End<\/a><\/strong> t\u1ea1i TP. H\u1ed3 Ch\u00ed Minh<br>Xem th\u00eam Vi\u1ec7c l\u00e0m <a href=\"https:\/\/itviec.com\/viec-lam-it\/frontend-developer\/ha-noi?utm_medium=anchor_text_mid&amp;utm_source=blog&amp;utm_campaign=lap_trinh_vien_frontend&amp;utm_content=box_shadow_css\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>L\u1eadp tr\u00ecnh vi\u00ean Front-End<\/strong><\/a> t\u1ea1i H\u00e0 N\u1ed9i<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-\u1ee9ng-d\u1ee5ng-box-shadow-css-d\u1ec3-thi\u1ebft-k\u1ebf-pixel-art\"><span class=\"ez-toc-section\" id=\"Ung_dung_box_shadow_CSS_de_thiet_ke_pixel_art\"><\/span><b>\u1ee8ng d\u1ee5ng box shadow CSS \u0111\u1ec3 thi\u1ebft k\u1ebf pixel art<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i vi\u1ec7c \u00e1p d\u1ee5ng \u0111\u01a1n l\u1ebb 7 c\u00e1ch n\u00eau tr\u00ean \u0111\u1ec3 l\u00e0m n\u1ed5i b\u1eadt th\u00e0nh ph\u1ea7n trong trang web, b\u1ea1n c\u00f2n c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p ch\u00fang \u0111\u1ec3 t\u1ea1o ra nh\u1eefng t\u00e1c ph\u1ea9m ngh\u1ec7 thu\u1eadt pixel t\u1eeb \u0111\u01a1n gi\u1ea3n \u0111\u1ebfn ph\u1ee9c t\u1ea1p.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1236\" height=\"946\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-vippro.jpg\" alt=\"\" class=\"wp-image-73177\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-vippro.jpg 1236w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-vippro-300x230.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-vippro-768x588.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-vippro-200x153.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-vippro-100x77.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-vippro-588x450.jpg 588w\" sizes=\"auto, (max-width: 1236px) 100vw, 1236px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh tr\u00e1i tim b\u1eb1ng pixel b\u00ean tr\u00ean \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi box shadow CSS b\u1eb1ng c\u00e1ch k\u1ebft nhi\u1ec1u hi\u1ec7u \u1ee9ng v\u1edbi nhau. \u0110\u1ec3 t\u1ea1o h\u00ecnh \u1ea3nh n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n tu\u1ea7n t\u1ef1 theo c\u00e1c b\u01b0\u1edbc sau.<\/span><\/p>\n\n\n\n<p><b>B\u01b0\u1edbc 1:<\/b><span style=\"font-weight: 400;\"> V\u1ebd h\u00ecnh \u1ea3nh b\u1ea1n mu\u1ed1n t\u1ea1o b\u1eb1ng box shadow tr\u00ean gi\u1ea5y. B\u1eb1ng c\u00e1ch n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 h\u00ecnh dung r\u00f5 h\u01a1n khi thao t\u00e1c c\u00e1c m\u00e3 code. Khi \u0111\u00e3 th\u00e0nh th\u1ea1o, b\u1ea1n c\u00f3 th\u1ec3 b\u1ecf qua b\u01b0\u1edbc n\u00e0y.<\/span><\/p>\n\n\n\n<p><b>B\u01b0\u1edbc 2: <\/b><span style=\"font-weight: 400;\">T\u1ea1o 2 class \u201cheart\u201d v\u00e0 \u201cpixel\u201d, l\u1ea7n l\u01b0\u1ee3t l\u00e0 div b\u00ean ngo\u00e0i v\u00e0 div b\u00ean trong. Trong \u0111\u00f3, div b\u00ean ngo\u00e0i d\u00f9ng \u0111\u1ec3 \u0111\u01b0a to\u00e0n b\u1ed9 h\u00ecnh \u1ea3nh v\u00e0o gi\u1eefa m\u00e0n h\u00ecnh. Div b\u00ean trong d\u00f9ng \u0111\u1ec3 t\u1ea1o c\u00e1c pixel c\u1ee7a h\u00ecnh \u1ea3nh s\u1eafp t\u1ea1o.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\n<p style=\"text-align: left;\"><b>HTML<\/b><\/p>\n<\/td><td><b>CSS<\/b><\/td><\/tr><tr><td><span style=\"font-weight: 400;\">&lt;div class=\u201cheart\u201d&gt;<\/span>\n<p><span style=\"font-weight: 400;\">&lt;div class=\u201c pixel&gt;&lt;\/div&gt;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/p>\n<\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.heart{<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;width:17rem;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;height:16rem;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;top:50%;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;left: 50%;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;transform:translate(-50% ,-50%);<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;background-color:gray;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">.pixel{<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;width: 1rem;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;height: 1rem;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;box-shadow: 1rem 1rem 0 -0.05rem #fff;<\/span><\/p>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">}<\/span><\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>H\u00ecnh \u1ea3nh k\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"690\" height=\"646\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-2-vippro.jpg\" alt=\"\" class=\"wp-image-73199\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-2-vippro.jpg 690w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-2-vippro-300x281.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-2-vippro-640x599.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-2-vippro-200x187.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-2-vippro-100x94.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-2-vippro-481x450.jpg 481w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><\/figure>\n\n\n\n<p><i><span style=\"font-weight: 400;\">Ghi ch\u00fa<\/span><\/i><span style=\"font-weight: 400;\">: Trong \u201cbox-shadow: 1rem 1rem 0 -0.05rem #fff;\u201d offset-y v\u00e0 offset-x t\u01b0\u01a1ng \u1ee9ng v\u1edbi s\u1ed1 h\u00e0ng v\u00e0 s\u1ed1 c\u1ed9t c\u1ee7a pixel trong l\u01b0\u1edbi pixel.<\/span><\/p>\n\n\n\n<p><b>B\u01b0\u1edbc 3:<\/b><span style=\"font-weight: 400;\"> T\u1ea1o to\u00e0n b\u1ed9 l\u01b0\u1edbi pixel b\u1eb1ng c\u00e1ch sao ch\u00e9p v\u00e0 thay \u0111\u1ed5i offset-y t\u01b0\u01a1ng \u1ee9ng.<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">box-shadow:&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;1rem 1rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;2rem 1rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;3rem 1rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;4rem 1rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;5rem 1rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;6rem 1rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;7rem 1rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;8rem 1rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;9rem 1rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;10rem 1rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;11rem 1rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;12rem 1rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;13rem 1rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;14rem 1rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;15rem 1rem 0 -0.05rem #fff,<\/span>\n\n\n\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;1rem 2rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;2rem 2rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;3rem 2rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;4rem 2rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;5rem 2rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;6rem 2rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;7rem 2rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;8rem 2rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;9rem 2rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;10rem 2rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;11rem 2rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;12rem 2rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;13rem 2rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;14rem 2rem 0 -0.05rem #fff,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;15rem 2rem 0 -0.05rem #fff;<\/span>\n\n<span style=\"font-weight: 400;\">\u2026<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">Sau khi ch\u00e8n t\u1ea5t c\u1ea3 pixel v\u00e0o l\u01b0\u1edbi, ta c\u00f3 h\u00ecnh \u1ea3nh nh\u01b0 sau:&nbsp;<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"928\" height=\"744\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-3-vippro.png\" alt=\"\" class=\"wp-image-73198\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-3-vippro.png 928w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-3-vippro-300x241.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-3-vippro-768x616.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-3-vippro-200x160.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-3-vippro-100x80.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-3-vippro-561x450.png 561w\" sizes=\"auto, (max-width: 928px) 100vw, 928px\" \/><\/figure>\n\n\n\n<p><b>B\u01b0\u1edbc 4:<\/b><span style=\"font-weight: 400;\"> B\u1eaft \u0111\u1ea7u t\u00f4 m\u00e0u c\u00e1c pixel \u0111\u1ec3 theo h\u00ecnh \u1ea3nh \u0111\u00e3 v\u1ebd \u1edf b\u01b0\u1edbc 1. B\u1ea1n c\u00f3 th\u1ec3 l\u00e0m \u0111i\u1ec1u \u0111\u00f3 b\u1eb1ng c\u00e1ch thay \u0111\u1ed5i m\u00e0u c\u1ee7a c\u00e1c pixel t\u1eeb m\u00e0u tr\u1eafng sang m\u00e0u b\u1ea1n mu\u1ed1n.&nbsp;<\/span><\/p>\n\n\n\n<p>H\u00ecnh \u1ea3nh k\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"278\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-4-vippro-300x278.jpg\" alt=\"\" class=\"wp-image-73197\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-4-vippro-300x278.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-4-vippro-640x594.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-4-vippro-200x186.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-4-vippro-100x93.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-4-vippro-485x450.jpg 485w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-4-vippro.jpg 748w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p><b>B\u01b0\u1edbc 5<\/b><span style=\"font-weight: 400;\">: X\u00f3a t\u1ea5t c\u1ea3 pixel m\u00e0u tr\u1eafng kh\u00f4ng s\u1eed d\u1ee5ng v\u00e0 m\u00e0u n\u1ec1n c\u1ee7a div b\u00ean ngo\u00e0i.<\/span><\/p>\n\n\n\n<p><b>B\u01b0\u1edbc 6: <\/b><span style=\"font-weight: 400;\">\u0110\u1eb7t b\u00e1n k\u00ednh tr\u1ea3i r\u1ed9ng c\u1ee7a t\u1ea5t c\u1ea3 pixel v\u1ec1 0. \u0110o\u1ea1n code cu\u1ed1i c\u00f9ng c\u1ee7a b\u1ea1n s\u1ebd nh\u01b0 sau:<\/span><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"font-weight: 400;\">.pixel{<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;width: 1rem;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;height: 1rem;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:&nbsp;<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* row1 *\/<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;3rem 1rem #000, 4rem 1rem #000, 5rem 1rem #000, 6rem 1rem #000, 10rem 1rem #000, 11rem 1rem #000, 12rem 1rem #000, 13rem 1rem #000,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* row2 *\/<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;2rem 2rem #000, 3rem 2rem rgb(223, 65, 105), 4rem 2rem rgb(223, 65, 105), 5rem 2rem rgb(223, 65, 105), 6rem 2rem rgb(223, 65, 105), 7rem 2rem #000, 9rem 2rem #000, 10rem 2rem rgb(223, 65, 105), 11rem 2rem rgb(223, 65, 105), 12rem 2rem rgb(223, 65, 105), 13rem 2rem rgb(223, 65, 105), 14rem 2rem #000,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* row3 *\/<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;1rem 3rem #000, 2rem 3rem rgb(223, 65, 105), 3rem 3rem rgb(223, 65, 105), 4rem 3rem rgb(230, 212, 219), 5rem 3rem rgb(230, 212, 219), 6rem 3rem rgb(223, 65, 105), 7rem 3rem rgb(223, 65, 105), 8rem 3rem #000, 9rem 3rem rgb(223, 65, 105), 10rem 3rem rgb(223, 65, 105), 11rem 3rem rgb(223, 65, 105), 12rem 3rem rgb(223, 65, 105), 13rem 3rem rgb(223, 65, 105), 14rem 3rem rgb(223, 65, 105), 15rem 3rem #000,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* row4 *\/<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;1rem 4rem #000, 2rem 4rem rgb(223, 65, 105), 3rem 4rem rgb(230, 212, 219), 4rem 4rem rgb(230, 212, 219), 5rem 4rem rgb(223, 65, 105), 6rem 4rem rgb(223, 65, 105), 7rem 4rem rgb(223, 65, 105), 8rem 4rem rgb(223, 65, 105), 9rem 4rem rgb(223, 65, 105), 10rem 4rem rgb(223, 65, 105), 11rem 4rem rgb(223, 65, 105), 12rem 4rem rgb(223, 65, 105), 13rem 4rem rgb(223, 65, 105), 14rem 4rem rgb(223, 65, 105), 15rem 4rem #000,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* row5 *\/<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;1rem 5rem #000, 2rem 5rem rgb(223, 65, 105), 3rem 5rem rgb(230, 212, 219), 4rem 5rem rgb(223, 65, 105), 5rem 5rem rgb(223, 65, 105), 6rem 5rem rgb(223, 65, 105), 7rem 5rem rgb(223, 65, 105), 8rem 5rem rgb(223, 65, 105), 9rem 5rem rgb(223, 65, 105), 10rem 5rem rgb(223, 65, 105), 11rem 5rem rgb(223, 65, 105), 12rem 5rem rgb(223, 65, 105), 13rem 5rem rgb(223, 65, 105), 14rem 5rem rgb(223, 65, 105), 15rem 5rem #000,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* row6 *\/<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;1rem 6rem #000, 2rem 6rem rgb(223, 65, 105), 3rem 6rem rgb(223, 65, 105), 4rem 6rem rgb(223, 65, 105), 5rem 6rem rgb(223, 65, 105), 6rem 6rem rgb(223, 65, 105), 7rem 6rem rgb(223, 65, 105), 8rem 6rem rgb(223, 65, 105), 9rem 6rem rgb(223, 65, 105), 10rem 6rem rgb(223, 65, 105), 11rem 6rem rgb(223, 65, 105), 12rem 6rem rgb(223, 65, 105), 13rem 6rem rgb(223, 65, 105), 14rem 6rem rgb(223, 65, 105), 15rem 6rem #000,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* row7 *\/<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;1rem 7rem #000, 2rem 7rem rgb(223, 65, 105), 3rem 7rem rgb(223, 65, 105), 4rem 7rem rgb(223, 65, 105), 5rem 7rem rgb(223, 65, 105), 6rem 7rem rgb(223, 65, 105), 7rem 7rem rgb(223, 65, 105), 8rem 7rem rgb(223, 65, 105), 9rem 7rem rgb(223, 65, 105), 10rem 7rem rgb(223, 65, 105), 11rem 7rem rgb(223, 65, 105), 12rem 7rem rgb(223, 65, 105), 13rem 7rem rgb(223, 65, 105), 14rem 7rem rgb(223, 65, 105), 15rem 7rem #000,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* row8 *\/<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;2rem 8rem #000, 3rem 8rem rgb(223, 65, 105), 4rem 8rem rgb(223, 65, 105), 5rem 8rem rgb(223, 65, 105), 6rem 8rem rgb(223, 65, 105), 7rem 8rem rgb(223, 65, 105), 8rem 8rem rgb(223, 65, 105), 9rem 8rem rgb(223, 65, 105), 10rem 8rem rgb(223, 65, 105), 11rem 8rem rgb(223, 65, 105), 12rem 8rem rgb(223, 65, 105), 13rem 8rem rgb(223, 65, 105), 14rem 8rem #000,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* row9 *\/<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;3rem 9rem #000, 4rem 9rem rgb(223, 65, 105), 5rem 9rem rgb(223, 65, 105), 6rem 9rem rgb(223, 65, 105), 7rem 9rem rgb(223, 65, 105), 8rem 9rem rgb(223, 65, 105), 9rem 9rem rgb(223, 65, 105), 10rem 9rem rgb(223, 65, 105), 11rem 9rem rgb(223, 65, 105), 12rem 9rem rgb(223, 65, 105), 13rem 9rem #000,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* row10 *\/<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;4rem 10rem #000, 5rem 10rem rgb(223, 65, 105), 6rem 10rem rgb(223, 65, 105), 7rem 10rem rgb(223, 65, 105), 8rem 10rem rgb(223, 65, 105), 9rem 10rem rgb(223, 65, 105), 10rem 10rem rgb(223, 65, 105), 11rem 10rem rgb(223, 65, 105), 12rem 10rem #000,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* row11 *\/<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;5rem 11rem #000, 6rem 11rem rgb(223, 65, 105), 7rem 11rem rgb(223, 65, 105), 8rem 11rem rgb(223, 65, 105), 9rem 11rem rgb(223, 65, 105), 10rem 11rem rgb(223, 65, 105), 11rem 11rem #000,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* row12 *\/<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;6rem 12rem #000, 7rem 12rem rgb(223, 65, 105), 8rem 12rem rgb(223, 65, 105), 9rem 12rem rgb(223, 65, 105), 10rem 12rem #000,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* row13 *\/<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;7rem 13rem #000, 8rem 13rem rgb(223, 65, 105), 9rem 13rem #000,<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;\/* row14 *\/<\/span>\n\n<span style=\"font-weight: 400;\">&nbsp;&nbsp;&nbsp;&nbsp;8rem 14rem #000;<\/span>\n\n<span style=\"font-weight: 400;\">}<\/span><\/code><\/pre>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u00ecnh v\u1ebd pixel c\u1ee7a b\u1ea1n s\u1ebd chuy\u1ec3n \u0111\u1ed5i nh\u01b0 sau:<\/span><\/p>\n\n\n\n<p>K\u1ebft qu\u1ea3 sau b\u01b0\u1edbc 5:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"718\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-5-vippro.jpg\" alt=\"\" class=\"wp-image-73196\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-5-vippro.jpg 902w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-5-vippro-300x239.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-5-vippro-768x611.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-5-vippro-200x159.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-5-vippro-100x80.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-5-vippro-565x450.jpg 565w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><\/figure>\n\n\n\n<p>K\u1ebft qu\u1ea3 sau b\u01b0\u1edbc 6:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"916\" height=\"696\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-6-vippro.jpg\" alt=\"\" class=\"wp-image-73195\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-6-vippro.jpg 916w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-6-vippro-300x228.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-6-vippro-768x584.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-6-vippro-200x152.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-6-vippro-100x76.jpg 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-pixel-art-6-vippro-592x450.jpg 592w\" sizes=\"auto, (max-width: 916px) 100vw, 916px\" \/><\/figure>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u nhi\u1ec1u h\u01a1n v\u1ec1 c\u00e1ch t\u1ea1o pixel art qua c\u00e1c v\u00ed d\u1ee5 sau \u0111\u00e2y: <\/span><a href=\"https:\/\/codepen.io\/SnafuParadise\/pen\/mmzoJL\"><span style=\"font-weight: 400;\">V\u1ebd nh\u00e2n v\u1eadt Mario v\u1edbi HTML, box shadow CSS<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/codepen.io\/nandovejer\/pen\/jObgdK\"><span style=\"font-weight: 400;\">v\u1ebd h\u00ecnh c\u00e2y n\u1ea5m nhi\u1ec1u k\u00edch th\u01b0\u1edbc v\u1edbi HTML, box shadow CSS v\u00e0 Javascript<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-box-shadow-css\"><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_box_shadow_CSS\"><\/span><b>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 box shadow CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-box-shadow-nen-dung-nh\u01b0-th\u1ebf-nao-d\u1ec3-trang-web-khong-b\u1ecb-r\u1ed1i\"><b>Box shadow n\u00ean d\u00f9ng nh\u01b0 th\u1ebf n\u00e0o \u0111\u1ec3 trang web kh\u00f4ng b\u1ecb r\u1ed1i?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">H\u1ea7u h\u1ebft m\u1ecdi th\u1ee9 tr\u00ean web \u0111\u1ec1u c\u00f3 th\u1ec3 c\u00f3 b\u00f3ng \u0111\u1ed5, c\u00f3 nhi\u1ec1u thu\u1ed9c t\u00ednh v\u00e0 h\u00e0m CSS t\u1ea1o ra b\u00f3ng \u0111\u1ed5. Tuy nhi\u00ean, vi\u1ec7c l\u1ef1a ch\u1ecdn lo\u1ea1i b\u00f3ng \u0111\u1ed5 ph\u00f9 h\u1ee3p ch\u00ednh l\u00e0 y\u1ebfu t\u1ed1 t\u1ea1o n\u00ean hi\u1ec7u qu\u1ea3 c\u1ee7a b\u00f3ng \u0111\u1ed5.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 trang web kh\u00f4ng b\u1ecb r\u1ed1i, b\u1ea1n c\u00f3 th\u1ec3 c\u00e2n nh\u1eafc \u00e1p d\u1ee5ng t\u1eebng hi\u1ec7u \u1ee9ng ph\u00f9 h\u1ee3p cho c\u00e1c th\u00e0nh ph\u1ea7n nh\u01b0:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>box-shadow<\/b><span style=\"font-weight: 400;\">: Thu\u1ed9c t\u00ednh CSS n\u00e0y t\u1ea1o ra c\u00e1c b\u00f3ng \u0111\u1ed5 ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c ph\u1ea7n t\u1eed. N\u00f3 linh ho\u1ea1t v\u00e0 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng tr\u00ean b\u1ea5t k\u00ec ph\u1ea7n t\u1eed HTML nh\u01b0 th\u1ebb, n\u00fat b\u1ea5m, ho\u1eb7c b\u1ea5t k\u1ef3 \u0111\u1ed1i t\u01b0\u1ee3ng n\u00e0o c\u1ea7n t\u00f4 \u0111i\u1ec3m b\u1eb1ng hi\u1ec7u \u1ee9ng box-shadow.<\/span><\/li>\n\n\n\n<li><b>text-shadow:<\/b><span style=\"font-weight: 400;\"> \u0110\u00e2y l\u00e0 m\u1ed9t thu\u1ed9c t\u00ednh CSS t\u1ea1o ra b\u00f3ng \u0111\u1ed5 d\u00e0nh ri\u00eang cho c\u00e1c ph\u1ea7n t\u1eed v\u0103n b\u1ea3n.<\/span><\/li>\n\n\n\n<li><b>filter: drop-shadow(): <\/b><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh CSS \u1edf \u0111\u00e2y l\u00e0 filter, nh\u01b0ng th\u1ee9 t\u1ea1o ra b\u00f3ng \u0111\u1ed5 l\u00e0 h\u00e0m drop-shadow m\u00e0 n\u00f3 ch\u1ea5p nh\u1eadn. \u0110i\u1ec1u l\u00e0m cho lo\u1ea1i b\u00f3ng \u0111\u1ed5 n\u00e0y kh\u00e1c bi\u1ec7t so v\u1edbi box-shadow l\u00e0 n\u00f3 tu\u00e2n theo h\u00ecnh d\u1ea1ng \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb c\u1ee7a b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed n\u00e0o (bao g\u1ed3m c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed gi\u1ea3).<\/span><\/li>\n\n\n\n<li><b>&lt;feDropShadow&gt;<\/b><span style=\"font-weight: 400;\">: \u0110\u00e2y th\u1ef1c s\u1ef1 l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n SVG, trong khi c\u00e1c th\u00e0nh ph\u1ea7n kh\u00e1c l\u00e0 thu\u1ed9c t\u00ednh CSS. V\u00ec v\u1eady, b\u1ea1n s\u1ebd s\u1eed d\u1ee5ng th\u00e0nh ph\u1ea7n n\u00e0y \u0111\u1ec3 t\u1ea1o b\u00f3ng \u0111\u1ed5 th\u1ea3 tr\u1ef1c ti\u1ebfp trong \u0111\u00e1nh d\u1ea5u SVG.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-box-shadow-co-\u1ea3nh-h\u01b0\u1edfng-d\u1ebfn-b\u1ed1-c\u1ee5c-tai-li\u1ec7u-khong\"><b>Box shadow c\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn b\u1ed1 c\u1ee5c t\u00e0i li\u1ec7u kh\u00f4ng?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Box Shadow kh\u00f4ng \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn b\u1ed1 c\u1ee5c t\u00e0i li\u1ec7u. B\u00f3ng \u0111\u1ed5 c\u00f3 k\u00edch th\u01b0\u1edbc b\u1eb1ng v\u1edbi k\u00edch th\u01b0\u1edbc c\u1ee7a th\u00e0nh ph\u1ea7n m\u00e0 n\u00f3 \u00e1p d\u1ee5ng. B\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a box-shadow (th\u00f4ng qua tham s\u1ed1 spread radius) m\u00e0 kh\u00f4ng l\u00e0m thay \u0111\u1ed5i c\u00e1c tham s\u1ed1 kh\u00e1c.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-box-shadow-khac-drop-shadow-nh\u01b0-th\u1ebf-nao\"><b>Box shadow kh\u00e1c drop shadow nh\u01b0 th\u1ebf n\u00e0o?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">M\u1eb7c d\u00f9 box-shadow v\u00e0 drop-shadow \u0111\u1ec1u t\u1ea1o ra hi\u1ec7u \u1ee9ng b\u00f3ng \u0111\u1ed5 cho c\u00e1c th\u00e0nh ph\u1ea7n, gi\u00fap l\u00e0m n\u1ed5i b\u1eadt v\u00e0 t\u1ea1o chi\u1ec1u s\u00e2u cho ch\u00fang. Tuy nhi\u00ean gi\u1eefa box shadow v\u00e0 drop shadow v\u1eabn c\u00f3 nh\u1eefng \u0111i\u1ec3m kh\u00e1c bi\u1ec7t.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>\n<p style=\"text-align: left;\"><b>Thu\u1ed9c t\u00ednh<\/b><\/p>\n<\/td><td><b>box-shadow<\/b><\/td><td><b>drop-shadow<\/b><\/td><\/tr><tr><td><b>\u0110\u1ecbnh ngh\u0129a<\/b><\/td><td><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh CSS t\u1ea1o b\u00f3ng \u0111\u1ed5 h\u00ecnh ch\u1eef nh\u1eadt xung quanh m\u1ed9t ph\u1ea7n t\u1eed.<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">H\u00e0m l\u1ecdc CSS t\u1ea1o b\u00f3ng \u0111\u1ed5 theo h\u00ecnh d\u1ea1ng c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed.<\/span><\/p>\n<\/td><\/tr><tr><td>\n<p style=\"text-align: left;\"><b>C\u00e1ch th\u1ee9c ho\u1ea1t \u0111\u1ed9ng<\/b><\/p>\n<\/td><td><span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 th\u00eam nhi\u1ec1u b\u00f3ng \u0111\u1ed5 v\u1edbi d\u1ea5u ph\u1ea9y.<\/span><\/td><td><span style=\"font-weight: 400;\">Ch\u1ec9 s\u1eed d\u1ee5ng m\u1ed9t b\u00f3ng \u0111\u1ed5 duy nh\u1ea5t.<\/span><\/td><\/tr><tr><td><b>Hi\u1ec7u su\u1ea5t<\/b><\/td><td><span style=\"font-weight: 400;\">Cao h\u01a1n so v\u1edbi drop-shadow<\/span><\/td><td>\n<p style=\"text-align: left;\"><span style=\"font-weight: 400;\">Th\u1ea5p h\u01a1n so v\u1edbi box-shadow<\/span><\/p>\n<\/td><\/tr><tr><td><b>V\u00ed d\u1ee5<\/b><\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-73200\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-example-vippro.jpg\" alt=\"\" width=\"920\" height=\"408\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-example-vippro.jpg 920w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-example-vippro-300x133.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-example-vippro-700x310.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-example-vippro-200x89.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/box-shadow-example-vippro-100x44.jpg 100w\" sizes=\"auto, (max-width: 920px) 100vw, 920px\" \/><\/figure><\/td><td><figure><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-73201\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/drop-shadow-example-vippro.jpg\" alt=\"\" width=\"924\" height=\"402\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/drop-shadow-example-vippro.jpg 924w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/drop-shadow-example-vippro-300x131.jpg 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/drop-shadow-example-vippro-700x305.jpg 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/drop-shadow-example-vippro-200x87.jpg 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/drop-shadow-example-vippro-100x44.jpg 100w\" sizes=\"auto, (max-width: 924px) 100vw, 924px\" \/><\/figure><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-th\u1ebf-nao-d\u1ec3-t\u1ea1o-bong-d\u1ed5-co-mau-s\u1eafc-chuy\u1ec3n-d\u1ed5i-gradient\"><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 t\u1ea1o b\u00f3ng \u0111\u1ed5 c\u00f3 m\u00e0u s\u1eafc chuy\u1ec3n \u0111\u1ed5i (gradient)?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">CSS kh\u00f4ng h\u1ed7 tr\u1ee3 tr\u1ef1c ti\u1ebfp b\u00f3ng \u0111\u1ed5 gradient, nh\u01b0ng b\u1ea1n c\u00f3 th\u1ec3 gi\u1ea3 l\u1eadp hi\u1ec7u \u1ee9ng n\u00e0y b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng l\u1edbp ph\u1ee7 v\u1edbi gradient v\u00e0 opacity.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lam-th\u1ebf-nao-d\u1ec3-t\u1ea1o-bong-d\u1ed5-cho-ph\u1ea7n-t\u1eed-co-vi\u1ec1n-tron-border-radius\"><b>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 t\u1ea1o b\u00f3ng \u0111\u1ed5 cho ph\u1ea7n t\u1eed c\u00f3 vi\u1ec1n tr\u00f2n (border-radius)?<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh box-shadow s\u1ebd t\u1ef1 \u0111\u1ed9ng tu\u00e2n theo h\u00ecnh d\u1ea1ng c\u1ee7a ph\u1ea7n t\u1eed v\u1edbi vi\u1ec1n tr\u00f2n. B\u1ea1n ch\u1ec9 c\u1ea7n \u00e1p d\u1ee5ng box-shadow v\u00e0 border-radius cho ph\u1ea7n t\u1eed.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft-box-shadow-css\"><span class=\"ez-toc-section\" id=\"Tong_ket_box_shadow_CSS\"><\/span><b>T\u1ed5ng k\u1ebft box shadow CSS<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">S\u1ef1 linh ho\u1ea1t v\u00e0 \u0111a d\u1ee5ng c\u1ee7a box shadow CSS \u0111\u00e3 gi\u00fap n\u00f3 tr\u1edf th\u00e0nh m\u1ed9t k\u1ef9 thu\u1eadt CSS tr\u01b0\u1eddng t\u1ed3n theo th\u1eddi gian. V\u1edbi kh\u1ea3 n\u0103ng s\u00e1ng t\u1ea1o v\u00e0 am hi\u1ec3u v\u1ec1 thu\u1ed9c t\u00ednh box shadow, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o ra nh\u1eefng hi\u1ec7u \u1ee9ng \u0111\u1ed9c \u0111\u00e1o, gi\u00fap website c\u1ee7a b\u1ea1n tr\u00f4ng n\u1ed5i b\u1eadt v\u00e0 thu h\u00fat h\u01a1n.<\/span><\/p>\n\n\n\n<p class=\"has-text-align-center\">B\u1ea1n th\u1ea5y b\u00e0i vi\u1ebft hay v\u00e0 h\u1eefu \u00edch? \u0110\u1eebng ng\u1ea1i Share v\u1edbi b\u1ea1n b\u00e8 v\u00e0 \u0111\u1ed3ng nghi\u1ec7p nh\u00e9.<br>V\u00e0 nhanh tay tham kh\u1ea3o&nbsp;<strong><a href=\"https:\/\/itviec.com\/viec-lam-it\/?utm_medium=anchor_text_low&amp;utm_source=blog&amp;utm_campaign=viec_lam_it&amp;utm_content=box_shadow_css\" target=\"_blank\" rel=\"noreferrer noopener\">vi\u1ec7c l\u00e0m IT<\/a><\/strong>&nbsp;\u201cch\u1ea5t\u201d tr\u00ean ITviec!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng m\u1ed9t website, vi\u1ec7c th\u00eam c\u00e1c y\u1ebfu t\u1ed1 h\u1ea5p d\u1eabn \u0111\u1ec3 gi\u1eef ch\u00e2n ng\u01b0\u1eddi d\u00f9ng r\u1ea5t quan tr\u1ecdng. S\u1eed d\u1ee5ng box shadow CSS l\u00e0 m\u1ed9t trong nh\u1eefng c\u00e1ch tuy\u1ec7t v\u1eddi \u0111\u1ec3 n\u00e2ng cao giao di\u1ec7n tr\u1ef1c quan c\u1ee7a trang web, t\u1ea1o th\u00eam chi\u1ec1u s\u00e2u cho c\u00e1c ph\u1ea7n t\u1eed HTML nh\u01b0 n\u00fat, [&hellip;]<\/p>\n","protected":false},"author":213,"featured_media":73245,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-73143","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Box shadow CSS l\u00e0 g\u00ec? 7 c\u00e1ch d\u00f9ng box shadow CSS c\u01a1 b\u1ea3n - ITviec Blog<\/title>\n<meta name=\"description\" content=\"L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 s\u1eed d\u1ee5ng box shadow trong CSS hi\u1ec7u qu\u1ea3? B\u00e0i vi\u1ebft n\u00e0y h\u01b0\u1edbng d\u1eabn chi ti\u1ebft 7 c\u00e1ch d\u00f9ng box shadow \u0111\u1ec3 t\u1ea1o \u0111i\u1ec3m nh\u1ea5n cho trang web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/box-shadow-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Box shadow CSS l\u00e0 g\u00ec? 7 c\u00e1ch d\u00f9ng box shadow CSS c\u01a1 b\u1ea3n\" \/>\n<meta property=\"og:description\" content=\"Trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng m\u1ed9t website, vi\u1ec7c th\u00eam c\u00e1c y\u1ebfu t\u1ed1 h\u1ea5p d\u1eabn \u0111\u1ec3 gi\u1eef ch\u00e2n ng\u01b0\u1eddi d\u00f9ng r\u1ea5t quan tr\u1ecdng. S\u1eed d\u1ee5ng box shadow CSS l\u00e0 m\u1ed9t trong nh\u1eefng c\u00e1ch\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/box-shadow-css\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-14T10:22:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-23T04:06:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Thumbnail-BOX-SHADOW-CSS-vippro.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"790\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Linh Trao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Linh Trao\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Box shadow CSS l\u00e0 g\u00ec? 7 c\u00e1ch d\u00f9ng box shadow CSS c\u01a1 b\u1ea3n - ITviec Blog","description":"L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 s\u1eed d\u1ee5ng box shadow trong CSS hi\u1ec7u qu\u1ea3? B\u00e0i vi\u1ebft n\u00e0y h\u01b0\u1edbng d\u1eabn chi ti\u1ebft 7 c\u00e1ch d\u00f9ng box shadow \u0111\u1ec3 t\u1ea1o \u0111i\u1ec3m nh\u1ea5n cho trang web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/box-shadow-css\/","og_locale":"vi_VN","og_type":"article","og_title":"Box shadow CSS l\u00e0 g\u00ec? 7 c\u00e1ch d\u00f9ng box shadow CSS c\u01a1 b\u1ea3n","og_description":"Trong qu\u00e1 tr\u00ecnh x\u00e2y d\u1ef1ng m\u1ed9t website, vi\u1ec7c th\u00eam c\u00e1c y\u1ebfu t\u1ed1 h\u1ea5p d\u1eabn \u0111\u1ec3 gi\u1eef ch\u00e2n ng\u01b0\u1eddi d\u00f9ng r\u1ea5t quan tr\u1ecdng. S\u1eed d\u1ee5ng box shadow CSS l\u00e0 m\u1ed9t trong nh\u1eefng c\u00e1ch","og_url":"https:\/\/itviec.com\/blog\/box-shadow-css\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2024-06-14T10:22:49+00:00","article_modified_time":"2025-07-23T04:06:15+00:00","og_image":[{"width":1500,"height":790,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Thumbnail-BOX-SHADOW-CSS-vippro.png","type":"image\/png"}],"author":"Linh Trao","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Linh Trao","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"16 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/box-shadow-css\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/box-shadow-css\/"},"author":{"name":"Linh Trao","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16"},"headline":"Box shadow CSS l\u00e0 g\u00ec? 7 c\u00e1ch d\u00f9ng box shadow CSS c\u01a1 b\u1ea3n","datePublished":"2024-06-14T10:22:49+00:00","dateModified":"2025-07-23T04:06:15+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/box-shadow-css\/"},"wordCount":3095,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/box-shadow-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Thumbnail-BOX-SHADOW-CSS-vippro.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/box-shadow-css\/","url":"https:\/\/itviec.com\/blog\/box-shadow-css\/","name":"Box shadow CSS l\u00e0 g\u00ec? 7 c\u00e1ch d\u00f9ng box shadow CSS c\u01a1 b\u1ea3n - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/box-shadow-css\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/box-shadow-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Thumbnail-BOX-SHADOW-CSS-vippro.png","datePublished":"2024-06-14T10:22:49+00:00","dateModified":"2025-07-23T04:06:15+00:00","description":"L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 s\u1eed d\u1ee5ng box shadow trong CSS hi\u1ec7u qu\u1ea3? B\u00e0i vi\u1ebft n\u00e0y h\u01b0\u1edbng d\u1eabn chi ti\u1ebft 7 c\u00e1ch d\u00f9ng box shadow \u0111\u1ec3 t\u1ea1o \u0111i\u1ec3m nh\u1ea5n cho trang web.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/box-shadow-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/box-shadow-css\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/box-shadow-css\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Thumbnail-BOX-SHADOW-CSS-vippro.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/06\/Thumbnail-BOX-SHADOW-CSS-vippro.png","width":1500,"height":790,"caption":"box shadow css - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/box-shadow-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Box shadow CSS l\u00e0 g\u00ec? 7 c\u00e1ch d\u00f9ng box shadow CSS c\u01a1 b\u1ea3n"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16","name":"Linh Trao","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","caption":"Linh Trao"},"url":"https:\/\/itviec.com\/blog\/author\/linh-trao\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/73143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=73143"}],"version-history":[{"count":2,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/73143\/revisions"}],"predecessor-version":[{"id":89815,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/73143\/revisions\/89815"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/73245"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=73143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=73143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=73143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}