仅用于 Safari 的 CSS

Safari 作为苹果公司的浏览器，网站在Safari浏览器中的表现非常重要，因此，这里将介绍一些仅用于Safari浏览器的CSS属性。

-webkit-appearance

-webkit-appearance属性是一个非常有用的属性，用于更改元素呈现的外观。在 Safari 中，这个属性可以让我们更改webkit浏览器中默认渲染的样式，例如改变按钮的默认外观，从而产生我们想要的样式。下面是一个改变按钮样式的例子：

button {
    -webkit-appearance: none;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 7px 14px;
    font-size: 14px;
    cursor: pointer;
    background-color: #fff;
    color: #333;
}

这段 CSS 代码将去掉Safari浏览器默认的按钮外观，并使用上面代码指定的样式。

-webkit-text-fill-color

-webkit-text-fill-color属性是另一个只用于Safari浏览器的很有用的属性。它用于改变文本的填充颜色，与color属性不同，-webkit-text-fill-color会忽略继承和文本属性的影响，而单独控制文本颜色。下面是一个例子：

h1 {
    font-size: 48px;
    font-weight: bold;
    -webkit-text-fill-color: #f00;
}

这段代码将所有 h1 元素的文本颜色设置为红色.

-webkit-scrollbar

-webkit-scrollbar是用于控制 WebKit 浏览器滚动条外观的伪元素。可以通过-webkit-scrollbar属性指定滚动条中的各个元素的背景和颜色等各项设置。下面是一个例子：

::-webkit-scrollbar {
    width: 12px;
} 
::-webkit-scrollbar-track {
    background-color: #f3f3f3;
}
::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
    border: 3px solid #f3f3f3;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

这段CSS代码用于更改WebKit滚动条的颜色和大小，利用-webkit-scrollbar-track更改滚动条的背景颜色，-webkit-scrollbar-thumb更改滚动条的滑块颜色以及形状，-webkit-scrollbar-thumb:hover则在鼠标移动到滑块上时更改其颜色。

以上就是针对Safari浏览器特有的CSS属性的介绍，这些属性可以让我们更好地控制网站样式，提高用户体验。