Hướng dẫn bo tròn ảnh css
Show Đã đăng vào thg 10 21, 2019 2:31 SA 3 phút đọc Giới thiệuGần đây, chúng tôi đã làm việc trong một dự án liên quan đến hình tròn, hình thu nhỏ tròn, nút tròn, container tròn,... Trong bài viết hôm nay mình sẽ chia sẻ cho các bạn các cách tạo hình tròn bằng CSS. Nếu các bạn đang gặp phải vấn đề về tạo hình tròn trong CSS thì đây sẽ là bài viết hữu ích dành cho bạn. Có một số kỹ thuật để xác định hình dạng tròn động trong HTML và CSS, mỗi cái có ưu và nhược điểm riêng. Dưới đây là một số cách tôi đã thử nghiệm nhiều nhất, từ phổ biến nhất đến ít dùng nhất. Border radiusKỹ thuật phổ biến nhất là làm tròn tất cả các góc bằng cách set Nếu bạn muốn tạo phần tử
pill (hình viên thuốc), chúng ta sẽ set thuộc tính
SVGCác SVG có thể bao gồm một phần tử
Clip PathĐường dẫn clip là một kỹ thuật mới hơn. Hỗ trợ là tốt nhưng ít nhất quán. Clip Path không ảnh hưởng đến bố cục yếu tố, có nghĩa là chúng sẽ không ảnh hưởng đến
Radial GradientChúng ta có thể sử dụng
Kết luậnQua bài viết này mình đã giúp các bạn tìm hiểu các cách tạo hình tròn bằng CSS. Mình hy vọng nó sẽ có ích cho bạn. Bài viết tham khảo: CSS Circles All rights reserved 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:
Muốn bo tròn tuyệt đối, bạn sẽ CSS ảnh đó như này:
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ó 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:
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 2 thuộc tính Để chữ căn chính giữa theo chiều ngang ta quy định Xem thêm: cách làm mờ ảnh với thuộc tính opacity. |