Mẫu bảng kiểm tra độ dốc CSS

Question

Tôi muốn tạo mẫu bàn cờ bằng gradient. Tôi đã tìm thấy một ví dụ và sửa đổi nó theo nhu cầu của tôi, tuy nhiên nó chỉ hoạt động với tiền tố -moz. Khi tôi xóa tiền tố -moz, mẫu này hoàn toàn khác.

Tôi làm cách nào để làm mẫu này làm việc vớikhông được sửa lỗi?

body { 
    background-image: 
    linear-gradient(45deg, #808080 25%, transparent 25%), 
    linear-gradient(-45deg, #808080 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #808080 75%), 
    linear-gradient(-45deg, transparent 75%, #808080 75%); 

    background-size:20px 20px;  
    background-position:0 0, 10px 0, 10px -10px, 0px 10px; 
} 

Answer 1

Chỉ cần sửa đổi background-position như trong đoạn mã bên dưới để nhận được yêu cầu đầu ra. Điều này hoạt động tốt trong Firefox, Chrome, Opera, IE11 và Edge.

body { 
 
    background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%); 
 
    background-size: 20px 20px; 
 
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px; 
 
}

Vấn đề dường như xảy ra do sự khác biệt trong cách các góc được xử lý bởi các -moz linear gradient và một trong những tiêu chuẩn. -45deg ở độ dốc tuyến tính -moz có vẻ bằng 135deg ở độ dốc tiêu chuẩn (nhưng việc thay đổi góc được tạo thành một dấu lạ ở giữa).

Ảnh chụp màn hình bên dưới thể hiện sự khác biệt (cả hai được chụp trong phiên bản Firefox v44.0 mới nhất).

Output với moz-linear gradient:

Output với linear gradient: