Tạo kiểu đường viền

Bài học 5 trên 6 trong khóa học Dự án CSS: vòng xoay tải đơn giản của Coddy.

Hãy thêm kiểu bo tròn cho viền của vòng xoay.

Để chỉ thêm màu viền vào một số cạnh cụ thể, hãy dùng thứ tự (trên, phải, dưới, trái).

border-color: black transparent black transparent

Cách trên chỉ thêm màu viền đen cho cạnh trên và cạnh dưới. Bạn cũng có thể dùng các thuộc tính border-top-color và border-bottom-color!

Đừng quên thêm border-width và border-style.

Thử thách

Dễ

Xóa màu nền của vòng xoay và thêm các thuộc tính CSS sau:

border-width có giá trị 6px
border-style có giá trị solid
border-color chỉ áp dụng cho phía trên và phía dưới, bạn có thể chọn màu tùy ý! (viền bên trái và bên phải nên có màu transparent)

Đồng thời bo tròn toàn bộ viền của vòng xoay. Nếu bạn chưa biết cách làm, hãy xem gợi ý.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="spinner" />
</body>
</html>

Tất cả bài học trong Dự án CSS: vòng xoay tải đơn giản

1Giới thiệu

2Dự án CSS

Tạo kiểu đường viền Bài học dự án

Tự luyện tập: Playground Web