主页 / 问题 / 1325294
Accepted
Denis
Asked:2022-09-04 22:09:18 +0800 CST2022-09-04 22:09:18 +0800 CST

描边文字

  • 772

有一个布局

在此处输入图像描述

这是html

<h2>РАСПРОДАЖА</h2>

这是CSS

.double_text h2 {
    font-family: 'Playfair Display', serif;
    font-size: 104px;
    line-height: 110px;
    font-weight: 700;
    background: #503012;
    background: -webkit-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    background: -moz-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    background: linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

我怎样才能给这个文本一个 3px 的白色描边？

html

1 个回答

  1. Best Answer

    对于引擎上的浏览器显示 WebKit 网页，此选项适合使用 '-webkit-text-stroke`

    body {
  background: black;
}
h2 {
    font-family: 'Playfair Display', serif;
    font-size: 104px;
    line-height: 110px;
    font-weight: 700;
    background: #503012;
    background: -webkit-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    background: -moz-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    background: linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@supports (-webkit-text-stroke: 3px white) {
  h2 {
    -webkit-text-stroke: 3px white
  }
}
    <h2>РАСПРОДАЖА</h2>

    您可能希望使用选项 c来支持不支持text-shadow属性的其他浏览器：-webkit

    body {
  background: black;
}
h2 {
    font-family: 'Playfair Display', serif;
    font-size: 104px;
    line-height: 110px;
    font-weight: 700;
    color: gold;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}
    <h2>РАСПРОДАЖА</h2>

    • 2

相关问题