英文:
How can I make this fading divider responsive?
问题
我有一个使用以下CSS属性样式化的分隔元素：
.divider {
height: 2px;
background: black;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(#fff));
}
所以我有2个问题，如何使这个渐变效果具有响应性？目前渐变效果始于固定长度。
有人能解释/提供关于以下内容的解释吗？
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(#fff));
我在网上找到它，看起来正是我需要的，但我不太明白这些数字各自代表什么，最后一个是大小，但不幸的是百分比在这里不起作用，如果我更改其他数字，它们似乎不会改变任何东西。
英文:
I have a divider element styled with the following CSS properties:
.divider {
height: 2px;
background: black;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(#fff));
}
So I have 2 questions, how can I make this fading effect responsive? The fading starts at a fixed length by now.
And can somebody explain/link me an explanation to the
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#000), to(#fff));
I found it online as what I need but I don't quiet understand what each of those numbers is for, the last one is the size but % doesn't work here sadly, the other numbers don't really change anything if I change them.
答案1
得分: 0
你可以使用新的渐变语法：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.divider {
height: 2px;
background: linear-gradient(to right, white 0%, black 50%, white 100%);
}
<!-- language: lang-html -->
<div class="divider"></div>
<!-- end snippet -->
英文:
You can use the new gradient syntax:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.divider {
height: 2px;
background: linear-gradient(to right, white 0%, black 50%, white 100%);
}
<!-- language: lang-html -->
<div class="divider"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论