2012-02-15 39 views
13

Tôi đang cố gắng hiểu sự khác biệt giữa -webkit-text-fill-color và chỉ đơn giản là color? Có sự khác biệt về chức năng nào không? Cho đến nay tôi có thể nói, chúng giống hệt nhau .. Có điều gì bạn có thể làm với một nhưng không phải cái kia?Sự khác biệt giữa "-webkit-text-fill-color" và "color"?

Trả lời

19

Từ WebKit blog:

text-fill-color - Thuộc tính này cho phép bạn chỉ định một màu fill cho văn bản. Nếu không được đặt, thì thuộc tính color sẽ được sử dụng để thực hiện việc điền.

Vì vậy, có, chúng giống nhau, nhưng -webkit-text-fill-color sẽ được ưu tiên hơn color nếu hai giá trị khác nhau.

Tôi nghĩ rằng lý do cho việc này là bạn có thể chọn một màu khác nhau nếu bạn muốn khi sử dụng -webkit-text-stroke, nhưng nó sẽ duyên dáng rơi trở lại color nếu -webkit-text-stroke không có sẵn (và do đó -webkit-text-fill-color không phải là một trong hai). Có thể có trường hợp bạn sẽ kết thúc bằng văn bản không đọc được.

+2

Để thêm vào câu trả lời của bạn: '-webkit-text-fill-color' cho phép nhắm mục tiêu chỉ các trình duyệt dựa trên Webkit, trong khi' màu' có thể được sử dụng để nhắm mục tiêu phần còn lại. – fayerth

+1

True, '-webkit-text-fill-color' dành riêng cho Webkit. Hơn nữa, thuộc tính màu mở rộng đến viền. Nếu bạn gán đường viền cho một phần tử có thuộc tính 'color' và không chỉ định màu đường viền, đường viền sẽ mặc định là thuộc tính' color'. – dangerChihuahua007

+1

Tất nhiên nó là đặc trưng cho webkit, đó không thực sự là những gì đã được hỏi - vì cuối cùng 'text-fill-color' có thể được thêm vào bởi tất cả các trình duyệt khác. Tôi đã cố gắng để có được lý do về những gì bạn sẽ sử dụng nó cho, hoặc làm thế nào nó sẽ có lợi cho ai đó khi nó làm điều tương tự như một tài sản khác. Lý do của Andrew có vẻ hợp lý. –

19

-webkit-text-fill-color có thể được đặt thành transparent cho phép bạn thực hiện một số điều thực sự thú vị trên văn bản, như đặt độ dốc ngang. Hãy xem ví dụ văn bản cầu vồng này: http://jsfiddle.net/DoubleYo/qGfzm/

+0

Thật tuyệt vời. –

+2

Điều này vẫn hoạt động khi bạn thay đổi '-webkit-text-fill-color' thành 'color'. –

+2

+1 cho ví dụ. "Nó có nghĩa là gì?" :) –

Các vấn đề liên quan