>  기사  >  웹 프론트엔드  >  CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

Y2J
Y2J원래의
2017-05-19 15:04:255810검색

background-color: rgb(255, 255, 255);">1. 문제가 생각보다 간단하지 않습니다

질문해보세요. CSS3 그래디언트를 사용하여 400*300에 빨간색에서 노란색으로 (100px, 100px)에서 (200px, 200px)로 구현합니다. p 레이어 경사 선형 그래디언트를 얻는 방법은 무엇입니까?

//zxx: 여기서 논의되는 CSS3 그래디언트는 새로운 표준 작성 방법을 기반으로 하며 개인 접두어를 무시합니다.

다음과 유사한 수평 그래디언트 구현을 알 수 있습니다.

{background-image:linear-gradient(left, red 100px, yellow 200px);}

효과는 다음과 유사할 수 있습니다.

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

매우 자연스럽습니다. 그러면 (100px, 100px)에서 (200px, 200px)로 시작해야 합니다. 왼쪽 상단부터 다음과 같아야 합니다. 하위:

{Background-image:linear-gradient(왼쪽 상단, 빨간색 100px, 노란색 200px);}

효과 다음과 유사할 수 있습니다.

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

와, 잘생겼네요. 그게 우리가 원하는 효과여야 합니다! ——

이렇게 간단하다면 말도 안 되겠죠~

포토샵을 열고 기다리세요그리기 소프트웨어, 위의 요구 사항을 충족하는 그라데이션을 그리고 효과를 확인하세요.

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

위의 CSS 구현과 비교하세요.

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

빨간색 영역의 크기가 확실히 많이 다릅니다. 무슨 일인가요?

모든 것이 당신이 생각하는 것만큼 단순하지 않다는 것만 말씀드릴 수 있습니다!

2. 게으르고 천천히 생각하고 처음부터 시작하세요.

문제에 직면했을 때 다른 사람에게 도움을 요청하는 것이 첫 번째 반응이라면 피상적인 것만 얻을 것입니다. 스스로 깊이 분석하면 우리가 갖고 있는 것을 얻게 되는 경우가 많습니다. 첫 번째 유형의 사람은 공부가 많은 것처럼 보이지만 실제로는 쉽고 빠른 사고를 부지런히 사용하고 에너지를 덜 소비하는 게으른 사람입니다. 이런 사람은 판매 및 홍보에는 적합하지만 기술에는 적합하지 않습니다. 돈을 덜 벌게 된다는 뜻이다.

여담은 이제 그만. 심호흡하고, 어서, 숨쉬세요... 좋아요, 이제 CSS3 그래디언트 선형 그래디언트의 표준 작성 방법을 다시 살펴보겠습니다(웹킷에서는 지원하지 않으므로 여기서는 생략합니다):

