stroke-opacity
åºçº¿
广æ³å¯ç¨
èª 2020å¹´3æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
stroke-opacity å±æ§æå®äºå½å对象çè½®å»çä¸éæ度ãå®çé»è®¤å¼æ¯ 1ã
ä½ä¸ºä¸ä¸ªå¤è§å±æ§ï¼å®å¯ä»¥ç´æ¥ç¨ä½ CSS æ ·å¼è¡¨å é¨çå±æ§ã
使ç¨è¯´æ
| ç±»å« | å¤è§å±æ§ |
|---|---|
| å¼ | <opacity-value> | inherit |
| å¯åæ§ | Yes |
- <opacity-value>
-
å¨å½å对象çè½®å»ä¸ç¨è¯¥æ¶è²æä½çä¸éæ度ãä»»ä½è¶ åº 0.0 å° 1.0 èå´çå¼é½ä¼è¢«ååè¿ä¸ªèå´ï¼0.0 表示å®å ¨éæï¼1.0 表示å®å ¨ä¸éæï¼ã
示ä¾
SVG
html
<svg width="120px" height="120px" viewBox="0 0 120 120">
<rect x="10" y="10" width="100" height="100" />
</svg>
CSS
css
rect {
fill: #b4da55;
stroke: #000;
stroke-width: 10px;
stroke-opacity: 0.3;
}
ç»æ
å ç´
ä¸åå
ç´ å¯ä»¥ä½¿ç¨stroke-opacityå±æ§ï¼
- å½¢ç¶å ç´ Â»
- ææ¬å 容å ç´ Â»
è§è
| è§è |
|---|
| Scalable Vector Graphics (SVG) 2 # StrokeOpacity |