Safari 似乎有一个错误，当您使用 webkit-background-... 为文本提供一些渐变时，它有时会创建一个非常细的边框。
很难始终如一地重现此错误。该问题不会出现在每个屏幕尺寸或分辨率上。在页面上的随机位置添加/删除段落有时可以解决问题(没有逻辑)，...特别是在 iOS 的 Safari 上会出现此问题。
但这是我使用的代码:
<span id="text">text.</span>
#text {
font-size: 8em;
font-weight: 700;
letter-spacing: 1px;
color: #000000;
text-decoration: none;
display: block;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #09D380, #0EC7D4 50%, #a4a4a4 50%);
background-size: 200% 100%;
}
此代码应该为 span 内的文本提供自定义背景，在本例中为渐变。这很好用。此代码本身也不存在此问题。
在一个内容比较多的页面上混合出现的问题:
<!DOCTYPE html>
<html>
<head>
<title>Safari bug</title>
<link rel="icon" type="image/png" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
body {
font-family: Poppins, sans-serif;
width: 100%;
height: 100%;
padding: 0;
background: linear-gradient(90deg, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 50%)
}
#container {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 100%;
}
#inner-container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
width: 90%;
}
#under-construction-half {
position: relative;
text-align: center;
}
#under-construction-half img {
width: 60%;
margin-right: 10px;
}
#logo-and-slogan-half {
text-align: left;
box-sizing: border-box;
margin-left: 50px;
}
#logo {
font-size: 8em;
font-weight: 700;
letter-spacing: 1px;
color: #000000;
text-decoration: none;
display: block;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #09D380, #0EC7D4 50%, #a4a4a4 50%);
background-size: 200% 100%;
}
#slogan {
font-size: 3.5em;
margin-top: -10%;
color: #3B3B3A;
}
#text {
margin-left: 7.5%;
margin-top: 7%;
font-size: 1.5em;
}
#under-construction-title {
font-weight: 700;
color: #09DD80;
font-size: 1.3em;
}
span {
display: block;
}
@media screen and (max-width: 950px) {
#inner-container {
flex-direction: column;
margin: auto;
}
#logo-and-slogan-half {
margin-left: 0;
font-size: 60%;
}
#text {
width: 90%;
margin: auto;
font-size: 100%;
margin-top: 20%;
}
#under-construction-half {
text-align: left;
}
#under-construction-half img {
width: 50%;
}
}
</style>
</head>
<body>
<div id="container">
<div id="inner-container">
<div id="logo-and-slogan-half">
<div id="logo-and-slogan">
<span id="logo">text.</span>
</div>
</div>
</div>
<div id="text">
<span id="under-construction-title">title...</span>
<p id="under-construction-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html>
在 span 中添加一个与页面背景颜色相同的边框也可以解决这个问题。但这并不总是可能的，因为例如有图像作为背景。
我已经在调整和摆弄这个 HTML/CSS 代码来解决这个问题，但我找不到解决这个错误的方法。
最佳答案
您可以使用 clip-path:inset(1px) 在周围裁剪几个像素。您可以根据需要使用更小或更大的值。
您也可以仅从顶部裁剪 clip-path:inset(1px 0 0)。这些值的工作方式与填充/边距相同。
关于html - 使用 -webkit-... 创建自定义文本颜色在 Safari 中创建边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68935915/