Các thuộc tính CSS liên quan đến trang trí mô hình hộp

Articles

Bài viết này giải thích các thuộc tính CSS liên quan đến trang trí mô hình hộp.

Bạn có thể học cách viết các thuộc tính như đường viền và bóng đổ.

YouTube Video

HTML để Xem trước

css-decoration.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

Trang trí

Thuộc tính `border`

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

Thuộc tính border được sử dụng trong CSS để thiết lập khung cho một phần tử. border bao gồm ba thành phần: độ rộng, kiểu dáng và màu sắc, chúng được kết hợp để tạo khung cho một phần tử.

Cấu trúc cơ bản của `border`

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

Sử dụng border-width để chỉ định độ dày của đường viền. Đơn vị được chỉ định bằng px, em, %, v.v.
Chỉ định kiểu đường viền bằng border-style. Bạn có thể chỉ định các giá trị sau.
- Các giá trị kiểu dáng:
  - none (không có đường viền)
  - solid (đường liền mạch)
  - dotted (Đường chấm chấm)
  - dashed (Đường gạch đứt)
  - double (Đường đôi)
  - groove (đường rãnh)
  - ridge (đường gờ)
  - inset (đường bóng chìm)
  - outset (đường bóng nổi)

Chỉ định màu sắc của đường viền bằng border-color. Màu sắc có thể được chỉ định bằng tên màu, rgb(), rgba(), hex, v.v.

Cài đặt riêng cho từng bên

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

Bạn cũng có thể đặt các kiểu khác nhau cho từng bên như thế này.

Cài đặt riêng cho độ rộng, kiểu dáng và màu sắc

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

Bạn cũng có thể chỉ định từng khía cạnh riêng biệt bằng cách sử dụng border-width, border-style và border-color.

Kết hợp với `border-radius`

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

Sử dụng thuộc tính border-radius, bạn có thể làm tròn các góc của đường viền.

Thuộc tính `border-radius`

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

Thuộc tính border-radius được sử dụng để làm tròn các góc của một phần tử. Bạn có thể uốn cong mượt mà bốn góc của phần tử HTML, biến hình chữ nhật hoặc hình vuông thành thiết kế bo tròn.

Giải thích:

Lớp border-radius-all-rounded làm tròn tất cả các góc với 20 pixel, tạo thành một hộp bo tròn mượt mà.
Lớp border-radius-top-left-rounded chỉ làm tròn góc trên bên trái với 20 pixel, giữ nguyên các góc khác vuông vắn.
Lớp border-radius-ellipse-corners tạo ra các góc hình elip, dẫn đến một hộp có dạng bo tròn kéo dài theo chiều ngang.

Định dạng của thuộc tính `border-radius`

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;

Giá trị của thuộc tính border-radius thường được xác định bằng pixel hoặc phần trăm. Ngoài ra, bạn có thể đặt từ 1 đến 4 giá trị.
- Chỉ định một giá trị sẽ làm tất cả các góc trở nên tròn đều.
- Chỉ định hai giá trị sẽ áp dụng giá trị đầu tiên cho các góc trên bên trái và dưới bên phải, giá trị thứ hai cho các góc trên bên phải và dưới bên trái.
- Bằng cách chỉ định bốn giá trị, bạn có thể đặt bán kính khác nhau cho từng góc. Các giá trị được áp dụng theo chiều kim đồng hồ từ góc trên bên trái.
Bạn cũng có thể chỉ định riêng như border-top-left-radius.

1border-radius: 50px / 25px;

Thuộc tính border-radius cũng có thể chỉ định riêng bán kính dọc và ngang để làm cho các góc có hình elip. Trong trường hợp này, hãy tách các giá trị bằng dấu /.
- Ví dụ, chỉ định 50px / 25px sẽ làm cho bán kính ngang là 50 pixel và bán kính dọc là 25 pixel.

Tóm tắt

