gpt4 book ai didi

适用于多种浏览器的 CSS3 渐变

转载 作者:太空宇宙 更新时间:2023-11-04 00:08:52 29 4
gpt4 key购买 nike

我在 Firefox 中使用了这个 CSS 线性渐变,但在 Safari 和其他浏览器中似乎无法获得相同的结果。它是联系字段的纸状背景。我试过整个 body 和一个特定的元素,这种风格似乎只适用于 Firefox。尝试使用 -webkit- 和 -moz- 但没有成功。有什么想法吗?

textarea {
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
display: block;
resize: none;
}

最佳答案

CSS

textarea {
background-color: #ffffff;
background-image:
-moz-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
-moz-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-image:
-webkit-gradient(linear, left top, right top, color-stop(79px, rgba(0, 0, 0, 0)), color-stop(79px, #abced4), color-stop(81px, #abced4), color-stop(81px, rgba(0, 0, 0, 0))),
-webkit-gradient(linear, left top, left bottom, color-stop(.1em, #eeeeee), color-stop(.1em, rgba(0, 0, 0, 0)));
background-image:
-webkit-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
-webkit-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-image:
-o-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
-o-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-image:
-ms-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
-ms-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px),
linear-gradient(to bottom, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
background-size: 100% 1.2em;
}

Demo

资源

关于适用于多种浏览器的 CSS3 渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13813317/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com