Chiều rộng nét vẽ - Thủ thuật CSS

Các stroke-widthbất động sản trong CSS là để thiết lập chiều rộng của một biên giới về hình dạng SVG.

.module ( stroke-width: 2; )

Nhớ lại:

Điều này sẽ ghi đè một thuộc tính trình bày
Điều này sẽ không ghi đè một kiểu nội tuyến, ví dụ:

Giá trị

Các stroke-widthbất động sản có thể chấp nhận bất kỳ số lượng, bao gồm cả số, số thập phân, và tỷ lệ phần trăm:

stroke-width: 2px
stroke-width: 2em
stroke-width: 2
stroke-width: 2.5
stroke-width: 15%

Lưu ý rằng mã định danh đơn vị (tức là pxvà em) là không bắt buộc. Một số không có đơn vị là một giá trị dựa trên hệ tọa độ của SVG viewBox. Vì vậy, ví dụ, 5hiển thị giống như 5%trong một viewBoxđược đặt thành 0 0 100 100(5/100 = 0,05 hoặc 5%) nhưng 10%trong một đó là 0 0 50 50(5/50 = 0,1 hoặc 10%).

Xem thuộc tính Chiều rộng nét bút của CSS-Tricks (@ css-trick) trên CodePen.