Tỷ lệ CSS3() khiến các div trở thành pixelated

Question

Tôi đã nhận thấy rằng khi hoạt ảnh CSS3 scale(), có vẻ như pixelate mọi phần tử được sử dụng.

Ví dụ: http://jsfiddle.net/PD7Vh/2/

Trong ví dụ trên, scale() pixelates div trung tâm khi bạn di chuột qua nó.

Cài đặt css của tôi có sai không, hoặc đây có phải là những gì scale() tự nhiên không?

Dưới đây là một ảnh chụp màn hình từ Chrome trên Windows 7:

Answer 1

Giải pháp là để bắt đầu vòng tròn trung tâm của bạn lớn như nó cần phải được, sau đó quy mô nó xuống như điểm tham chiếu bắt đầu.

Sau đó, trên sự kiện di chuột, bạn mở rộng tới 1, điều này sẽ giữ nguyên vòng tròn trung tâm chưa được lấy pixel.

tham khảo: jsFiddle

Lưu ý các thiết lập khác như định vị được thực hiện do để bù đắp cho những thay đổi này. Cập nhật

---

Tình trạng:
Xem xét thay vì sử dụng border-radius để làm cho vòng tròn, sử dụng ASCII Character của vòng tròn hoặc phác thảo vòng tròn:

• ○ ☺ ☻ ☼

Tham chiếu:jsFiddle (Vị trí ghi chú không được hiệu chỉnh.)

Các nhân vật trên cơ bản là TEXT, do đó sử dụng BẤT CỨ CSS2 hoặc CCS3 văn bản hoặc tài sản phông chữ!

nhân vật Như nhất định trở thành thực sự lớn họ Pixelate nên sử dụng "quy mô ngược" phương pháp cho các ký tự đã trả lời như trước đây nhưng lưu ý, ít nhất là trong Firefox, quá trình chuyển đổi trở nên đắt khi phông chữ siêu lớn là đã sử dụng. Hoạt động tốt nhất với phông chữ trung bình đến lớn.

Mẹo:ASCII này dựa phương pháp có thể cần các width and height properties cho việc định vị được thực hiện một cách chính xác, vì vậy sử dụng rằng nếu vị trí dường như bị phá vỡ.