Không cần PS vẫn bo tròn ảnh trong thiết kế website

Một vấn đề với thuộc tính border-radius là Firefox không hiển thị đúng khung tròn ở trên ảnh.

• Sử dụng font chữ đặc biệt bằng Cufón trong thiết kế website 
• Đánh giá bài viết với JRating

 Có một cách là sử dụng thẻ span bao quanh thẻ img và sử dụng thuộc tính background-image.

Mục tiêu

Mục tiêu là có thể tạo được ảnh như hình bên dưới

Vấn đề

Các trình duyệt đều không hỗ trợ việc hiển thị mềm và mượt như mục tiêu đưa ra. Webkit hiển thị khung tròn nhưng không hỗ trợ khối đổ bóng, còn firefox thì khung bo tròn không hiển thị.

Thủ thuật CSS

Bạn có thể xử lý vấn đề trên rất đơn giản: bo tròn 1 thẻ span bên ngoài thẻ image. Đặt ảnh là hình nền của span, sau đó ẩn ảnh đi (có thể dùng opacity : 0 hoặc display : none). Tác giả dùng

Sử dụng jQuery

Chúng ta sẽ sử dụng jQuery để tự động thêm thẻ span. Đoạn mã dưới sẽ tự động tìm tất cả các phần tử có class .rounded và thêm thẻ span ra bên ngoài. Sau đó sẽ thêm thuộc tính background, width, height và đặt opacity: 0 cho ảnh gốc.

1.$(document).ready(function(){

2.$(".rounded").load(function() {

3.$(this).wrap(function(){

4.return '<span class="' + $(this).attr('class') + '" style="background: url('/ + $(this').attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';

5.});

6.$(this).css("opacity","0");

7.});

8.});

Mã CSS3

01..rounded {

02.display: inline-block;

03.border: solid 1px #000;

04.overflow: hidden;

05.-webkit-border-radius: 10px;

06.-moz-border-radius: 10px;

07.border-radius: 10px;

08.-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

09.-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

10.box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

11.}