Sử dụng CSS3 bạn sẽ thấy bo tròn ảnh rất dễ dàng, không cần phải dùng Photoshop nữa, chỉ với 3 dòng code bức ảnh đã được bo và chạy tốt trên tất cả các trình duyệt phổ biến, cụ thể thì với IE9+, Firefox 4+, Chrome, Safari 5+ và Opera là OK.
Code mẫu như sau, giả sử bạn có bức ảnh với mã như thế này trong HTML:
<img src="images/con-meo.jpg">
Muốn bo tròn tuyệt đối, bạn sẽ CSS ảnh đó như này:
img {
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}
Các tiền tố -moz và -webkit là để tương thích với các trình duyệt khác nhau. Chú ý là ảnh của bạn phải là hình vuông nhé.
Nếu muốn bo tròn góc nhỏ hơn bạn có thể để 5%, 10%, 20%…Hoặc bất kỳ giá trị nào mà bạn cảm thấy vừa mắt, bức hình dưới đây có border-radius
là 15%:
Sau khi bo xong ảnh, bỗng dưng tôi muốn bo luôn chữ, ý tưởng vẫn thế, sẽ cho chữ ở chính giữa đường tròn, sau khi mày mò một lúc thì đây là kết quả:
Tôi Sẽ Bo Tròn Tuyệt Đối Đoạn Văn Bản Này, Bạn Xem Như Này Đã Ưng Mắt Chưa
Đoạn code mẫu đây:
<div style="background: #dddddd; border-radius: 50%; border: 2px solid #a1a1a1; height: 300px; margin: 20px; padding: 10px; text-align: center; width: 300px;">
<h2 style="font-size: 22px; margin-top: 33%;">Tôi Sẽ Bo Tròn Tuyệt Đối Đoạn Văn Bản Này, Bạn Xem Như Này Đã Ưng Mắt Chưa</h2>
</div>
Tôi đặt đoạn văn bản trong thẻ h2 và cho vào thẻ div. Ở thẻ div, tôi quy định cụ thể chiều cao và chiều rộng bằng lệnh height: 300px; width: 300px;
Vì mục đích của chúng ta là làm hình tròn cho nên tôi để chiều cao bằng chiều rộng.
2 thuộc tính background: #dddddd; border: 2px solid #a1a1a1;
sẽ làm div có màu xám và đường viền 2px nét liền. Để padding: 10px
làm chữ không bị chạm vào cạnh của div
Để chữ căn chính giữa theo chiều ngang ta quy định text-align: center;
Cuối cùng là cho div thành hình tròn bằng thuộc tính border-radius: 50%;
Để chữ ra giữa theo chiều dọc, ta điều chỉnh lề cho thẻ h2 bằng cách để lề trên margin-top: 33%;
Giá trị này còn tùy thuộc vào kích cỡ của chữ, nhưng sẽ không bao giờ lớn hơn 50%.
Xem thêm: cách làm mờ ảnh với thuộc tính opacity.
Comments are closed.