background-image: linear-gradient(  [ <angle> | <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

위의 CSS 구문을 흔히 볼 수 있지만, 구체적인 의미를 이해하지 못하는 분들이 있을 수도 있습니다. 실제로 위 기호의 의미는 정규식과 많은 유사점이 있습니다:

[]는 정규식 A 문자 클래스 에서 표현되는데, 여기서는 작은 단위로 이해하시면 됩니다.

|은 후보를 나타냅니다. 즉, "또는"은 전자 또는 후자를 의미합니다.

?는 0 또는 1을 의미하는 수량자 입니다. 방향을 지정하지 않고도 색상을 직접 변경할 수 있다는 의미입니다. 예를 들어

background:linear-gradient(red, yellow);

는 위에서 아래로 빨간색과 노란색 줄무늬 효과를 줍니다.

+는 1 이상을 나타내는 수량자이기도 합니다. 따라서 종료 색상은 필수 불가결합니다. 예를 들어 선형 그라데이션(빨간색)은 빈 슬레이트인 간장입니다.

는 주로 개발자에게 여기에 어떤 콘텐츠를 넣어야 하는지 알려주는 키워드입니다.

선형 그래디언트 키워드
1.angle
angle은 그래디언트의 각도를 나타내지만 이 각도는 10을 변경합니다. 예를 들어,
각도가 45도이거나 빨간색에서 노란색으로의 그라데이션인 경우 다음 그림이 올바른 표현입니다.

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

A인가 B인가 C인가?

이것은 아마도 여자친구가 옷 네 벌을 보여주며 어느 것이 더 멋져 보이는지 묻는 것보다 더 간단할 것입니다.

5초 카운트다운, 5, 4, 3, 2, 1, ...

알겠습니다. 정답은 C입니다.

친구여, 정답입니다. 가지다?

많은 사람들이 틀렸다고 장담합니다(저 포함). 왜 그런 실수를 했나요? 그 이유는 간단하다. 바로 '익숙함 효과'다.

想让人们相信谬误有个可靠的方法,那就是不断重复,因为人们很难对熟悉感和真相加以区别。——丹尼尔·卡尼曼

我们,譬如我,非常多次地接触CSS3 transform中的旋转,rotate(45deg)效果就是元素默认态顺时针旋转45°;于是,这种熟悉感会让我们觉得渐变的旋转也应该如此。默认渐变从上到下,那么旋转45°应该是D啊(参见下gif示意),怎么会是C呢?

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

photoshop与CSS3走得越来越近了,我们可以从photoshop中找到答案。

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

从上图那个圈中的圆环可以看出,渐变的角度与旋转的那个角度完全不是一回事。线性渐变的这个角度为圆心为起点的发散方向。大图示意就是:

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

2. side-or-corner
side-or-corner中文意思就是“边或角”,可选值有:

[left | right] || [top | bottom]

表示,你可以有如下的写法或组合:
left, right, top, bottom, left top, left bottom, right top, right bottom. 分别表示,从左往右,从右往左,从上往下,从下往上,从左上往右下,从……(都懂的,不全写了)

其中的left top(从左上往右下)正好我们一开始的例子使用了,现在看看,稍微想想,就知道我们使用错了!

显然,从(100,100)到(300,300)是个45度倍数角;而left top的角度是直奔右下角的,而容器是400*300,显然,不是45度倍数角。根据我们上面对angle的认识,角度应该是-45°,-45°为圆心网右下方向45度的一条线,正好符合从(100,100)到(300,300)的方向!

3. color-stop

渐变关键颜色结点,语法为:

<color> [ <percentage> | <length> ]

中文解释就是,颜色值+空格+百分比或长度值。例如red 100px. 记住,这里的颜色值只能一个,因此, red 100px 100px是完全错误滴!

OK,现在我们定义重新梳理了一遍,现在实现一开始的渐变效果应该OK了吧,试试呗~

如下CSS:

{background-image:linear-gradient(-45deg, red 100px, yellow 200px);}

如下效果:

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

肉眼看上去好像那么回事,我们来对比下photoshop中的正确实现:

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

额~  貌似还是不对啊,而且差得更远了,怎么回事???

我只能告诉你,事情远没有你想的那么简单!

三、深入理解线性渐变的角度坐标

上面的代码我们稍微修改下,加上-webkit前缀以及-moz前缀看看:

{background-image:-webkit-linear-gradient(-45deg, red 100px, yellow 200px);}

如下效果(非webkit内核截图):

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

哎呀,貌似角度对了嘛!咋回事。

这是Chrome浏览器下的一个奇葩问题,最近,Chrome浏览器已经去掉了CSS3渐变的私有前缀,但是,其中的解析也有了写变化:

background-image:-webkit-linear-gradient(-45deg, red, yellow)


background-image:linear-gradient(-45deg, red, yellow)

在Chrome浏览器下的渐变方向居然是相反的!45deg是正常的。

Firefox浏览器下也是如此,有前缀和没有前缀方向相反!咋回事?

原因很简单,CSS3目前还是草案阶段!

从浏览器去掉前缀前后的变化可以推测,之前,W3C的渐变坐标是与photoshop中一致的,但是,后来,由于某些原因,修改了。

至于什么原因,根据我草草的查找,可能与下面几个关键字之一有联系:animation/transition动画、write-mode书写方向、flex box模型、以及radial-gradient渐变等。

using angles
For the purpose of this argument, ‘0deg’ points upward, and positive angles represent clockwise rotation, so ‘90deg’ point toward the right.

也就是:

使用angles
参数释义如下,‘0deg’指向上面,同时正角度顺时针旋转,因此‘90deg’指向右边。

我们画一下就是:

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

可见,目前,规范的渐变坐标系与photoshop是有差异的。

同时,也告诫我们,私有前缀可不能乱用哦!

面向未来,显然我们都要跟着规范走,于是有CSS:

{background-image:linear-gradient(135deg, red 100px, yellow 200px);}

效果为:

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

与PS图比一下:

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

我去~怎么还是有出入啊?——红色区域大小明显不一样嘛!

我只能告诉你,事情远没有你想的那么简单!

四、深入理解角度坐标与位置关系

对于斜向线性渐变,点到点的渐变可不是直接把点的横坐标放上去就可以的。因为当渐变倾斜的时候,渐变的起止点的坐标也发生变化了。下图是官方规范的一张示意图,演示的是45deg渐变的起止点以及方向。

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

记住一个关键点,渐变的起点和终点(默认)在过中心的渐变线的垂直线上,于是,我们就可以确定起点与终点的位置了。按照这个理解,我们就可以画出400*300 p上135deg起始点在哪里,然后再确定(100,100)和(200,200)的位置就轻松多了。

如下示意图:

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

一图顶前言,反正上面这张图我是看懂了。于是,我们的坐标起止点值其实就变成了,黑色括弧的长度以及紫色括弧的长度值分别多少!

虽然很多人不喜欢数学,但是几何应该都还不错,我们来一起算一下……

//zxx: 长度计算中……

结果为,起点:

100 * Math.sqrt(2) = 141.4213562373095;

终点为:

200 * Math.sqrt(2) = 282.842712474619;

CSS用上:

{background-image:linear-gradient(135deg, red 141.4213562373095px, yellow 282.842712474619px);}

效果:

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

与PS的效果比对下:

CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명

【相关推荐】

1. CSS3免费视频教程

2. 关于CSS3中linear-gradient参数的详解

3. CSS linear-gradient() 的语法详解

4. CSS3中linear-gradient的实例详解

5. 详解CSS3中lineaer-gradient使用方法

위 내용은 CSS3의 경사 선형 그래디언트 lineaer-gradient에 대한 심층 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.