text-stroke
là thuộc tính thử nghiệm cung cấp các tùy chọn trang trí văn bản tương tự như các tùy chọn có trong Adobe Illustrator hoặc các ứng dụng vẽ vector khác. Nó hiện không được bao gồm trong bất kỳ thông số kỹ thuật W3C hoặc WHATWG nào. Kể từ tháng 6 năm 2013, nó chỉ được triển khai sau -webkit
tiền tố của nhà cung cấp, mặc dù các phiên bản tương lai của Firefox và Internet Explorer có thể hỗ trợ thuộc tính này (có thể là theo tiền tố của riêng chúng).
mark ( -webkit-text-stroke: 2px red; )
Các text-stroke
bất động sản thực sự là viết tắt cho hai thuộc tính khác:
text-stroke-width
, lấy giá trị đơn vị (1px, 0,125em, 4in, etcetera) và mô tả độ dày của hiệu ứng nét vẽ.text-stroke-color
, nhận một giá trị màu (hex, rgb / rgba, hsl / hsla, etcetera).
text-stroke
cũng có thuộc tính đồng hành text-fill-color
, thuộc tính này sẽ ghi đè thuộc color
tính, cho phép dự phòng duyên dáng sang màu văn bản khác trong các trình duyệt không hỗ trợ text-stroke
.
Kiểm tra cây bút này!
Điểm quan tâm
- Nét vẽ bằng
text-stroke
được căn chỉnh với tâm của hình dạng văn bản (như mặc định trong Adobe Illustrator) và hiện không có tùy chọn để đặt căn chỉnh bên trong hoặc bên ngoài của hình dạng. Thật không may, điều này làm cho nó ít sử dụng hơn nhiều, vì không có vấn đề gì bây giờ đột quỵ cản trở hình dạng của chữ cái phá hủy ý định của nhà thiết kế kiểu ban đầu. Một thiết lập sẽ là lý tưởng, nhưng nếu chúng ta phải chọn một thiết lập, thì nét vẽ bên ngoài sẽ hữu ích hơn nhiều. - trong Webkit,
text-stroke
có thể tạo hoạt ảnh với CSS Transitions và Animations - nhưng chỉ màu nét, không phải chiều rộng nét. - Một giá đỡ tương thích với trình duyệt hơn (và được cho là mạnh mẽ) cho
text-stroke
hiệu ứng đang sử dụngtext-shadow
, được nêu trong bài viết CSS-Tricks này.
Hỗ trợ trình duyệt
Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
---|---|---|---|---|---|---|
-webkit- | -webkit- | 21 | 15+ | 10 | Phức tạp | -webkit- |
Lưu ý về hỗ trợ trình duyệt: Bảng trên là tóm tắt về hỗ trợ tổng thể của trình duyệt text-stroke
- sự thật là phức tạp hơn nhiều (ví dụ: Android đã hỗ trợ thuộc tính này trong các phiên bản 2.1-2.3, sau đó loại bỏ hỗ trợ trong 3.0, trước khi khôi phục hỗ trợ trong 4.0) . Để có bảng hỗ trợ trình duyệt đầy đủ, hãy truy cập caniuse.com/text-stroke.