CSS3 cung cấp khả năng để tạo nhiều hiệu ứng đồ họa tuyệt vời. Bài viết sau sẽ hướng dẫn bạn một cách rất đơn giản để vẽ hình tròn.
Hướng dẫn
-
1
Thuộc tính border-radius trong CSS3 cho phép tạo góc tròn, vì vậy nếu bạn tạo một hình vuông có kích thước là 100x100 và có border-radius là 100 thì hình vuông đó sẽ trở thành hình tròn.
-
2
Tạo file circle.html với nội dung sau:
<html> <head> <style type="text/css"> .circle { width: 100px; height: 100px; background: #C30; text-align: center; padding: 50px; color: #fff; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; } </style> </head> <body> <div class="circle">Circle</div> </body> </html>Thuộc tính border-radius với các tiền tố(prefix) khác nhau sẽ được dùng cho các trình duyệt khác nhau: Firefox (moz), Safari, Chrome (wekit), Konqueror (khtml). Riêng trình duyệt Opera dùng phiên bản không có tiền tố.
-
3
Chạy file circle.html để xem kết quả.
Chia sẻ
Bài liên quan
-
Bài viết giới thiệu 30 website với các mẫu menu đẹp mắt và sáng tạo. Các website này có thể cho bạn ý tưởng tốt để thiết kế website của riêng mình.
-
CSS3 cùng với HTML5 cung cấp cho bạn những tính năng tuyệt vời để xây dựng đồ họa cho trang web mà không cần dùng hình ảnh. Với CSS2, để tạo góc tròn cho các nút bấm bạn phải sử dụng hình ảnh...
-
Bài viết sẽ giới thiệu cho bạn 31 bài hướng dẫn Photoshop hay lấy cảm hứng từ các sản phẩm của Apple.
-
Không cần phải dùng đến hình ảnh, bạn vẫn có thể tạo được những thông báo đẹp mắt cho website với những tính năng của CSS.
-
Thiết kế giao diện trong Photoshop là phần không thể thiếu được trong quá trình thiết kế trang web. Cho dù là trang web nhỏ, đơn giản hay những trang phức tạp, đều yêu cầu bạn phải thiết kế trước...
