CSS - Góc Bo Tròn: Hướng Dẫn Cho Người Mới Bắt Đầu

Xin chào các bạn đang học thiết kế web! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của góc bo tròn trong CSS. Là người bạn hàng xóm thân thiện của bạn trong lĩnh vực máy tính, tôi sẽ hướng dẫn bạn từng bước trong hành trình này. Vậy, hãy chuẩn bị đồ uống yêu thích của bạn, ngồi thoải mái, và cùng làm cho các góc sắc nhọn trở nên mượt mà!

CSS - Rounded Corner

Góc Bo Tròn Là Gì?

Trước khi chúng ta nhảy vào mã, hãy nói về góc bo tròn là gì. Hãy tưởng tượng bạn có một mảnh giấy vuông. Bây giờ, nếu bạn cắt bỏ các góc bằng kéo, bạn sẽ có được các góc bo tròn. Đó chính xác là điều chúng ta sẽ làm với các yếu tố web của mình, nhưng trên không gian số!

Thuộc Tính Thần Kỳ: border-radius

Trong CSS, chúng ta sử dụng thuộc tính border-radius để tạo góc bo tròn. Nó giống như cặp kéo số của chúng ta! Hãy cùng xem chúng ta có thể sử dụng nó như thế nào.

Cú Pháp Cơ Bản

.rounded-box {
border-radius: 10px;
}

Dòng mã đơn giản này sẽ bo tròn tất cả bốn góc của yếu tố của chúng ta bằng 10 pixel. Thật tuyệt vời phải không?

Các Giá Trị Khác Nhau

Bây giờ, hãy khám phá các cách khác nhau để chúng ta có thể sử dụng border-radius. Nó giống như có nhiều loại kéo khác nhau trong hộp công cụ của chúng ta!

Loại Giá Trị	Ví Dụ	Mô Tả
Độ Dài	`20px`	Chỉ định bán kính bằng pixel
Phần Trăm	`10%`	Bán kính tương đối so với kích thước của yếu tố
Ban Đầu	`initial`	Đặt về giá trị mặc định
Kế Thừa	`inherit`	Kế thừa từ yếu tố cha

Giá Trị Độ Dài

.slightly-rounded {
border-radius: 5px;
}

.very-rounded {
border-radius: 20px;
}

Trong các ví dụ này, chúng ta đang sử dụng các giá trị pixel. Con số càng lớn, góc bo tròn của chúng ta càng trở nên mượt mà!

Giá Trị Phần Trăm

.responsive-rounded {
border-radius: 10%;
}

Sử dụng phần trăm rất tốt cho thiết kế responsive. Độ bo tròn sẽ điều chỉnh dựa trên kích thước của yếu tố!

Áp Dụng Cho

Không phải thứ gì cũng có thể có góc bo tròn (dù rằng sẽ rất thú vị nếu có!). Dưới đây là những gì chúng ta có thể bo tròn:

Yếu tố cấp khối
Yếu tố inline-block
Yếu tố bảng
Một số yếu tố thay thế (như hình ảnh)

Cú Pháp DOM

Đối với những ai tò mò về việc điều chỉnh góc bo tròn bằng JavaScript, đây là cách bạn làm:

object.style.borderRadius = "10px";

Điều này đặt border-radius thành 10 pixel bằng JavaScript. Nó giống như sử dụng một cặp kéo programmable!

CSS Border Radius - Giá Trị Độ Dài

Hãy đi sâu hơn một chút. Chúng ta thực sự có thể chỉ định các bán kính khác nhau cho mỗi góc!

.fancy-box {
border-radius: 10px 20px 30px 40px;
}

Điều này đặt góc trên bên trái là 10px, góc trên bên phải là 20px, góc dưới bên phải là 30px, và góc dưới bên trái là 40px. Nó giống như có bốn cặp kéo khác nhau!

CSS Rounded Corner Images

Bạn có biết rằng chúng ta có thể bo tròn các góc của hình ảnh không? Nó giống như đang cắt tóc thời trang cho ảnh của bạn!

.rounded-image {
border-radius: 50%;
}

Điều này sẽ biến hình ảnh vuông của bạn thành một hình tròn hoàn hảo. Rất tuyệt cho ảnh hồ sơ!

CSS border-radius - Các Thuộc Tính Liên Quan

Border-radius có một số bạn bè trong thế giới CSS. Hãy gặp họ:

Thuộc Tính	Mô Tả
border-top-left-radius	Bo tròn góc trên bên trái
border-top-right-radius	Bo tròn góc trên bên phải
border-bottom-right-radius	Bo tròn góc dưới bên phải
border-bottom-left-radius	Bo tròn góc dưới bên trái

Các thuộc tính này cho phép bạn nhắm đến các góc cụ thể. Nó giống như có kéo chính xác!

.partially-rounded {
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}

Điều này sẽ bo tròn chỉ các góc trên bên trái và dưới bên phải. Hoàn hảo để tạo ra những hình dạng độc đáo!

Ví Dụ Thực Tế: Tạo Bong Bong Nói

Hãy áp dụng kiến thức mới của chúng ta để tạo một bong bong nói đơn giản:

.speech-bubble {
background-color: #f0f0f0;
border-radius: 20px;
padding: 20px;
position: relative;
}

.speech-bubble::after {
content: '';
position: absolute;
bottom: -20px;
left: 20px;
border-width: 20px 0 0 20px;
border-style: solid;
border-color: #f0f0f0 transparent;
}

Ở đây, chúng ta sử dụng border-radius để bo tròn bong bong chính, và sau đó tạo một hình tam giác nhỏ với伪元素 ::after để làm cho nó trông như một bong bong nói. Nó giống như nghệ thuật gấp giấy số!

Kết Luận

Và thế là chúng ta đã bo tròn qua các основы CSS rounded corners. Nhớ rằng, thiết kế web là về sự thử nghiệm. Đừng ngại chơi với các thuộc tính này và xem bạn có thể tạo ra những thiết kế thú vị nào!

Lần sau khi bạn lướt web, hãy để ý các góc bo tròn mà bạn thấy. Bây giờ bạn đã biết bí mật đằng sau chúng! Hãy tiếp tục thực hành, và sớm bạn sẽ trở thành大师 của các góc mượt mà trong thế giới số.

Chúc các bạn viết mã vui vẻ, và mong rằng tất cả các góc của bạn sẽ mượt mà như bạn muốn!

Credits: Image by storyset