border-radius là một thuộc tính để làm tròn các góc của một phần tử.
Bạn có thể chỉ định độ bo tròn của các góc bằng pixel hoặc phần trăm, áp dụng cho tất cả các góc, cho các góc cụ thể hoặc làm cho chúng thành hình bầu dục.
Điều này hữu ích cho các thiết kế linh hoạt và tùy chỉnh giao diện người dùng.

Thuộc tính `outline`

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

Thuộc tính outline là một thuộc tính CSS để thiết lập đường viền vẽ quanh một phần tử.

outline tương tự như border, nhưng khác ở những điểm sau:.

outline không ảnh hưởng đến mô hình hộp của phần tử, vì vậy nó không tác động đến bố cục của phần tử.
Vì outline được vẽ bên ngoài phần tử, nên nó xuất hiện bên ngoài border.
border được vẽ bên trong phần tử, vì vậy nó có thể ảnh hưởng đến kích thước và bố cục của phần tử.

Trong ví dụ này, thuộc tính outline được thiết lập như sau:.

Lớp outline-solid đặt đường viền màu đỏ đặc dày 2px.
Lớp outline-dashed đặt đường viền màu xanh da trời dạng nét đứt 3px.
Lớp outline-double đặt đường viền kép màu xanh lá cây dày 4px.
Lớp outline-offset đặt khoảng cách 10px giữa đường viền và phần tử.

Cú pháp Cơ bản

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}

`outline-width`

outline-width chỉ định độ dày của đường viền.
Bạn có thể chỉ định các giá trị cụ thể như thin, medium, thick, hoặc bằng các đơn vị như px, em.

`outline-style`

outline-style chỉ định kiểu của đường viền.
Bạn có thể chỉ định các kiểu như solid, dotted, dashed, double, groove, ridge, inset, outset, none, v.v.

`outline-color`

outline-color chỉ định màu của đường viền.
Bạn có thể chỉ định bất kỳ màu nào bằng tên, HEX, RGB, v.v.

`outline-offset`

outline-offset chỉ định khoảng cách giữa đường viền và phần tử.
Bạn có thể chỉ định các giá trị chính xác bằng các đơn vị như px, em, v.v.

Thuộc tính `box-shadow`

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

Thuộc tính box-shadow được sử dụng để thêm bóng cho các phần tử. Bằng cách sử dụng thuộc tính này, bạn có thể tạo bóng xung quanh các phần tử để biểu hiện cảm giác chiều sâu và lập thể.

Giải thích:

Trong lớp box-shadow-basic-shadow, một bóng mờ màu đen được hiển thị ở góc dưới bên phải của phần tử.
Trong lớp box-shadow-inset-shadow, một bóng mờ được hiển thị bên trong phần tử. Với bóng chìm vào bên trong, bạn có thể tạo ra một thiết kế lõm.
Trong lớp box-shadow-multiple-shadow, hai bóng đổ màu đen và đỏ được áp dụng cho phần tử. Vì chúng được hiển thị ở các vị trí khác nhau, hiệu ứng ba chiều được tạo ra.

Định dạng của thuộc tính `box-shadow`

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];

Ý nghĩa của từng giá trị

horizontal offset đầu tiên là giá trị độ lệch ngang, xác định vị trí bóng từ phía bên trái của phần tử. Chỉ định một giá trị dương sẽ đặt bóng đổ sang bên phải, và giá trị âm sẽ đặt nó sang bên trái.

vertical offset thứ hai là giá trị độ lệch dọc, xác định vị trí bóng từ phía trên của phần tử. Chỉ định một giá trị dương sẽ đặt bóng đổ xuống dưới, và giá trị âm sẽ đặt nó lên trên.

