Round() trong CSS: Tạo Góc Bo Tròn Hoàn Hảo Cho Website

Are you ready to master the round() function in CSS and create beautifully rounded corners for your website? We'll explore its power in this article.

Bạn muốn tạo ra những góc bo tròn mềm mại và thu hút cho trang web của mình? Hàm round() trong CSS sẽ giúp bạn thực hiện điều đó một cách dễ dàng. Nếu bạn chưa biết [CSS là gì?], hãy tìm hiểu ngay để nắm vững kiến thức nền tảng.

Giới Thiệu Hàm round() trong CSS

Hàm round() trong CSS là một hàm toán học cho phép bạn làm tròn một giá trị số đến số nguyên gần nhất. Nó có thể được sử dụng kết hợp với các thuộc tính CSS khác để tạo ra các hiệu ứng và thiết kế độc đáo. Chức năng này cung cấp khả năng kiểm soát chính xác hơn đối với các giá trị được sử dụng trong CSS.

Cú Pháp Cơ Bản của round()

Cú pháp của hàm round() khá đơn giản:

round(rounding-strategy, number)

• rounding-strategy : Chiến lược làm tròn (ví dụ: nearest , up , down ).
• number : Số cần làm tròn.

Các Loại Chiến Lược Làm Tròn

Hàm round() hỗ trợ nhiều chiến lược làm tròn khác nhau, cho phép bạn kiểm soát cách số được làm tròn.

1. round(nearest, number)

Đây là chiến lược làm tròn mặc định. Nó làm tròn số đến số nguyên gần nhất. Nếu số có phần thập phân là 0.5 hoặc lớn hơn, nó sẽ được làm tròn lên. Ngược lại, nó sẽ được làm tròn xuống.

round(nearest, 3.4) /* Kết quả: 3 */ round(nearest, 3.5) /* Kết quả: 4 */ round(nearest, -3.4) /* Kết quả: -3 */ round(nearest, -3.5) /* Kết quả: -4 */

2. round(up, number)

Chiến lược này luôn làm tròn số lên số nguyên lớn hơn gần nhất (tiến về phía dương vô cùng).

round(up, 3.1) /* Kết quả: 4 */ round(up, 3.9) /* Kết quả: 4 */ round(up, -3.1) /* Kết quả: -3 */ round(up, -3.9) /* Kết quả: -3 */

3. round(down, number)

Chiến lược này luôn làm tròn số xuống số nguyên nhỏ hơn gần nhất (tiến về phía âm vô cùng).

round(down, 3.1) /* Kết quả: 3 */ round(down, 3.9) /* Kết quả: 3 */ round(down, -3.1) /* Kết quả: -4 */ round(down, -3.9) /* Kết quả: -4 */

4. round(to-zero, number)

Chiến lược này làm tròn số về 0. Điều này có nghĩa là nó làm tròn lên nếu số dương và làm tròn xuống nếu số âm.

round(to-zero, 3.1) /* Kết quả: 3 */ round(to-zero, 3.9) /* Kết quả: 3 */ round(to-zero, -3.1) /* Kết quả: -3 */ round(to-zero, -3.9) /* Kết quả: -3 */

5. round(from-zero, number)

Chiến lược này làm tròn số ra khỏi 0. Điều này có nghĩa là nó làm tròn lên nếu số dương và làm tròn xuống nếu số âm, nhưng theo hướng ngược lại với to-zero.

round(from-zero, 3.1) /* Kết quả: 4 */ round(from-zero, 3.9) /* Kết quả: 4 */ round(from-zero, -3.1) /* Kết quả: -4 */ round(from-zero, -3.9) /* Kết quả: -4 */

Ứng Dụng Thực Tế của round() trong CSS

Hàm round() có thể được sử dụng trong nhiều tình huống khác nhau để kiểm soát giao diện của các phần tử trên trang web của bạn.

1. Tạo Góc Bo Tròn Linh Hoạt

Bạn có thể sử dụng round() để tính toán giá trị border-radius dựa trên kích thước của phần tử.

.element { width: 100px; height: 50px; border-radius: round(nearest, calc(50px / 2)); /* Kết quả: 25px */ }

Trong ví dụ này, bán kính bo tròn được tính bằng một nửa chiều cao của phần tử, đảm bảo rằng các góc bo tròn trông đồng đều, đặc biệt quan trọng trong CSS .

2. Kiểm Soát Kích Thước Phần Tử

Bạn có thể sử dụng round() để đảm bảo kích thước của một phần tử là một số nguyên pixel, tránh các vấn đề hiển thị nhỏ trên một số trình duyệt.

.element { width: round(nearest, 100.5px); /* Kết quả: 101px */ height: round(nearest, 50.2px); /* Kết quả: 50px */ }

3. Tạo Các Hiệu Ứng Động

Kết hợp round() với CSS animations hoặc transitions để tạo ra các hiệu ứng động mượt mà và có kiểm soát.

.element { width: 50px; height: 50px; border-radius: 0; transition: border-radius 0.5s ease-in-out; } .element:hover { border-radius: round(nearest, 25px); }

Lợi Ích của Việc Sử Dụng round()

Sử dụng hàm round() mang lại nhiều lợi ích:

• Kiểm soát chính xác: Cho phép bạn kiểm soát cách các giá trị được làm tròn.
• Khả năng linh hoạt: Hỗ trợ nhiều chiến lược làm tròn khác nhau.
• Cải thiện hiển thị: Giúp tránh các vấn đề hiển thị nhỏ liên quan đến kích thước pixel không nguyên.