gpt4 book ai didi

html - 你能用 CSS3 创建这个带阴影的渐变样式线吗?

转载 作者:太空狗 更新时间:2023-10-29 13:46:44 27 4
gpt4 key购买 nike

Here's a picture of exactly what I'm trying to produce.

我已经能够为 <hr /> 设置样式使用 SVG 作为背景图像来创建此效果,但我希望能够使用 CSS3 生成相同的内容,但遇到了麻烦。

我想知道是否有任何 CSS 专家可能知道实现相同目标的方法,或者是否真的不可能使用纯 CSS?

感谢您的帮助。

最佳答案

我尝试用三层创建效果,两个背景具有 alpha 不透明度。一个从顶部开始到中间停止,另一个从中间开始到底部结束,一个背景有 image 的一部分。在 y 轴上重复。

我遵循这个图层教程的 url:http://css-tricks.com/css3-gradients/

html 代码,仅适用于 Chrome,替换/覆盖特定浏览器的属性“-webkit-gradient”:

<html>
<head>
<style>
.gradient {
width:76px;
height:200px;
border:0;
background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(rgba(192,192,192,1)), to(rgba(192,192,192,0))),
-webkit-gradient(linear, 0% 50%, 0% 100%, from(rgba(192,192,192,0)), to(rgba(192,192,192,1))),
url(http://i41.tinypic.com/omwky.gif);
background-repeat:repeat-y,repeat-y, repeat-y;
}
</style>
</head>
<body>
<hr class="gradient"/>
</body>
</html>

关于html - 你能用 CSS3 创建这个带阴影的渐变样式线吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9669044/

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