Khóa học IT CSS Cơ bản 024_Viền, Đường viền ngoài, Bóng

Viền

Viền (Borders) trong CSS là các thuộc tính kiểu quan trọng được sử dụng để tạo ranh giới trực quan xung quanh các phần tử.

Thuộc tính viền

• border-width: Đặt độ rộng của viền.
• border-style: Đặt kiểu của viền (solid: đường liền, dotted: chấm, dashed: đường đứt, double: đường kép, groove: rãnh, ridge: nổi, inset: lõm, outset: lồi, none: không có viền).
• border-color: Đặt màu của viền.

Ví dụ:

1
    .example1 {
2
        border-width: 2px;
3
        border-style: solid;
4
        border-color: #333;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border: 2px solid #333;
10
        /* Thuộc tính viết tắt */
11
        width: 200px;
12
        height: 200px;
13
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Hiệu ứng:

Hướng viền

border-top, border-right, border-bottom, border-left: Đặt viền trên, phải, dưới, trái tương ứng.

Ví dụ:

1
    .example1 {
2
        border-top: 2px solid #333;
3
        border-right: 1px dashed #555;
4
        border-bottom: 3px solid #777;
5
        border-left: 1px dotted #999;
6
        width: 200px;
7
        height: 200px;
8
    }

1
    <div class="example1"></div>

Hiệu ứng:

Bo tròn góc

border-radius: Đặt bo tròn góc của viền.

Ví dụ:

1
    .example1 {
2
        border-radius: 10px;
3
        /* Tất cả các góc có bo tròn 10px */
4
        border: 1px solid black;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border-top-left-radius: 10px;
10
        border-top-right-radius: 20px;
11
        border-bottom-left-radius: 30px;
12
        border-bottom-right-radius: 40px;
13
        border: 1px solid black;
14
        width: 200px;
15
        height: 200px;
16
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Hiệu ứng:

Bóng

Box-shadow trong CSS là thuộc tính tạo hiệu ứng bóng xung quanh các phần tử. Bóng có thể được sử dụng để tăng cường vẻ ba chiều của các phần tử, làm cho trang trông sinh động hơn. Bằng cách thêm từ khóa inset trước giá trị box-shadow, bạn có thể tạo bóng bên trong. Nhiều giá trị box-shadow có thể được phân cách bằng dấu phẩy để thêm nhiều hiệu ứng bóng. Nếu phần tử có bo tròn góc, bóng sẽ được áp dụng cho các góc bo tròn tương ứng.

Bóng có thể có nhiều tham số, bao gồm offset ngang, offset dọc, bán kính mờ, màu bóng, v.v.

• Offset ngang (horizontal offset): Offset ngang của bóng.
• Offset dọc (vertical offset): Offset dọc của bóng.
• Bán kính mờ (blur radius): Mức độ mờ của bóng.
• Bán kính lan tỏa (spread radius): Kích thước của bóng, giá trị dương mở rộng, giá trị âm thu nhỏ.
• Màu bóng: Màu của bóng.

Ví dụ:

1
    .base {
2
        border: 1px solid black;
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
8
    }
9
    .example2 {
10
        box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
11
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>

Hiệu ứng:

Đường viền ngoài

Outline trong CSS là đường viền có thể nhìn thấy có thể được thêm xung quanh các phần tử, thường được sử dụng để nhấn mạnh cạnh ngoài của các phần tử. Outline không ảnh hưởng đến bố cục và không thay đổi kích thước hoặc vị trí của các phần tử. Outline thường được sử dụng cho trực quan hóa focus của các phần tử form, trạng thái active của các liên kết, v.v.

• outline-color: Đặt màu của outline.
• outline-style: Đặt kiểu của outline.
• outline-width: Đặt độ rộng của outline.
• outline-offset: Đặt thuộc tính offset outline, khoảng cách giữa outline và viền.

Ví dụ:

1
    .example1 {
2
        outline-color: blue;
3
        outline-style: dotted;
4
        outline-width: 2px;
5
        outline-offset: 5px;
6
        border: 1px solid red;
7
        width: 200px;
8
        height: 200px;
9
    }
10
    .example2 {
11
        outline: 2px solid green;
12
        border: 1px solid red;
13
        width: 200px;
14
        height: 200px;
15
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Hiệu ứng: