| CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3J6FUEpmoC_GTowD9YkH3g2rM7A0Lnuai3dXjXT3ii2_7nWfKVc9bTCNRfQi5lUUatF
cache-control: public, max-age=3600
expires: Sat, 11 Oct 2025 20:47:33 GMT
last-modified: Fri, 10 Oct 2025 01:09:14 GMT
etag: W/"31695266e735a4362aa4e60249a5dd99"
x-goog-generation: 1760058554024982
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 276611
x-goog-meta-goog-reserved-file-mtime: 1760056700
x-goog-hash: crc32c=gakJfQ==, md5=MWlSZuc1pDYqpOYCSaXdmQ==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 2d3d089a7e579e54292eb1b6c09c6035
date: Sat, 11 Oct 2025 19:47:33 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
-webkit-text-stroke-color - CSS | MDN
Toggle sidebar
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
-webkit-text-stroke-color
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since avril 2017.
La propriété -webkit-text-stroke-color permet de définir la couleur de la ligne utilisée pour le contour du text. Si cette propriété n'est pas définie, c'est la valeur de color qui sera utilisée.
Syntaxe
css
/* Valeurs de couleur */
/* Type <color> */
-webkit-text-stroke-color: red;
-webkit-text-stroke-color: #e08ab4;
-webkit-text-stroke-color: rgb(200, 100, 0);
/* Valeurs globales */
-webkit-text-stroke-color: inherit;
-webkit-text-stroke-color: initial;
-webkit-text-stroke-color: revert;
-webkit-text-stroke-color: revert-layer;
-webkit-text-stroke-color: unset;
Valeurs
<color>-
La couleur du contour pour les lettres.
Définition formelle
| Valeur initiale | currentcolor |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | couleur calculée |
| Type d'animation | une couleur |
Syntaxe formelle
-webkit-text-stroke-color =
<color>
Exemples
Varier la couleur du trait
HTML
html
<p>Texte avec un contour</p>
<input type="color" value="#ff0000" />
CSS
css
p {
margin: 0;
font-size: 4em;
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: #ff0000;
/* Cette valeur peut être modifiée */
}
const colorPicker = document.querySelector("input");
colorPicker.addEventListener("change", (evt) => {
document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
});
Résultat
Spécifications
| Specification |
|---|
| Compatibility # the-webkit-text-stroke-color |
Compatibilité des navigateurs
Loading…