问CSS3线性梯度中的特殊角
EN

Stack Overflow用户

提问于 2016-07-02 04:46:43

回答 1查看 1.3K关注 0票数 0

我使用CSS3线性梯度作为背景，目前我使用的是从左到右的梯度，但我想指定从左下角到右上角的梯度，但无法计算出角度的值。

background: linear-gradient(to right,#7E0F4B, #1A5865);

css

linear-gradients

回答 1

Stack Overflow用户

发布于 2016-07-02 11:15:04

当渐变需要从一边到另一边时，最好使用to [side] [side]语法，而不是使用角度。您将找到关于为什么这种语法比我在这里的回答中的角度更好的详细解释。

对于这个特殊的案例，你可以在问题本身中找到答案。梯度需要从左下角到右上角，因此linear-gradient函数的第一个参数应该是to top right。

CSS梯度语法既支持to [side]语法，也支持to [side] [side] (换句话说，是to角)语法。下面是W3C规范的摘录(重点是我的)：

使用关键字 如果参数为上、右、底或左，则梯度线的角度分别为0 0deg、90 0deg、180 0deg或270 0deg。 如果参数指定框的一个角(例如左上方的)，则渐变线必须与指定的角指向相同的象限，并且垂直于与梯度框相邻的两个角相交的直线。这将导致50%的颜色停止与相邻的两个角相交(参见示例)。

body {
  background: linear-gradient(to top right, #7E0F4B, #1A5865);
  min-height: 100vh;
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38156575

复制

相似问题

问CSS3线性梯度中的特殊角
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3线性梯度中的特殊角EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3线性梯度中的特殊角
EN