-webkit-text-stroke
åºçº¿
广æ³å¯ç¨
èª 2017å¹´4æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
CSS å±æ§ -webkit-text-stroke æå®äºææ¬å符çç¬è§¦å®½åº¦åç¬è§¦é¢è²ãæ¤å±æ§ä¸ºå
¨ç§°å±æ§ -webkit-text-stroke-width å -webkit-text-stroke-color çç®åå±æ§ã
css
/* 宽度åé¢è²å¼ */
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;
/* å
¨å±å¼ */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: revert;
-webkit-text-stroke: revert-layer;
-webkit-text-stroke: unset;
å±æ§ææ
æ¤å±æ§ä¸ºä¸å CSS å±æ§çç®åå±æ§ï¼
è¯æ³
åå¼
å½¢å¼å®ä¹
| åå§å¼ | 该ç®åæ对åºçæ¯ä¸ªå±æ§ï¼
|
|---|---|
| éç¨å ç´ | ææå ç´ |
| æ¯å¦æ¯ç»§æ¿å±æ§ | æ¯ |
| 计ç®å¼ | 该ç®åæ对åºçæ¯ä¸ªå±æ§ï¼
|
| å¨ç»ç±»å | 该ç®åæ对åºçæ¯ä¸ªå±æ§ï¼
|
å½¢å¼è¯æ³
-webkit-text-stroke =
<line-width> ||
<color>
<line-width> =
<length [0,â]> |
hairline |
thin |
medium |
thick
示ä¾
æ·»å 红è²ææ¬ç¬è§¦
HTML
html
<p id="example">æ¤ææ¬çç¬è§¦ä¸ºçº¢è²çã</p>
CSS
css
#example {
font-size: 3em;
margin: 0;
-webkit-text-stroke: 2px red;
}
ç»æ
è§è
| è§è |
|---|
| Compatibility # the-webkit-text-stroke |