{"id":311,"date":"2013-10-25T15:55:00","date_gmt":"2013-10-25T15:55:00","guid":{"rendered":"https:\/\/kiencang.net\/2013\/10\/25\/code-bo-tron-anh-voi-css3\/"},"modified":"2023-04-03T11:36:15","modified_gmt":"2023-04-03T04:36:15","slug":"code-bo-tron-anh-voi-css3","status":"publish","type":"post","link":"https:\/\/kiencang.net\/code-bo-tron-anh-voi-css3\/","title":{"rendered":"Code bo tr\u00f2n \u1ea3nh v\u1edbi CSS3: vui th\u00f4i, ch\u1ee9 n\u00f3 c\u0169ng kh\u00f4ng hay d\u00f9ng l\u1eafm tr\u00ean c\u00e1c website \u0111\u01a1n gi\u1ea3n"},"content":{"rendered":"\n

S\u1eed d\u1ee5ng CSS3 b\u1ea1n s\u1ebd th\u1ea5y bo tr\u00f2n \u1ea3nh r\u1ea5t d\u1ec5 d\u00e0ng, kh\u00f4ng c\u1ea7n ph\u1ea3i d\u00f9ng Photoshop n\u1eefa, ch\u1ec9 v\u1edbi 3 d\u00f2ng code b\u1ee9c \u1ea3nh \u0111\u00e3 \u0111\u01b0\u1ee3c bo v\u00e0 ch\u1ea1y t\u1ed1t tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 bi\u1ebfn, c\u1ee5 th\u1ec3 th\u00ec v\u1edbi IE9+, Firefox 4+, Chrome, Safari 5+ v\u00e0 Opera l\u00e0 OK.<\/p>\n\n\n\n

Code m\u1eabu nh\u01b0 sau, gi\u1ea3 s\u1eed b\u1ea1n c\u00f3 b\u1ee9c \u1ea3nh v\u1edbi m\u00e3 nh\u01b0 th\u1ebf n\u00e0y trong HTML:<\/p>\n\n\n\n

<img src=\"images\/con-meo.jpg\"><\/code><\/pre>\n\n\n\n
Mu\u1ed1n bo tr\u00f2n tuy\u1ec7t \u0111\u1ed1i, b\u1ea1n s\u1ebd CSS \u1ea3nh \u0111\u00f3 nh\u01b0 n\u00e0y:<\/p>\n\n\n\n
img {\nborder-radius:50%;\n-moz-border-radius:50%;\n-webkit-border-radius:50%;\n}<\/code><\/pre>\n\n\n\n
C\u00e1c ti\u1ec1n t\u1ed1 -moz v\u00e0 -webkit l\u00e0 \u0111\u1ec3 t\u01b0\u01a1ng th\u00edch v\u1edbi c\u00e1c tr\u00ecnh duy\u1ec7t kh\u00e1c nhau. Ch\u00fa \u00fd l\u00e0 \u1ea3nh c\u1ee7a b\u1ea1n ph\u1ea3i l\u00e0 h\u00ecnh vu\u00f4ng<\/b> nh\u00e9.<\/p>\n\n\n\n
N\u1ebfu mu\u1ed1n bo tr\u00f2n g\u00f3c nh\u1ecf h\u01a1n b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ec3 5%, 10%, 20%…Ho\u1eb7c b\u1ea5t k\u1ef3 gi\u00e1 tr\u1ecb n\u00e0o m\u00e0 b\u1ea1n c\u1ea3m th\u1ea5y v\u1eeba m\u1eaft, b\u1ee9c h\u00ecnh d\u01b0\u1edbi \u0111\u00e2y c\u00f3 border-radius<\/code> l\u00e0 15%:<\/p>\n\n\n\n
\"bo<\/figure><\/div>\n\n\n\n
Sau khi bo xong \u1ea3nh, b\u1ed7ng d\u01b0ng t\u00f4i mu\u1ed1n bo lu\u00f4n ch\u1eef, \u00fd t\u01b0\u1edfng v\u1eabn th\u1ebf, s\u1ebd cho ch\u1eef \u1edf ch\u00ednh gi\u1eefa \u0111\u01b0\u1eddng tr\u00f2n, sau khi m\u00e0y m\u00f2 m\u1ed9t l\u00fac th\u00ec \u0111\u00e2y l\u00e0 k\u1ebft qu\u1ea3:<\/p>\n\n\n\n
\n
T\u00f4i S\u1ebd Bo Tr\u00f2n Tuy\u1ec7t \u0110\u1ed1i \u0110o\u1ea1n V\u0103n B\u1ea3n N\u00e0y, B\u1ea1n Xem Nh\u01b0 N\u00e0y \u0110\u00e3 \u01afng M\u1eaft Ch\u01b0a<\/h2>\n<\/div>\n\n\n\n
\u0110o\u1ea1n code m\u1eabu \u0111\u00e2y:<\/p>\n\n\n\n
<div style=\"background: #dddddd; border-radius: 50%; border: 2px solid #a1a1a1; height: 300px; margin: 20px; padding: 10px; text-align: center; width: 300px;\">\n<h2 style=\"font-size: 22px; margin-top: 33%;\">T\u00f4i S\u1ebd Bo Tr\u00f2n Tuy\u1ec7t \u0110\u1ed1i \u0110o\u1ea1n V\u0103n B\u1ea3n N\u00e0y, B\u1ea1n Xem Nh\u01b0 N\u00e0y \u0110\u00e3 \u01afng M\u1eaft Ch\u01b0a<\/h2>\n<\/div><\/code><\/pre>\n\n\n\n
T\u00f4i \u0111\u1eb7t \u0111o\u1ea1n v\u0103n b\u1ea3n trong th\u1ebb h2 v\u00e0 cho v\u00e0o th\u1ebb div. \u1ede th\u1ebb div, t\u00f4i quy \u0111\u1ecbnh c\u1ee5 th\u1ec3 chi\u1ec1u cao v\u00e0 chi\u1ec1u r\u1ed9ng b\u1eb1ng l\u1ec7nh height: 300px; width: 300px;<\/code><\/em> <\/i>V\u00ec m\u1ee5c \u0111\u00edch c\u1ee7a ch\u00fang ta l\u00e0 l\u00e0m h\u00ecnh tr\u00f2n cho n\u00ean t\u00f4i \u0111\u1ec3 chi\u1ec1u cao b\u1eb1ng chi\u1ec1u r\u1ed9ng.<\/p>\n\n\n\n
2 thu\u1ed9c t\u00ednh background: #dddddd; border: 2px solid #a1a1a1;<\/code> <\/i>s\u1ebd l\u00e0m div c\u00f3 m\u00e0u x\u00e1m v\u00e0 \u0111\u01b0\u1eddng vi\u1ec1n 2px n\u00e9t li\u1ec1n. \u0110\u1ec3 padding: 10px<\/code><\/i> l\u00e0m ch\u1eef kh\u00f4ng b\u1ecb ch\u1ea1m v\u00e0o c\u1ea1nh c\u1ee7a div<\/p>\n\n\n\n
\u0110\u1ec3 ch\u1eef c\u0103n ch\u00ednh gi\u1eefa theo chi\u1ec1u ngang ta quy \u0111\u1ecbnh text-align: center;<\/code> <\/i>Cu\u1ed1i c\u00f9ng l\u00e0 cho div th\u00e0nh h\u00ecnh tr\u00f2n b\u1eb1ng thu\u1ed9c t\u00ednh border-radius: 50%;<\/code> <\/i>

<\/i>\u0110\u1ec3 ch\u1eef ra gi\u1eefa theo chi\u1ec1u d\u1ecdc, ta \u0111i\u1ec1u ch\u1ec9nh l\u1ec1 cho th\u1ebb h2 b\u1eb1ng c\u00e1ch \u0111\u1ec3 l\u1ec1 tr\u00ean margin-top: 33%;<\/code> <\/i>Gi\u00e1 tr\u1ecb n\u00e0y c\u00f2n t\u00f9y thu\u1ed9c v\u00e0o k\u00edch c\u1ee1 c\u1ee7a ch\u1eef, nh\u01b0ng s\u1ebd kh\u00f4ng bao gi\u1edd l\u1edbn h\u01a1n 50%.<\/p>\n\n\n\n
Xem th\u00eam: c\u00e1ch l\u00e0m m\u1edd \u1ea3nh v\u1edbi thu\u1ed9c t\u00ednh opacity<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
S\u1eed d\u1ee5ng CSS3 b\u1ea1n s\u1ebd th\u1ea5y bo tr\u00f2n \u1ea3nh r\u1ea5t d\u1ec5 d\u00e0ng, kh\u00f4ng c\u1ea7n ph\u1ea3i d\u00f9ng Photoshop n\u1eefa, ch\u1ec9 v\u1edbi 3 d\u00f2ng code b\u1ee9c \u1ea3nh \u0111\u00e3 \u0111\u01b0\u1ee3c bo v\u00e0 ch\u1ea1y t\u1ed1t tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 bi\u1ebfn, c\u1ee5 th\u1ec3 th\u00ec v\u1edbi IE9+, Firefox 4+, Chrome, Safari 5+ v\u00e0 Opera l\u00e0 OK. Code m\u1eabu nh\u01b0 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nCode bo tr\u00f2n \u1ea3nh v\u1edbi CSS3: vui th\u00f4i, ch\u1ee9 n\u00f3 c\u0169ng kh\u00f4ng hay d\u00f9ng l\u1eafm tr\u00ean c\u00e1c website \u0111\u01a1n gi\u1ea3n • Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/code-bo-tron-anh-voi-css3\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Code bo tr\u00f2n \u1ea3nh v\u1edbi CSS3: vui th\u00f4i, ch\u1ee9 n\u00f3 c\u0169ng kh\u00f4ng hay d\u00f9ng l\u1eafm tr\u00ean c\u00e1c website \u0111\u01a1n gi\u1ea3n • Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"S\u1eed d\u1ee5ng CSS3 b\u1ea1n s\u1ebd th\u1ea5y bo tr\u00f2n \u1ea3nh r\u1ea5t d\u1ec5 d\u00e0ng, kh\u00f4ng c\u1ea7n ph\u1ea3i d\u00f9ng Photoshop n\u1eefa, ch\u1ec9 v\u1edbi 3 d\u00f2ng code b\u1ee9c \u1ea3nh \u0111\u00e3 \u0111\u01b0\u1ee3c bo v\u00e0 ch\u1ea1y t\u1ed1t tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 bi\u1ebfn, c\u1ee5 th\u1ec3 th\u00ec v\u1edbi IE9+, Firefox 4+, Chrome, Safari 5+ v\u00e0 Opera l\u00e0 OK. Code m\u1eabu nh\u01b0 …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/code-bo-tron-anh-voi-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-25T15:55:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-03T04:36:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2023\/04\/con-meo.jpg\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Code bo tr\u00f2n \u1ea3nh v\u1edbi CSS3: vui th\u00f4i, ch\u1ee9 n\u00f3 c\u0169ng kh\u00f4ng hay d\u00f9ng l\u1eafm tr\u00ean c\u00e1c website \u0111\u01a1n gi\u1ea3n • Ki\u1ebfn c\u00e0ng","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:\/\/kiencang.net\/code-bo-tron-anh-voi-css3\/","og_locale":"vi_VN","og_type":"article","og_title":"Code bo tr\u00f2n \u1ea3nh v\u1edbi CSS3: vui th\u00f4i, ch\u1ee9 n\u00f3 c\u0169ng kh\u00f4ng hay d\u00f9ng l\u1eafm tr\u00ean c\u00e1c website \u0111\u01a1n gi\u1ea3n • Ki\u1ebfn c\u00e0ng","og_description":"S\u1eed d\u1ee5ng CSS3 b\u1ea1n s\u1ebd th\u1ea5y bo tr\u00f2n \u1ea3nh r\u1ea5t d\u1ec5 d\u00e0ng, kh\u00f4ng c\u1ea7n ph\u1ea3i d\u00f9ng Photoshop n\u1eefa, ch\u1ec9 v\u1edbi 3 d\u00f2ng code b\u1ee9c \u1ea3nh \u0111\u00e3 \u0111\u01b0\u1ee3c bo v\u00e0 ch\u1ea1y t\u1ed1t tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t ph\u1ed5 bi\u1ebfn, c\u1ee5 th\u1ec3 th\u00ec v\u1edbi IE9+, Firefox 4+, Chrome, Safari 5+ v\u00e0 Opera l\u00e0 OK. Code m\u1eabu nh\u01b0 …","og_url":"https:\/\/kiencang.net\/code-bo-tron-anh-voi-css3\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-10-25T15:55:00+00:00","article_modified_time":"2023-04-03T04:36:15+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2023\/04\/con-meo.jpg"}],"author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"2 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/code-bo-tron-anh-voi-css3\/","url":"https:\/\/kiencang.net\/code-bo-tron-anh-voi-css3\/","name":"Code bo tr\u00f2n \u1ea3nh v\u1edbi CSS3: vui th\u00f4i, ch\u1ee9 n\u00f3 c\u0169ng kh\u00f4ng hay d\u00f9ng l\u1eafm tr\u00ean c\u00e1c website \u0111\u01a1n gi\u1ea3n • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-10-25T15:55:00+00:00","dateModified":"2023-04-03T04:36:15+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/code-bo-tron-anh-voi-css3\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/code-bo-tron-anh-voi-css3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/code-bo-tron-anh-voi-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Code bo tr\u00f2n \u1ea3nh v\u1edbi CSS3: vui th\u00f4i, ch\u1ee9 n\u00f3 c\u0169ng kh\u00f4ng hay d\u00f9ng l\u1eafm tr\u00ean c\u00e1c website \u0111\u01a1n gi\u1ea3n"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/311"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=311"}],"version-history":[{"count":1,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/311\/revisions"}],"predecessor-version":[{"id":23655,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/311\/revisions\/23655"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}