blur radius thứ ba là giá trị độ mờ, xác định độ mờ nhòe của bóng đổ. Giá trị càng lớn thì bóng đổ càng lan rộng, dẫn đến bóng đổ càng mờ hơn. Chỉ định một giá trị dương sẽ đặt bóng đổ xuống dưới, và giá trị âm sẽ đặt nó lên trên. Thuộc tính này không bắt buộc và giá trị mặc định là 0, nghĩa là bóng không có độ mờ.

spread radius thứ tư là giá trị phạm vi lan tỏa, xác định mức độ bóng đổ lan rộng. Chỉ định một giá trị dương sẽ làm bóng đổ lớn hơn, trong khi giá trị âm sẽ làm nó thu nhỏ lại. Giá trị này cũng không bắt buộc.

color thứ năm là giá trị màu sắc, xác định màu sắc của bóng đổ. Màu sắc có thể được cài đặt bằng tên màu, RGB, HEX, HSL và các mô hình màu khác trong CSS. Nếu không được chỉ định, màu văn bản mặc định của phần tử (giá trị của thuộc tính color) sẽ được áp dụng.

Bạn cũng có thể chỉ định từ khóa inset trước tiên. Chỉ định từ khóa inset sẽ vẽ bóng đổ bên trong phần tử thay vì bên ngoài. Cũng có thể thiết lập nhiều bóng đổ được ngăn cách bằng dấu phẩy.

Ví dụ về `box-shadow`

Ví dụ bóng cơ bản

1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}

Độ lệch ngang là 10px, tạo ra bóng 10 pixel sang bên phải.
Độ lệch dọc là 10px, tạo ra bóng 10 pixel xuống phía dưới.
Bán kính làm mờ là 5px, tạo ra bóng mờ với 5 pixel.
Màu sắc là rgba(0, 0, 0, 0.5), tạo ra màu đen bán trong suốt.

Ví dụ bóng bên trong

1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}

Sử dụng inset để vẽ bóng bên trong phần tử.

Ví dụ bóng nhiều lớp

1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}

Bạn cũng có thể thiết lập nhiều bóng bằng cách ngăn cách bằng dấu phẩy. Trong ví dụ này, hai bóng được áp dụng: một bóng đen và một bóng đỏ.

Tóm tắt

box-shadow là thuộc tính được sử dụng để thêm bóng cho các phần tử để tạo cảm giác chiều sâu.
Bằng cách kết hợp độ lệch ngang, dọc, làm mờ, bán kính lan tỏa và màu sắc, bạn có thể đạt được nhiều hiệu ứng đa dạng.
Bạn có thể vẽ bóng bên trong với inset và cũng có thể thiết lập nhiều lớp bóng cùng lúc.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Thuộc tính CSS liên quan đến nền Các thuộc tính CSS liên quan đến danh sách

Các thuộc tính CSS liên quan đến trang trí mô hình hộp

YouTube Video

HTML để Xem trước

Trang trí

Thuộc tính border

Cấu trúc cơ bản của border

Cài đặt riêng cho từng bên

Cài đặt riêng cho độ rộng, kiểu dáng và màu sắc

Kết hợp với border-radius

Thuộc tính border-radius

Giải thích:

Định dạng của thuộc tính border-radius

Tóm tắt

Thuộc tính outline

Cú pháp Cơ bản

outline-width

outline-style

outline-color

outline-offset

Thuộc tính box-shadow

Giải thích:

Định dạng của thuộc tính box-shadow

Ý nghĩa của từng giá trị

Ví dụ về box-shadow

Ví dụ bóng cơ bản

Ví dụ bóng bên trong

Ví dụ bóng nhiều lớp

Tóm tắt

YouTube Video

Thuộc tính `border`

Cấu trúc cơ bản của `border`

Kết hợp với `border-radius`

Thuộc tính `border-radius`

Định dạng của thuộc tính `border-radius`

Thuộc tính `outline`

`outline-width`

`outline-style`

`outline-color`

`outline-offset`

Thuộc tính `box-shadow`

Định dạng của thuộc tính `box-shadow`

Ví dụ về `box-shadow`