C\u00f3 th\u1ec3 hi\u1ec3u \u0111\u01a1n gi\u1ea3n\u00a0CSS\u00a0\u0111\u00f3ng vai tr\u00f2 nh\u01b0 m\u1ed9t c\u00f4ng c\u1ee5 gi\u00fap ch\u00fang ta th\u00eam v\u00e0o nh\u1eefng thay \u0111\u1ed5i v\u1ec1 m\u1eb7t h\u00ecnh th\u1ee9c nh\u01b0 \u0111\u1ed5i b\u1ed1 c\u1ee5c, m\u00e0u s\u1eafc, font ch\u1eef\u2026c\u1ee7a website.<\/p>\n
CSS\u00a0ho\u1ea1t \u0111\u1ed9ng b\u1eb1ng c\u00e1ch khoanh v\u00f9ng ch\u1ecdn d\u1ef1a v\u00e0o t\u00ean m\u1ed9t th\u1ebb\u00a0HTML,\u00a0ID\u00a0hay\u00a0Class. T\u1eeb \u0111\u00f3, \u00e1p d\u1ee5ng nh\u1eefng thu\u1ed9c t\u00ednh c\u1ea7n thay \u0111\u1ed5i l\u00ean v\u00f9ng \u0111\u01b0\u1ee3c ch\u1ecdn.<\/p>\n
N\u1ebfu m\u1ed9t website kh\u00f4ng c\u00f3\u00a0CSS\u00a0th\u00ec \u0111\u00f3 s\u1ebd ch\u1ec9 \u0111\u01a1n thu\u1ea7n l\u00e0 m\u1ed9t trang ch\u1ee9a v\u0103n b\u1ea3n v\u1edbi 2 m\u00e0u ch\u1ee7 \u0111\u1ea1o l\u00e0 tr\u1eafng v\u00e0 \u0111en m\u00e0 th\u00f4i.<\/p>\n
CSS3 l\u00e0 g\u00ec?<\/a><\/h2>\nCSS3 l\u00e0 phi\u00ean b\u1ea3n th\u1ee9 3 v\u00e0 c\u0169ng l\u00e0 m\u1edbi nh\u1ea5t c\u1ee7a CSS, CSS3 \u0111\u01b0\u1ee3c b\u1ed5 sung th\u00eam nhi\u1ec1u t\u00ednh n\u0103ng m\u1edbi ti\u1ec7n l\u1ee3i h\u01a1n CSS cho ng\u01b0\u1eddi d\u00f9ng. \u0110\u01b0\u1ee3c th\u1eeba h\u01b0\u1edfng t\u1ea5t c\u1ea3 nh\u1eefng g\u00ec c\u00f3 trong phi\u00ean b\u1ea3n tr\u01b0\u1edbc v\u00e0 b\u1ed5 sung c\u00e1c t\u00ednh n\u0103ng m\u1edbi,\u00a0CSS3\u00a0hi\u1ec7n r\u1ea5t \u0111\u01b0\u1ee3c \u01b0a chu\u1ed9ng trong thi\u1ebft k\u1ebf website.<\/a><\/p>\n![\"css3](\"https:\/\/www.hostify.vn\/blog\/wp-content\/uploads\/2022\/04\/css3-la-gi-3.webp\")
CSS3 \u0111\u01b0\u1ee3c c\u1ea3i thi\u1ec7n nhi\u1ec1u t\u00ednh n\u0103ng so v\u1edbi CSS<\/p><\/div>\n
M\u1ed9t s\u1ed1 t\u00ednh n\u0103ng m\u1edbi c\u1ee7a CSS3 so v\u1edbi CSS<\/h2>\nB\u1ed9 ch\u1ecdn<\/h3>\n
B\u1ed9 ch\u1ecdn l\u00e0 trung t\u00e2m c\u1ee7a CSS.\u00a0Ban \u0111\u1ea7u, CSS cho ph\u00e9p k\u1ebft h\u1ee3p c\u00e1c ph\u1ea7n t\u1eed theo lo\u1ea1i, l\u1edbp ho\u1eb7c ID.\u00a0CSS2.1 \u0111\u00e3 th\u00eam c\u00e1c ph\u1ea7n t\u1eed gi\u1ea3, l\u1edbp gi\u1ea3 v\u00e0 t\u1ed5 h\u1ee3p.\u00a0V\u1edbi CSS3, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eafm m\u1ee5c ti\u00eau h\u1ea7u h\u1ebft m\u1ecdi y\u1ebfu t\u1ed1 tr\u00ean trang v\u1edbi m\u1ed9t lo\u1ea1t c\u00e1c b\u1ed9 ch\u1ecdn.<\/p>\n
Trong khi CSS2 \u0111\u00e3 gi\u1edbi thi\u1ec7u m\u1ed9t s\u1ed1\u00a0b\u1ed9 ch\u1ecdn thu\u1ed9c t\u00ednh, ch\u00fang cho ph\u00e9p k\u1ebft h\u1ee3p c\u00e1c y\u1ebfu t\u1ed1 d\u1ef1a tr\u00ean c\u00e1c thu\u1ed9c t\u00ednh c\u00f3 s\u1eb5n v\u00e0 CSS3 m\u1edf r\u1ed9ng d\u1ef1a tr\u00ean c\u00e1c b\u1ed9 ch\u1ecdn thu\u1ed9c t\u00ednh \u0111\u00f3. Th\u00eam 3 b\u1ed9 ch\u1ecdn thu\u1ed9c t\u00ednh \u0111\u00e3 \u0111\u01b0\u1ee3c th\u00eam v\u00e0o trong CSS3,\u00a0cho ph\u00e9p l\u1ef1a ch\u1ecdn chu\u1ed7i con.<\/p>\n
\n- [attribute^=value]\u00a0Ch\u1ecdn t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n v\u1edbi thu\u1ed9c t\u00ednh c\u00f3 gi\u00e1 tr\u1ecb b\u1eaft \u0111\u1ea7u b\u1eb1ng \u201cvalue\u201d.
\nV\u00ed d\u1ee5:\u00a0p[class^=test]\u00a0 Ch\u1ecdn t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n <p> v\u1edbi thu\u1ed9c t\u00ednh\u00a0class\u00a0c\u00f3 gi\u00e1 tr\u1ecb b\u1eaft \u0111\u1ea7u l\u00e0\u00a0test<\/li>\n - [attribute$=value]\u00a0 Ch\u1ecdn t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n v\u1edbi thu\u1ed9c t\u00ednh c\u00f3 gi\u00e1 tr\u1ecb k\u1ebft th\u00fac b\u1eb1ng \u201cvalue\u201d.
\nV\u00ed d\u1ee5:\u00a0p[class$=test]\u00a0 Ch\u1ecdn t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n <p> v\u1edbi thu\u1ed9c t\u00ednh\u00a0class\u00a0c\u00f3 gi\u00e1 tr\u1ecb k\u1ebft th\u00fac l\u00e0\u00a0test<\/li>\n - [attribute*=value]\u00a0 Ch\u1ecdn t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n v\u1edbi thu\u1ed9c t\u00ednh c\u00f3 gi\u00e1 tr\u1ecb \u0111\u1eb7c bi\u1ec7t b\u1eb1ng \u201cvalue\u201d.
\nV\u00ed d\u1ee5:\u00a0p[class*=test]\u00a0 Ch\u1ecdn t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n <p> v\u1edbi thu\u1ed9c t\u00ednh\u00a0class\u00a0c\u00f3 gi\u00e1 tr\u1ecb \u0111\u1eb7c bi\u1ec7t b\u1eb1ng\u00a0test\u00a0(t\u1ee9c l\u00e0 l\u00fac n\u00e0y ch\u1eef\u00a0test\u00a0n\u1eb1m \u1edf \u0111\u1ea7u, cu\u1ed1i hay gi\u1eefa \u0111\u1ec1u \u0111\u01b0\u1ee3c ch\u1ecdn).<\/li>\n<\/ul>\nM\u00e0u trong CSS3<\/h3>\n
CSS3 mang \u0111\u1ebfn s\u1ef1 h\u1ed7 tr\u1ee3 cho m\u1ed9t s\u1ed1 c\u00e1ch m\u00f4 t\u1ea3 m\u00e0u s\u1eafc m\u1edbi.\u00a0Tr\u01b0\u1edbc CSS3, ch\u00fang ta h\u1ea7u nh\u01b0 lu\u00f4n khai b\u00e1o m\u00e0u b\u1eb1ng \u0111\u1ecbnh d\u1ea1ng th\u1eadp l\u1ee5c ph\u00e2n (#FFF ho\u1eb7c #FFFFFF cho m\u00e0u tr\u1eafng).\u00a0C\u0169ng c\u00f3 th\u1ec3 khai b\u00e1o m\u00e0u b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng k\u00fd hi\u1ec7u rgb (), cung c\u1ea5p s\u1ed1 nguy\u00ean (0 tr\u1eeb255) ho\u1eb7c t\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m.<\/p>\n
Danh s\u00e1ch t\u1eeb kh\u00f3a m\u00e0u \u0111\u00e3 \u0111\u01b0\u1ee3c m\u1edf r\u1ed9ng trong\u00a0m\u00f4-\u0111un m\u00e0u CSS3 \u0111\u1ec3 bao g\u1ed3m 147 m\u00e0u t\u1eeb kh\u00f3a b\u1ed5 sung, CSS3 c\u0169ng cung c\u1ea5p m\u1ed9t s\u1ed1 t\u00f9y ch\u1ecdn kh\u00e1c:\u00a0HSL\u00a0,\u00a0HSLA\u00a0v\u00e0\u00a0RGBA\u00a0.\u00a0S\u1ef1 thay \u0111\u1ed5i \u0111\u00e1ng ch\u00fa \u00fd nh\u1ea5t v\u1edbi c\u00e1c lo\u1ea1i m\u00e0u m\u1edbi n\u00e0y l\u00e0\u00a0kh\u1ea3 n\u0103ng khai b\u00e1o c\u00e1c m\u00e0u b\u00e1n trong su\u1ed1t.<\/p>\n
RGBA<\/h3>\n
RGBA ho\u1ea1t \u0111\u1ed9ng gi\u1ed1ng nh\u01b0 RGB, ch\u1ec9 th\u00eam v\u00e0o m\u1ed9t gi\u00e1 tr\u1ecb l\u00e0 alpha, m\u1ee9c \u0111\u1ed9 m\u1edd \u0111\u1ee5c ho\u1eb7c m\u1ee9c \u0111\u1ed9 trong su\u1ed1t alpha.\u00a0Ba gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean v\u1eabn \u0111\u1ea1i di\u1ec7n cho m\u00e0u \u0111\u1ecf, xanh l\u00e1 c\u00e2y v\u00e0 xanh d\u01b0\u01a1ng.<\/p>\n
\u0110\u1ed1i v\u1edbi gi\u00e1 tr\u1ecb alpha, 1 c\u00f3 ngh\u0129a l\u00e0 ho\u00e0n to\u00e0n m\u1edd \u0111\u1ee5c, 0 ho\u00e0n to\u00e0n trong su\u1ed1t v\u00e0 0,5 l\u00e0 50% m\u1edd \u0111\u1ee5c.\u00a0B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng b\u1ea5t k\u1ef3 s\u1ed1 n\u00e0o trong kho\u1ea3ng t\u1eeb 0 \u0111\u1ebfn 1.<\/p>\n
Pseudo-Classes<\/h3>\n
M\u1ed9t s\u1ed1 Pseudo-Classes quen thu\u1ed9c t\u01b0\u01a1ng t\u00e1c ng\u01b0\u1eddi d\u00f9ng, c\u1ee5 th\u1ec3 l\u00e0: link ,\u00a0:visited , : hover , : active v\u00e0\u00a0\u00a0:focus.<\/p>\n
M\u1ed9t v\u00e0i b\u1ed9 ch\u1ecdn\u00a0Pseudo-Classes kh\u00e1c \u0111\u00e3 \u0111\u01b0\u1ee3c th\u00eam v\u00e0o CSS3.\u00a0M\u1ed9t l\u00e0\u00a0\u00a0:\u00a0root, cho ph\u00e9p c\u00e1c nh\u00e0 thi\u1ebft k\u1ebf tr\u1ecf \u0111\u1ebfn ph\u1ea7n t\u1eed g\u1ed1c c\u1ee7a t\u00e0i li\u1ec7u.\u00a0Trong HTML, n\u00f3 s\u1ebd l\u00e0 <html>.\u00a0V\u00ec: root l\u00e0 chung, n\u00f3 cho ph\u00e9p m\u1ed9t nh\u00e0 thi\u1ebft k\u1ebf ch\u1ecdn ph\u1ea7n t\u1eed g\u1ed1c c\u1ee7a t\u00e0i li\u1ec7u XML m\u00e0 kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i bi\u1ebft t\u00ean c\u1ee7a n\u00f3.\u00a0\u0110\u1ec3 cho ph\u00e9p thanh cu\u1ed9n khi c\u1ea7n, quy t\u1eafc n\u00e0y ho\u1ea1t \u0111\u1ed9ng nh\u01b0 sau: : root {tr\u00e0n: auto;}<\/p>\n
![\"css3](\"https:\/\/www.hostify.vn\/blog\/wp-content\/uploads\/2022\/04\/css3-la-gi-1.webp\")
CSS3 c\u00f3 nhi\u1ec1u ch\u1ee9c n\u00e2ng c\u1ea3i thi\u1ec7n so v\u1edbi CSS<\/p><\/div>\n
\u0110\u1ec3 b\u1ed5 sung cho :\u00a0:first-child \u0111\u1ea7u ti\u00ean,\u00a0:last-child \u0111\u00e3 \u0111\u01b0\u1ee3c th\u00eam v\u00e0o.\u00a0V\u1edbi n\u00f3, ng\u01b0\u1eddi ta c\u00f3 th\u1ec3 ch\u1ecdn ph\u1ea7n t\u1eed cu\u1ed1i c\u00f9ng \u0111\u01b0\u1ee3c \u0111\u1eb7t t\u00ean c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed cha.\u00a0\u0110\u1ed1i v\u1edbi trang web c\u00f3 c\u00e1c b\u00e0i vi\u1ebft ch\u1ee9a trong th\u1ebb <div class = \u2018article\u2019> <\/ div>, trong \u0111\u00f3 m\u1ed7i trang c\u00f3 m\u1ed9t \u0111o\u1ea1n cu\u1ed1i v\u1edbi m\u1ed9t s\u1ed1 th\u00f4ng tin c\u1ea7n \u0111\u01b0\u1ee3c c\u00e1ch \u0111i\u1ec7u th\u1ed1ng nh\u1ea5t, quy t\u1eafc n\u00e0y s\u1ebd thay \u0111\u1ed5i ph\u00f4ng ch\u1eef cho \u0111o\u1ea1n cu\u1ed1i c\u1ee7a m\u1ed7i b\u00e0i vi\u1ebft.<\/p>\n
div.article> p: last-child {font-style: italic;}<\/p>\n
B\u1ed9 ch\u1ecdn\u00a0:target\u00a0 s\u1eed d\u1ee5ng khi c\u1ea7n t\u0103ng s\u1ef1 ch\u00fa \u00fd cho c\u00e1c ti\u00eau \u0111\u1ec1 trong b\u00e0i vi\u1ebft. Khi ng\u01b0\u1eddi d\u00f9ng click v\u00e0o m\u1ed9t link tr\u00ean c\u00f9ng trang ngo\u00e0i vi\u1ec7c di chuy\u1ec3n \u0111\u1ebfn tab \u0111\u00f3, link s\u1ebd c\u00f2n \u0111\u01b0\u1ee3c th\u00eam c\u00e1c \u0111\u1ecbnh d\u1ea1ng \u0111\u1ec3 l\u00e0m n\u1ed5i b\u1eadt.span.notice: target {font-size: 2em; ki\u1ec3u ch\u1eef: \u0111\u1eadm;}<\/p>\n
span.notice:target{font-size: 2em; font-style: bold;}<\/p>\n
<a href=’#section2′>Section 2<\/a><\/em><\/p>\n<p id=’section2′><\/p><\/em><\/p>\nM\u1ed9t k\u00fd hi\u1ec7u ch\u1ee9c n\u0103ng \u0111\u1ec3 ch\u1ecdn c\u00e1c y\u1ebfu t\u1ed1 \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh kh\u00f4ng \u0111\u1ea1t y\u00eau c\u1ea7u \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea1o.\u00a0B\u1ed9 ch\u1ecdn\u00a0Pseudo-Classes \u0111\u1ecbnh ph\u1ee7 \u0111\u1ecbnh ,\u00a0\u00a0: not\u00a0th\u1ec3 \u0111\u01b0\u1ee3c gh\u00e9p v\u1edbi h\u1ea7u h\u1ebft c\u00e1c b\u1ed9 ch\u1ecdn kh\u00e1c \u0111\u00e3 \u0111\u01b0\u1ee3c tri\u1ec3n khai.<\/p>\n
V\u00ed d\u1ee5: \u0111\u1ec3 \u0111\u1eb7t \u0111\u01b0\u1eddng vi\u1ec1n xung quanh h\u00ecnh \u1ea3nh kh\u00f4ng c\u00f3 \u0111\u01b0\u1eddng vi\u1ec1n \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh, h\u00e3y s\u1eed d\u1ee5ng quy t\u1eafc nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n
img: not ([vi\u1ec1n]) {vi\u1ec1n: 1;}<\/em><\/p>\nHSL v\u00e0 HSLA<\/h3>\n
HSL l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a m\u00e0u s\u1eafc, \u0111\u1ed9 b\u00e3o h\u00f2a v\u00e0 \u0111\u1ed9 s\u00e1ng.\u00a0Kh\u00f4ng gi\u1ed1ng nh\u01b0 RGB, n\u01a1i b\u1ea1n c\u1ea7n thao t\u00e1c \u0111\u1ed9 b\u00e3o h\u00f2a ho\u1eb7c \u0111\u1ed9 s\u00e1ng c\u1ee7a m\u00e0u b\u1eb1ng c\u00e1ch thay \u0111\u1ed5i c\u1ea3 ba gi\u00e1 tr\u1ecb m\u00e0u, v\u1edbi HSL, b\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh \u0111\u1ed9 b\u00e3o h\u00f2a ho\u1eb7c \u0111\u1ed9 s\u00e1ng trong khi v\u1eabn gi\u1eef nguy\u00ean m\u00e0u s\u1eafc c\u01a1 b\u1ea3n.\u00a0C\u00fa ph\u00e1p cho HSL bao g\u1ed3m m\u1ed9t gi\u00e1 tr\u1ecb s\u1ed1 nguy\u00ean cho m\u00e0u s\u1eafc v\u00e0 gi\u00e1 tr\u1ecb ph\u1ea7n tr\u0103m cho \u0111\u1ed9 b\u00e3o h\u00f2a v\u00e0 \u0111\u1ed9 s\u00e1ng.<\/p>\n
Khai b\u00e1o hsl () ch\u1ea5p nh\u1eadn ba gi\u00e1 tr\u1ecb:<\/em><\/strong><\/p>\n\n- M\u00e0u s\u1eafc theo \u0111\u1ed9 t\u1eeb 0 \u0111\u1ebfn 359. M\u1ed9t s\u1ed1 v\u00ed d\u1ee5 l\u00e0: 0 = \u0111\u1ecf, 60 = v\u00e0ng, 120 = xanh l\u00e1 c\u00e2y, 180 = l\u1ee5c lam, 240 = xanh lam v\u00e0 300 = \u0111\u1ecf t\u01b0\u01a1i.<\/li>\n
- \u0110\u1ed9 b\u00e3o h\u00f2a d\u01b0\u1edbi d\u1ea1ng ph\u1ea7n tr\u0103m v\u1edbi 100% l\u00e0 ch\u1ec9 ti\u00eau.\u00a0\u0110\u1ed9 b\u00e3o h\u00f2a 100% s\u1ebd l\u00e0 m\u00e0u s\u1eafc \u0111\u1ea7y \u0111\u1ee7 v\u00e0 \u0111\u1ed9 b\u00e3o h\u00f2a 0 s\u1ebd cung c\u1ea5p cho b\u1ea1n m\u1ed9t m\u00e0u x\u00e1m \u2013 v\u1ec1 c\u01a1 b\u1ea3n l\u00e0m cho gi\u00e1 tr\u1ecb m\u00e0u s\u1eafc b\u1ecb b\u1ecf qua.<\/li>\n
- M\u1ed9t t\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m cho s\u1ef1 nh\u1eb9 nh\u00e0ng v\u1edbi 50% l\u00e0 ti\u00eau chu\u1ea9n.\u00a0\u0110\u1ed9 s\u00e1ng 100% s\u1ebd l\u00e0 m\u00e0u tr\u1eafng, 50% s\u1ebd l\u00e0 m\u00e0u s\u1eafc th\u1ef1c t\u1ebf v\u00e0 0% s\u1ebd l\u00e0 m\u00e0u \u0111en.<\/li>\n<\/ul>\n
Ch\u1eef a trong hsla () \u1edf \u0111\u00e2y c\u0169ng ho\u1ea1t \u0111\u1ed9ng gi\u1ed1ng nh\u01b0 trong rgba ()<\/p>\n
Opacity<\/h3>\n
Ngo\u00e0i vi\u1ec7c ch\u1ec9 \u0111\u1ecbnh \u0111\u1ed9 trong su\u1ed1t v\u1edbi c\u00e1c m\u00e0u HSLA v\u00e0 RGBA, CSS3 cung c\u1ea5p cho ch\u00fang ta thu\u1ed9c t\u00ednh \u0111\u1ed9 m\u1edd, \u0111\u1ed9 m\u1edd \u0111\u1eb7t \u0111\u1ed9 m\u1edd \u0111\u1ee5c c\u1ee7a ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c khai b\u00e1o, t\u01b0\u01a1ng t\u1ef1 nh\u01b0 alpha.<\/p>\n
M\u1eb7c d\u00f9 vi\u1ec7c s\u1eed d\u1ee5ng c\u1ea3 hai k\u00fd hi\u1ec7u alpha v\u00e0 opacity c\u00f3 v\u1ebb gi\u1ed1ng nhau, nh\u01b0ng c\u00f3 m\u1ed9t s\u1ef1 kh\u00e1c bi\u1ec7t trong ch\u1ee9c n\u0103ng.<\/p>\n
G\u00f3c l\u00e0m tr\u00f2n: B\u00e1n k\u00ednh \u0111\u01b0\u1eddng vi\u1ec1n<\/h4>\n
Thu\u1ed9c t\u00ednh b\u00e1n k\u00ednh \u0111\u01b0\u1eddng vi\u1ec1n cho ph\u00e9p b\u1ea1n t\u1ea1o c\u00e1c g\u00f3c tr\u00f2n m\u00e0 kh\u00f4ng c\u1ea7n h\u00ecnh \u1ea3nh ho\u1eb7c \u0111\u00e1nh d\u1ea5u b\u1ed5 sung.\u00a0\u0110\u1ec3 th\u00eam c\u00e1c g\u00f3c tr\u00f2n v\u00e0o h\u1ed9p c\u1ee7a ch\u00fang t\u00f4i, ch\u1ec9 c\u1ea7n th\u00eam:<\/p>\n
border-radius: 25px;<\/em><\/p>\nDrop Shadows \u2013 Hi\u1ec7u \u1ee9ng b\u00f3ng \u0111\u1ed5<\/h4>\n
M\u1ed9t hi\u1ec7u \u1ee9ng kh\u00e1c c\u0169ng \u0111\u01b0\u1ee3c b\u1ed5 sung trong\u00a0CSS3\u00a0gi\u00fap ng\u01b0\u1eddi l\u1eadp tr\u00ecnh kh\u00f4ng ph\u1ea3i t\u1ea1o ra c\u00e1c h\u00ecnh \u1ea3nh \u0111\u00f3 l\u00e0 hi\u1ec7u \u1ee9ng \u0111\u1ed5 b\u00f3ng. B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh\u00a0box-shadow.<\/p>\n
X\u00e1c \u0111\u1ecbnh m\u00e0u, \u0111\u1ed9 cao, \u0111\u1ed9 r\u1ed9ng, blur v\u00e0 offset c\u1ee7a m\u1ed9t ho\u1eb7c nhi\u1ec1u \u0111\u1ed5 b\u00f3ng b\u00ean trong v\u00e0\/ho\u1eb7c b\u00ean ngo\u00e0i cho c\u00e1c ph\u1ea7n t\u1eed. V\u00ed d\u1ee5:<\/p>\n
box-shadow: 2px 5px 0 0 rgba(72,72,72,1);<\/em><\/p>\nB\u00f3ng v\u0103n b\u1ea3n<\/h4>\n
Text-Shadow<\/em> th\u00eam b\u00f3ng cho c\u00e1c k\u00fd t\u1ef1 ri\u00eang l\u1ebb trong c\u00e1c n\u00fat v\u0103n b\u1ea3n.\u00a0Tr\u01b0\u1edbc CSS3, \u0111i\u1ec1u n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng m\u1ed9t h\u00ecnh \u1ea3nh ho\u1eb7c sao ch\u00e9p m\u1ed9t th\u00e0nh ph\u1ea7n v\u0103n b\u1ea3n v\u00e0 sau \u0111\u00f3 \u0111\u1ecbnh v\u1ecb n\u00f3.<\/p>\ntext-Shadow: topPackset leftPackset m\u00e0u BlurRadius;<\/em><\/p>\nLinear Gradients \u2013 \u0110\u1ed9 d\u1ed1c tuy\u1ebfn t\u00ednh<\/h4>\n
C\u00fa ph\u00e1p:\u00a0background: linear-gradient(direction, color-stop1, color-stop2, \u2026);\u00a0 B\u1eb1ng c\u00e1ch n\u00e0y c\u00e1c l\u1eadp tr\u00ecnh vi\u00ean c\u00f3 th\u1ec3 t\u1ea1o ra m\u1ed9t\u00a0linear gradient\u00a0trong\u00a0CSS3\u00a0m\u1ed9t c\u00e1ch nhanh ch\u00f3ng.<\/p>\n
V\u00ed d\u1ee5:<\/p>\n
#grad { background: linear-gradient(to right, red , yellow); }<\/em><\/p>\nC\u00f3 th\u1ec3 x\u00e1c \u0111\u1ecbnh h\u01b0\u1edbng c\u1ee7a gradient tr\u00ean b\u1eb1ng \u0111\u01a1n v\u1ecb \u0111\u1ed9, b\u1eb1ng c\u00e1ch thay \u201cto right\u201d th\u00e0nh s\u1ed1 c\u1ee5 th\u1ec3 cho \u0111\u1ed9.<\/p>\n
Radial Gradients \u2013 \u0110\u1ed9 d\u1ed1c xuy\u00ean t\u00e2m<\/h4>\n
\u0110\u1ed9 d\u1ed1c xuy\u00ean t\u00e2m l\u00e0 \u0111\u1ed9 d\u1ed1c h\u00ecnh tr\u00f2n ho\u1eb7c h\u00ecnh elip.\u00a0Thay v\u00ec ti\u1ebfp t\u1ee5c \u0111i d\u1ecdc theo m\u1ed9t tr\u1ee5c th\u1eb3ng, m\u00e0u s\u1eafc h\u00f2a tr\u1ed9n t\u1eeb \u0111i\u1ec3m b\u1eaft \u0111\u1ea7u theo m\u1ecdi h\u01b0\u1edbng.<\/p>\n
C\u00fa ph\u00e1p : background: radial-gradient(shape size at position, start-color, …, last-color);<\/p>\n
Nhi\u1ec1u h\u00ecnh n\u1ec1n<\/h4>\n
Trong CSS3 n\u00f3 cung c\u1ea5p kh\u1ea3 n\u0103ng th\u00eam nhi\u1ec1u h\u01a1n m\u1ed9t h\u00ecnh n\u1ec1n.<\/p>\n
background-image:<\/p>\n
url(firstImage.jpg),<\/p>\n
url(secondImage.gif),<\/p>\n
url(thirdImage.png);<\/p>\n
C\u00e1c \u01b0u \u0111i\u1ec3m n\u1ed5i b\u1eadt c\u1ee7a CSS3<\/a><\/h2>\n![\"css3](\"https:\/\/www.hostify.vn\/blog\/wp-content\/uploads\/2022\/04\/css3-la-gi-2.webp\")
CSS3 l\u00e0 c\u1eb7p \u0111\u00f4i \u0103n \u00fd v\u1edbi HTML<\/p><\/div>\n
CSS3 \u0111\u01b0\u1ee3c c\u1ea3i thi\u1ec7n nhi\u1ec1u t\u00ednh n\u0103ng so v\u1edbi CSS<\/p><\/div>\n
M\u1ed9t s\u1ed1 t\u00ednh n\u0103ng m\u1edbi c\u1ee7a CSS3 so v\u1edbi CSS<\/h2>\nB\u1ed9 ch\u1ecdn<\/h3>\n
B\u1ed9 ch\u1ecdn l\u00e0 trung t\u00e2m c\u1ee7a CSS.\u00a0Ban \u0111\u1ea7u, CSS cho ph\u00e9p k\u1ebft h\u1ee3p c\u00e1c ph\u1ea7n t\u1eed theo lo\u1ea1i, l\u1edbp ho\u1eb7c ID.\u00a0CSS2.1 \u0111\u00e3 th\u00eam c\u00e1c ph\u1ea7n t\u1eed gi\u1ea3, l\u1edbp gi\u1ea3 v\u00e0 t\u1ed5 h\u1ee3p.\u00a0V\u1edbi CSS3, b\u1ea1n c\u00f3 th\u1ec3 nh\u1eafm m\u1ee5c ti\u00eau h\u1ea7u h\u1ebft m\u1ecdi y\u1ebfu t\u1ed1 tr\u00ean trang v\u1edbi m\u1ed9t lo\u1ea1t c\u00e1c b\u1ed9 ch\u1ecdn.<\/p>\n
Trong khi CSS2 \u0111\u00e3 gi\u1edbi thi\u1ec7u m\u1ed9t s\u1ed1\u00a0b\u1ed9 ch\u1ecdn thu\u1ed9c t\u00ednh, ch\u00fang cho ph\u00e9p k\u1ebft h\u1ee3p c\u00e1c y\u1ebfu t\u1ed1 d\u1ef1a tr\u00ean c\u00e1c thu\u1ed9c t\u00ednh c\u00f3 s\u1eb5n v\u00e0 CSS3 m\u1edf r\u1ed9ng d\u1ef1a tr\u00ean c\u00e1c b\u1ed9 ch\u1ecdn thu\u1ed9c t\u00ednh \u0111\u00f3. Th\u00eam 3 b\u1ed9 ch\u1ecdn thu\u1ed9c t\u00ednh \u0111\u00e3 \u0111\u01b0\u1ee3c th\u00eam v\u00e0o trong CSS3,\u00a0cho ph\u00e9p l\u1ef1a ch\u1ecdn chu\u1ed7i con.<\/p>\n
- \n
- [attribute^=value]\u00a0Ch\u1ecdn t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n v\u1edbi thu\u1ed9c t\u00ednh c\u00f3 gi\u00e1 tr\u1ecb b\u1eaft \u0111\u1ea7u b\u1eb1ng \u201cvalue\u201d.
\nV\u00ed d\u1ee5:\u00a0p[class^=test]\u00a0 Ch\u1ecdn t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n <p> v\u1edbi thu\u1ed9c t\u00ednh\u00a0class\u00a0c\u00f3 gi\u00e1 tr\u1ecb b\u1eaft \u0111\u1ea7u l\u00e0\u00a0test<\/li>\n - [attribute$=value]\u00a0 Ch\u1ecdn t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n v\u1edbi thu\u1ed9c t\u00ednh c\u00f3 gi\u00e1 tr\u1ecb k\u1ebft th\u00fac b\u1eb1ng \u201cvalue\u201d.
\nV\u00ed d\u1ee5:\u00a0p[class$=test]\u00a0 Ch\u1ecdn t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n <p> v\u1edbi thu\u1ed9c t\u00ednh\u00a0class\u00a0c\u00f3 gi\u00e1 tr\u1ecb k\u1ebft th\u00fac l\u00e0\u00a0test<\/li>\n - [attribute*=value]\u00a0 Ch\u1ecdn t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n v\u1edbi thu\u1ed9c t\u00ednh c\u00f3 gi\u00e1 tr\u1ecb \u0111\u1eb7c bi\u1ec7t b\u1eb1ng \u201cvalue\u201d.
\nV\u00ed d\u1ee5:\u00a0p[class*=test]\u00a0 Ch\u1ecdn t\u1ea5t c\u1ea3 th\u00e0nh ph\u1ea7n <p> v\u1edbi thu\u1ed9c t\u00ednh\u00a0class\u00a0c\u00f3 gi\u00e1 tr\u1ecb \u0111\u1eb7c bi\u1ec7t b\u1eb1ng\u00a0test\u00a0(t\u1ee9c l\u00e0 l\u00fac n\u00e0y ch\u1eef\u00a0test\u00a0n\u1eb1m \u1edf \u0111\u1ea7u, cu\u1ed1i hay gi\u1eefa \u0111\u1ec1u \u0111\u01b0\u1ee3c ch\u1ecdn).<\/li>\n<\/ul>\nM\u00e0u trong CSS3<\/h3>\n
CSS3 mang \u0111\u1ebfn s\u1ef1 h\u1ed7 tr\u1ee3 cho m\u1ed9t s\u1ed1 c\u00e1ch m\u00f4 t\u1ea3 m\u00e0u s\u1eafc m\u1edbi.\u00a0Tr\u01b0\u1edbc CSS3, ch\u00fang ta h\u1ea7u nh\u01b0 lu\u00f4n khai b\u00e1o m\u00e0u b\u1eb1ng \u0111\u1ecbnh d\u1ea1ng th\u1eadp l\u1ee5c ph\u00e2n (#FFF ho\u1eb7c #FFFFFF cho m\u00e0u tr\u1eafng).\u00a0C\u0169ng c\u00f3 th\u1ec3 khai b\u00e1o m\u00e0u b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng k\u00fd hi\u1ec7u rgb (), cung c\u1ea5p s\u1ed1 nguy\u00ean (0 tr\u1eeb255) ho\u1eb7c t\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m.<\/p>\n
Danh s\u00e1ch t\u1eeb kh\u00f3a m\u00e0u \u0111\u00e3 \u0111\u01b0\u1ee3c m\u1edf r\u1ed9ng trong\u00a0m\u00f4-\u0111un m\u00e0u CSS3 \u0111\u1ec3 bao g\u1ed3m 147 m\u00e0u t\u1eeb kh\u00f3a b\u1ed5 sung, CSS3 c\u0169ng cung c\u1ea5p m\u1ed9t s\u1ed1 t\u00f9y ch\u1ecdn kh\u00e1c:\u00a0HSL\u00a0,\u00a0HSLA\u00a0v\u00e0\u00a0RGBA\u00a0.\u00a0S\u1ef1 thay \u0111\u1ed5i \u0111\u00e1ng ch\u00fa \u00fd nh\u1ea5t v\u1edbi c\u00e1c lo\u1ea1i m\u00e0u m\u1edbi n\u00e0y l\u00e0\u00a0kh\u1ea3 n\u0103ng khai b\u00e1o c\u00e1c m\u00e0u b\u00e1n trong su\u1ed1t.<\/p>\n
RGBA<\/h3>\n
RGBA ho\u1ea1t \u0111\u1ed9ng gi\u1ed1ng nh\u01b0 RGB, ch\u1ec9 th\u00eam v\u00e0o m\u1ed9t gi\u00e1 tr\u1ecb l\u00e0 alpha, m\u1ee9c \u0111\u1ed9 m\u1edd \u0111\u1ee5c ho\u1eb7c m\u1ee9c \u0111\u1ed9 trong su\u1ed1t alpha.\u00a0Ba gi\u00e1 tr\u1ecb \u0111\u1ea7u ti\u00ean v\u1eabn \u0111\u1ea1i di\u1ec7n cho m\u00e0u \u0111\u1ecf, xanh l\u00e1 c\u00e2y v\u00e0 xanh d\u01b0\u01a1ng.<\/p>\n
\u0110\u1ed1i v\u1edbi gi\u00e1 tr\u1ecb alpha, 1 c\u00f3 ngh\u0129a l\u00e0 ho\u00e0n to\u00e0n m\u1edd \u0111\u1ee5c, 0 ho\u00e0n to\u00e0n trong su\u1ed1t v\u00e0 0,5 l\u00e0 50% m\u1edd \u0111\u1ee5c.\u00a0B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng b\u1ea5t k\u1ef3 s\u1ed1 n\u00e0o trong kho\u1ea3ng t\u1eeb 0 \u0111\u1ebfn 1.<\/p>\n
Pseudo-Classes<\/h3>\n
M\u1ed9t s\u1ed1 Pseudo-Classes quen thu\u1ed9c t\u01b0\u01a1ng t\u00e1c ng\u01b0\u1eddi d\u00f9ng, c\u1ee5 th\u1ec3 l\u00e0: link ,\u00a0:visited , : hover , : active v\u00e0\u00a0\u00a0:focus.<\/p>\n
M\u1ed9t v\u00e0i b\u1ed9 ch\u1ecdn\u00a0Pseudo-Classes kh\u00e1c \u0111\u00e3 \u0111\u01b0\u1ee3c th\u00eam v\u00e0o CSS3.\u00a0M\u1ed9t l\u00e0\u00a0\u00a0:\u00a0root, cho ph\u00e9p c\u00e1c nh\u00e0 thi\u1ebft k\u1ebf tr\u1ecf \u0111\u1ebfn ph\u1ea7n t\u1eed g\u1ed1c c\u1ee7a t\u00e0i li\u1ec7u.\u00a0Trong HTML, n\u00f3 s\u1ebd l\u00e0 <html>.\u00a0V\u00ec: root l\u00e0 chung, n\u00f3 cho ph\u00e9p m\u1ed9t nh\u00e0 thi\u1ebft k\u1ebf ch\u1ecdn ph\u1ea7n t\u1eed g\u1ed1c c\u1ee7a t\u00e0i li\u1ec7u XML m\u00e0 kh\u00f4ng nh\u1ea5t thi\u1ebft ph\u1ea3i bi\u1ebft t\u00ean c\u1ee7a n\u00f3.\u00a0\u0110\u1ec3 cho ph\u00e9p thanh cu\u1ed9n khi c\u1ea7n, quy t\u1eafc n\u00e0y ho\u1ea1t \u0111\u1ed9ng nh\u01b0 sau: : root {tr\u00e0n: auto;}<\/p>\n
CSS3 c\u00f3 nhi\u1ec1u ch\u1ee9c n\u00e2ng c\u1ea3i thi\u1ec7n so v\u1edbi CSS<\/p><\/div>\n
\u0110\u1ec3 b\u1ed5 sung cho :\u00a0:first-child \u0111\u1ea7u ti\u00ean,\u00a0:last-child \u0111\u00e3 \u0111\u01b0\u1ee3c th\u00eam v\u00e0o.\u00a0V\u1edbi n\u00f3, ng\u01b0\u1eddi ta c\u00f3 th\u1ec3 ch\u1ecdn ph\u1ea7n t\u1eed cu\u1ed1i c\u00f9ng \u0111\u01b0\u1ee3c \u0111\u1eb7t t\u00ean c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed cha.\u00a0\u0110\u1ed1i v\u1edbi trang web c\u00f3 c\u00e1c b\u00e0i vi\u1ebft ch\u1ee9a trong th\u1ebb <div class = \u2018article\u2019> <\/ div>, trong \u0111\u00f3 m\u1ed7i trang c\u00f3 m\u1ed9t \u0111o\u1ea1n cu\u1ed1i v\u1edbi m\u1ed9t s\u1ed1 th\u00f4ng tin c\u1ea7n \u0111\u01b0\u1ee3c c\u00e1ch \u0111i\u1ec7u th\u1ed1ng nh\u1ea5t, quy t\u1eafc n\u00e0y s\u1ebd thay \u0111\u1ed5i ph\u00f4ng ch\u1eef cho \u0111o\u1ea1n cu\u1ed1i c\u1ee7a m\u1ed7i b\u00e0i vi\u1ebft.<\/p>\n
div.article> p: last-child {font-style: italic;}<\/p>\n
B\u1ed9 ch\u1ecdn\u00a0:target\u00a0 s\u1eed d\u1ee5ng khi c\u1ea7n t\u0103ng s\u1ef1 ch\u00fa \u00fd cho c\u00e1c ti\u00eau \u0111\u1ec1 trong b\u00e0i vi\u1ebft. Khi ng\u01b0\u1eddi d\u00f9ng click v\u00e0o m\u1ed9t link tr\u00ean c\u00f9ng trang ngo\u00e0i vi\u1ec7c di chuy\u1ec3n \u0111\u1ebfn tab \u0111\u00f3, link s\u1ebd c\u00f2n \u0111\u01b0\u1ee3c th\u00eam c\u00e1c \u0111\u1ecbnh d\u1ea1ng \u0111\u1ec3 l\u00e0m n\u1ed5i b\u1eadt.span.notice: target {font-size: 2em; ki\u1ec3u ch\u1eef: \u0111\u1eadm;}<\/p>\n
span.notice:target{font-size: 2em; font-style: bold;}<\/p>\n
<a href=’#section2′>Section 2<\/a><\/em><\/p>\n
<p id=’section2′><\/p><\/em><\/p>\n
M\u1ed9t k\u00fd hi\u1ec7u ch\u1ee9c n\u0103ng \u0111\u1ec3 ch\u1ecdn c\u00e1c y\u1ebfu t\u1ed1 \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh kh\u00f4ng \u0111\u1ea1t y\u00eau c\u1ea7u \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ea1o.\u00a0B\u1ed9 ch\u1ecdn\u00a0Pseudo-Classes \u0111\u1ecbnh ph\u1ee7 \u0111\u1ecbnh ,\u00a0\u00a0: not\u00a0th\u1ec3 \u0111\u01b0\u1ee3c gh\u00e9p v\u1edbi h\u1ea7u h\u1ebft c\u00e1c b\u1ed9 ch\u1ecdn kh\u00e1c \u0111\u00e3 \u0111\u01b0\u1ee3c tri\u1ec3n khai.<\/p>\n
V\u00ed d\u1ee5: \u0111\u1ec3 \u0111\u1eb7t \u0111\u01b0\u1eddng vi\u1ec1n xung quanh h\u00ecnh \u1ea3nh kh\u00f4ng c\u00f3 \u0111\u01b0\u1eddng vi\u1ec1n \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh, h\u00e3y s\u1eed d\u1ee5ng quy t\u1eafc nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n
img: not ([vi\u1ec1n]) {vi\u1ec1n: 1;}<\/em><\/p>\n
HSL v\u00e0 HSLA<\/h3>\n
HSL l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a m\u00e0u s\u1eafc, \u0111\u1ed9 b\u00e3o h\u00f2a v\u00e0 \u0111\u1ed9 s\u00e1ng.\u00a0Kh\u00f4ng gi\u1ed1ng nh\u01b0 RGB, n\u01a1i b\u1ea1n c\u1ea7n thao t\u00e1c \u0111\u1ed9 b\u00e3o h\u00f2a ho\u1eb7c \u0111\u1ed9 s\u00e1ng c\u1ee7a m\u00e0u b\u1eb1ng c\u00e1ch thay \u0111\u1ed5i c\u1ea3 ba gi\u00e1 tr\u1ecb m\u00e0u, v\u1edbi HSL, b\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh \u0111\u1ed9 b\u00e3o h\u00f2a ho\u1eb7c \u0111\u1ed9 s\u00e1ng trong khi v\u1eabn gi\u1eef nguy\u00ean m\u00e0u s\u1eafc c\u01a1 b\u1ea3n.\u00a0C\u00fa ph\u00e1p cho HSL bao g\u1ed3m m\u1ed9t gi\u00e1 tr\u1ecb s\u1ed1 nguy\u00ean cho m\u00e0u s\u1eafc v\u00e0 gi\u00e1 tr\u1ecb ph\u1ea7n tr\u0103m cho \u0111\u1ed9 b\u00e3o h\u00f2a v\u00e0 \u0111\u1ed9 s\u00e1ng.<\/p>\n
Khai b\u00e1o hsl () ch\u1ea5p nh\u1eadn ba gi\u00e1 tr\u1ecb:<\/em><\/strong><\/p>\n
- \n
- M\u00e0u s\u1eafc theo \u0111\u1ed9 t\u1eeb 0 \u0111\u1ebfn 359. M\u1ed9t s\u1ed1 v\u00ed d\u1ee5 l\u00e0: 0 = \u0111\u1ecf, 60 = v\u00e0ng, 120 = xanh l\u00e1 c\u00e2y, 180 = l\u1ee5c lam, 240 = xanh lam v\u00e0 300 = \u0111\u1ecf t\u01b0\u01a1i.<\/li>\n
- \u0110\u1ed9 b\u00e3o h\u00f2a d\u01b0\u1edbi d\u1ea1ng ph\u1ea7n tr\u0103m v\u1edbi 100% l\u00e0 ch\u1ec9 ti\u00eau.\u00a0\u0110\u1ed9 b\u00e3o h\u00f2a 100% s\u1ebd l\u00e0 m\u00e0u s\u1eafc \u0111\u1ea7y \u0111\u1ee7 v\u00e0 \u0111\u1ed9 b\u00e3o h\u00f2a 0 s\u1ebd cung c\u1ea5p cho b\u1ea1n m\u1ed9t m\u00e0u x\u00e1m \u2013 v\u1ec1 c\u01a1 b\u1ea3n l\u00e0m cho gi\u00e1 tr\u1ecb m\u00e0u s\u1eafc b\u1ecb b\u1ecf qua.<\/li>\n
- M\u1ed9t t\u1ef7 l\u1ec7 ph\u1ea7n tr\u0103m cho s\u1ef1 nh\u1eb9 nh\u00e0ng v\u1edbi 50% l\u00e0 ti\u00eau chu\u1ea9n.\u00a0\u0110\u1ed9 s\u00e1ng 100% s\u1ebd l\u00e0 m\u00e0u tr\u1eafng, 50% s\u1ebd l\u00e0 m\u00e0u s\u1eafc th\u1ef1c t\u1ebf v\u00e0 0% s\u1ebd l\u00e0 m\u00e0u \u0111en.<\/li>\n<\/ul>\n
Ch\u1eef a trong hsla () \u1edf \u0111\u00e2y c\u0169ng ho\u1ea1t \u0111\u1ed9ng gi\u1ed1ng nh\u01b0 trong rgba ()<\/p>\n
Opacity<\/h3>\n
Ngo\u00e0i vi\u1ec7c ch\u1ec9 \u0111\u1ecbnh \u0111\u1ed9 trong su\u1ed1t v\u1edbi c\u00e1c m\u00e0u HSLA v\u00e0 RGBA, CSS3 cung c\u1ea5p cho ch\u00fang ta thu\u1ed9c t\u00ednh \u0111\u1ed9 m\u1edd, \u0111\u1ed9 m\u1edd \u0111\u1eb7t \u0111\u1ed9 m\u1edd \u0111\u1ee5c c\u1ee7a ph\u1ea7n t\u1eed \u0111\u01b0\u1ee3c khai b\u00e1o, t\u01b0\u01a1ng t\u1ef1 nh\u01b0 alpha.<\/p>\n
M\u1eb7c d\u00f9 vi\u1ec7c s\u1eed d\u1ee5ng c\u1ea3 hai k\u00fd hi\u1ec7u alpha v\u00e0 opacity c\u00f3 v\u1ebb gi\u1ed1ng nhau, nh\u01b0ng c\u00f3 m\u1ed9t s\u1ef1 kh\u00e1c bi\u1ec7t trong ch\u1ee9c n\u0103ng.<\/p>\n
G\u00f3c l\u00e0m tr\u00f2n: B\u00e1n k\u00ednh \u0111\u01b0\u1eddng vi\u1ec1n<\/h4>\n
Thu\u1ed9c t\u00ednh b\u00e1n k\u00ednh \u0111\u01b0\u1eddng vi\u1ec1n cho ph\u00e9p b\u1ea1n t\u1ea1o c\u00e1c g\u00f3c tr\u00f2n m\u00e0 kh\u00f4ng c\u1ea7n h\u00ecnh \u1ea3nh ho\u1eb7c \u0111\u00e1nh d\u1ea5u b\u1ed5 sung.\u00a0\u0110\u1ec3 th\u00eam c\u00e1c g\u00f3c tr\u00f2n v\u00e0o h\u1ed9p c\u1ee7a ch\u00fang t\u00f4i, ch\u1ec9 c\u1ea7n th\u00eam:<\/p>\n
border-radius: 25px;<\/em><\/p>\n
Drop Shadows \u2013 Hi\u1ec7u \u1ee9ng b\u00f3ng \u0111\u1ed5<\/h4>\n
M\u1ed9t hi\u1ec7u \u1ee9ng kh\u00e1c c\u0169ng \u0111\u01b0\u1ee3c b\u1ed5 sung trong\u00a0CSS3\u00a0gi\u00fap ng\u01b0\u1eddi l\u1eadp tr\u00ecnh kh\u00f4ng ph\u1ea3i t\u1ea1o ra c\u00e1c h\u00ecnh \u1ea3nh \u0111\u00f3 l\u00e0 hi\u1ec7u \u1ee9ng \u0111\u1ed5 b\u00f3ng. B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh\u00a0box-shadow.<\/p>\n
X\u00e1c \u0111\u1ecbnh m\u00e0u, \u0111\u1ed9 cao, \u0111\u1ed9 r\u1ed9ng, blur v\u00e0 offset c\u1ee7a m\u1ed9t ho\u1eb7c nhi\u1ec1u \u0111\u1ed5 b\u00f3ng b\u00ean trong v\u00e0\/ho\u1eb7c b\u00ean ngo\u00e0i cho c\u00e1c ph\u1ea7n t\u1eed. V\u00ed d\u1ee5:<\/p>\n
box-shadow: 2px 5px 0 0 rgba(72,72,72,1);<\/em><\/p>\n
B\u00f3ng v\u0103n b\u1ea3n<\/h4>\n
Text-Shadow<\/em> th\u00eam b\u00f3ng cho c\u00e1c k\u00fd t\u1ef1 ri\u00eang l\u1ebb trong c\u00e1c n\u00fat v\u0103n b\u1ea3n.\u00a0Tr\u01b0\u1edbc CSS3, \u0111i\u1ec1u n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng m\u1ed9t h\u00ecnh \u1ea3nh ho\u1eb7c sao ch\u00e9p m\u1ed9t th\u00e0nh ph\u1ea7n v\u0103n b\u1ea3n v\u00e0 sau \u0111\u00f3 \u0111\u1ecbnh v\u1ecb n\u00f3.<\/p>\n
text-Shadow: topPackset leftPackset m\u00e0u BlurRadius;<\/em><\/p>\n
Linear Gradients \u2013 \u0110\u1ed9 d\u1ed1c tuy\u1ebfn t\u00ednh<\/h4>\n
C\u00fa ph\u00e1p:\u00a0background: linear-gradient(direction, color-stop1, color-stop2, \u2026);\u00a0 B\u1eb1ng c\u00e1ch n\u00e0y c\u00e1c l\u1eadp tr\u00ecnh vi\u00ean c\u00f3 th\u1ec3 t\u1ea1o ra m\u1ed9t\u00a0linear gradient\u00a0trong\u00a0CSS3\u00a0m\u1ed9t c\u00e1ch nhanh ch\u00f3ng.<\/p>\n
V\u00ed d\u1ee5:<\/p>\n
#grad { background: linear-gradient(to right, red , yellow); }<\/em><\/p>\n
C\u00f3 th\u1ec3 x\u00e1c \u0111\u1ecbnh h\u01b0\u1edbng c\u1ee7a gradient tr\u00ean b\u1eb1ng \u0111\u01a1n v\u1ecb \u0111\u1ed9, b\u1eb1ng c\u00e1ch thay \u201cto right\u201d th\u00e0nh s\u1ed1 c\u1ee5 th\u1ec3 cho \u0111\u1ed9.<\/p>\n
Radial Gradients \u2013 \u0110\u1ed9 d\u1ed1c xuy\u00ean t\u00e2m<\/h4>\n
\u0110\u1ed9 d\u1ed1c xuy\u00ean t\u00e2m l\u00e0 \u0111\u1ed9 d\u1ed1c h\u00ecnh tr\u00f2n ho\u1eb7c h\u00ecnh elip.\u00a0Thay v\u00ec ti\u1ebfp t\u1ee5c \u0111i d\u1ecdc theo m\u1ed9t tr\u1ee5c th\u1eb3ng, m\u00e0u s\u1eafc h\u00f2a tr\u1ed9n t\u1eeb \u0111i\u1ec3m b\u1eaft \u0111\u1ea7u theo m\u1ecdi h\u01b0\u1edbng.<\/p>\n
C\u00fa ph\u00e1p : background: radial-gradient(shape size at position, start-color, …, last-color);<\/p>\n
Nhi\u1ec1u h\u00ecnh n\u1ec1n<\/h4>\n
Trong CSS3 n\u00f3 cung c\u1ea5p kh\u1ea3 n\u0103ng th\u00eam nhi\u1ec1u h\u01a1n m\u1ed9t h\u00ecnh n\u1ec1n.<\/p>\n
background-image:<\/p>\n
url(firstImage.jpg),<\/p>\n
url(secondImage.gif),<\/p>\n
url(thirdImage.png);<\/p>\n
C\u00e1c \u01b0u \u0111i\u1ec3m n\u1ed5i b\u1eadt c\u1ee7a CSS3<\/a><\/h2>\n
CSS3 l\u00e0 c\u1eb7p \u0111\u00f4i \u0103n \u00fd v\u1edbi HTML<\/p><\/div>\n