CSS之webkit内核中的属性text-stroke

让我为大家介绍一下text-stroke
大家是否想过要弄一个描边过的文字,接下来,text-stroke就可以为你解决
text-stroke是一个复合属性,里面有两个参数:描边的尺寸 描边的颜色

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title>
    <style>
        div {
            text-align: center;
            font-size: 60px;
            height: 500px;
            line-height: 500px;
            -webkit-text-stroke: 1px red;
            color: transparent;
        }
    style>
head>
<body>
    <div>
        text stroke
    div>
body>
html>

text-stroke可以拆分为
text-stroke-color
text-stroke-width

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title>
    <style>
        div {
            text-align: center;
            font-size: 60px;
            height: 500px;
            line-height: 500px;
            -webkit-text-stroke-color: red;
            -webkit-text-stroke-width: 1px;
            color: transparent;
        }
    style>
head>
<body>
    <div>
        text stroke
    div>
body>
html>

CSS之webkit内核中的属性text-stroke_第1张图片

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

你可能感兴趣的:(css,webkit,前端)