일반적으로 사용되는 색상 그라데이션 방법 요약-CSS 튜토리얼-php.cn

이번에는 일반적으로 사용되는 색상 그라데이션 방법을 요약하고 색상 그라데이션방법에 대한 주의사항은 무엇인지 살펴보겠습니다.

1. 선형 그라데이션: 선형-그라디언트

문법:

| <측면 또는 모서리로> , ]? <색상 시작>[, <색상 끝>]+)
= <색상>[ <길이>|<백분율>]?

다음 값은 각도 또는 키워드를 사용하여 설정할 수 있는 그라데이션 방향:

: 각도 값 사용 그라데이션의 방향(또는 각도)을 지정합니다.

왼쪽으로: 그라데이션을 오른쪽에서 왼쪽으로 설정합니다. 해당 항목: 270deg

오른쪽으로: 그라데이션을 왼쪽에서 오른쪽으로 설정합니다. 해당 항목: 90deg

에서 위로: 그라데이션을 아래에서 위로 설정합니다. 해당 항목: 0deg

에서 아래쪽으로: 위에서 아래로 그라데이션을 설정합니다. 에 해당: 180deg. 이는 기본값이며 공백으로 두는 것과 같습니다.

그라데이션의 시작 및 끝 색상을 지정하는 데 사용됩니다.

: 색상을 지정합니다. L & lt; 길이 & gt;: 길이 값으로 시작 위치를 지정합니다. 음수 값 l & lt; 백분율 & gt ;: 시작 및 끝 색상 위치를 백분율로 지정합니다.

예:

p {  
    width: 200px;  
    height: 100px;  
    margin: 10px 5px;  
    border: 1px solid #ddd000;  
}  
#LinearStartToEnd {  
  float:left;  
  background: linear-gradient(#ff0000, #00ff00);  
}  
#LinearPercentage {  
  float:left;  
  background: linear-gradient(#0000ff, #ff0000 52%, #00ff00);  
}  
#LinearAnglePercentage {  
  float:left;  
  background: linear-gradient(90deg, #ff0000 20%, #00ff00 50%, #000000 80%);  
}  
#LinearAngle {  
  float:left;  
  background: linear-gradient(30deg, #ffff00 30%, #ff0000, #00ff00);  
}  
#LinearTopRight {  
  float:left;  
  background: linear-gradient(to right top, #00ff00, #ff0000 50%, #0000ff);  
}

로그인 후 복사

2. 방사형 그라데이션: Radial-gradient

구문:

gt;① | 왼쪽 | 가운데① | ]? [ ② | 상단 | 중앙② | 하단 ]?

= 원형 | 타원 |[|| ] = 가장 가까운 쪽 | 가장 가까운 쪽 | 가장 먼 쪽 | 모양>|| ]? , | , ]?]]+)

position> 원의 중심 위치를 결정합니다. 두 개의 매개변수가 제공되면 첫 번째 매개변수는 가로좌표를 나타내고 두 번째 매개변수는 세로좌표를 나타냅니다. 하나만 제공되면 두 번째 값은 기본적으로 50%, 즉 center 는 세로좌표를 나타냅니다. 원 중심의 가로좌표 값 . 부정적일 수 있습니다. P & lt; 백분율 & gt; ①: 방사형 그라데이션과 둥근 하트의 가로 좌표 값을 백분율로 지정합니다. 부정적일 수 있습니다. L & lt; length & gt; ②: 방사형 그래디언트 하트의 수직 좌표 값을 길이 값으로 지정합니다. 부정적일 수 있습니다. P & lt; Percentage & gt; ②: 방사형 그래디언트와 둥근 하트의 수직 여백 값을 백분율로 지정합니다. 부정적일 수 있습니다.

center①：设置中间为径向渐变圆心的横坐标值。

center②：设置中间为径向渐变圆心的纵坐标值。

left：设置左边为径向渐变圆心的横坐标值。

right：设置右边为径向渐变圆心的横坐标值。

top：设置顶部为径向渐变圆心的纵坐标值。

bottom：设置底部为径向渐变圆心的纵坐标值。

确定圆的类型

circle：指定圆形的径向渐变

ellipse：指定椭圆形的径向渐变。

circle | ellipse 都接受该值作为 size。

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边。

closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角。

farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边。

farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角。

circle 接受该值作为 size。

：用长度值指定正圆径向渐变的半径长度。不允许负值。

ellipse 接受该值作为 size。

：用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。

：用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。

示例：

#RadialCenterCircle {  
  float:left;  
    background: radial-gradient(circle at center, #ff0000, #ffff00, #00ffff);  
}  
#RadialClosestSide {  
  float:left;  
    background: radial-gradient(circle closest-side, #ff0000, #00ff00, #ffff00);  
}  
#RadialFarthestSide {  
  float:left;  
    background: radial-gradient(farthest-side, #ff0000 20%, #ffff00 60%, #00ff00 80%);  
}  
#RadialRightTop {  
  float:left;  
    background: radial-gradient(at right top, #ff0000, #ffff00, #00ff00);  
}  
#RadialRadiusCenter {  
  float:left;  
    background: radial-gradient(farthest-side at top right, #ff0000, #ffff00, #01fefe);  
}  
#RadialGroup {  
  float:left;  
    background:  
        radial-gradient(farthest-side at top right, #ff0000, #ffff00, #009f00, transparent),  
        radial-gradient(60px at top left, #ff0000, #ffff00, #00ff0e);  
}

로그인 후 복사

三、重复的线性渐变：repeating-linear-gradient

语法和参数类似线性渐变，这里不在赘述。详情请参考CSS手册。

示例：

#RepeatingLinearPercentage{  
  float:left;  
    background: repeating-linear-gradient(#ff0000, #00ff00 10%, #000000 15%);  
}  
#RepeatingLinearRight {  
  float:left;  
    background: repeating-linear-gradient(to right, #ff0000, #00ff00 10%, #000000 15%);  
}  
#RepeatingLinearAngle {  
  float:left;  
    background: repeating-linear-gradient(45deg, #ff0000, #00ff00 10%, #0000ff 15%);  
}  
#RepeatingLinearBottomLeft {  
  float:left;  
    background: repeating-linear-gradient(to bottom left, #00ffff, #ff0000 10%, #00ff00 15%);  
}

로그인 후 복사

四、重复的径向渐变：repeating-radial-gradient

语法和参数类似径向渐变，这里不在赘述。详情请参考CSS手册。

示例：

#RepeatingRadialCircle {  
  float:left;  
    background: repeating-radial-gradient(circle, #ff0000 0, #00ff00 10%, #0000ff 15%);  
}  
#RepeatingRadialTopLeft {  
  float:left;  
    background: repeating-radial-gradient(at top left, #ff0000, #00ff00 10%, #0de0f0 15%, #ffff00 20%, #000000 25%);  
}  
#RepeatingRadialClosestCorner {  
  float:left;  
    background: repeating-radial-gradient(circle closest-corner at 20px 50px, #00ff00, #ff0000 10%, #00ffff 20%, #ffff00 30%, #ff00ff 40%);  
}

로그인 후 복사

完整的例子：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8" />  
<title>ImageCSS3</title>  
<style>  
p {  
    width: 200px;  
    height: 100px;  
    margin: 10px 5px;  
    border: 1px solid #ddd000;  
}  
#LinearStartToEnd {  
  float:left;  
  background: linear-gradient(#ff0000, #00ff00);  
}  
#LinearPercentage {  
  float:left;  
  background: linear-gradient(#0000ff, #ff0000 52%, #00ff00);  
}  
#LinearAnglePercentage {  
  float:left;  
  background: linear-gradient(90deg, #ff0000 20%, #00ff00 50%, #000000 80%);  
}  
#LinearAngle {  
  float:left;  
  background: linear-gradient(30deg, #ffff00 30%, #ff0000, #00ff00);  
}  
#LinearTopRight {  
  float:left;  
  background: linear-gradient(to right top, #00ff00, #ff0000 50%, #0000ff);  
}  
  
#RadialCenterCircle {  
  float:left;  
    background: radial-gradient(circle at center, #ff0000, #ffff00, #00ffff);  
}  
#RadialClosestSide {  
  float:left;  
    background: radial-gradient(circle closest-side, #ff0000, #00ff00, #ffff00);  
}  
#RadialFarthestSide {  
  float:left;  
    background: radial-gradient(farthest-side, #ff0000 20%, #ffff00 60%, #00ff00 80%);  
}  
#RadialRightTop {  
  float:left;  
    background: radial-gradient(at right top, #ff0000, #ffff00, #00ff00);  
}  
#RadialRadiusCenter {  
  float:left;  
    background: radial-gradient(farthest-side at top right, #ff0000, #ffff00, #01fefe);  
}  
#RadialGroup {  
  float:left;  
    background:  
                radial-gradient(farthest-side at top right, #ff0000, #ffff00, #009f00, transparent),  
                radial-gradient(60px at top left, #ff0000, #ffff00, #00ff0e);  
}  
  
#RepeatingLinearPercentage{  
  float:left;  
    background: repeating-linear-gradient(#ff0000, #00ff00 10%, #000000 15%);  
}  
#RepeatingLinearRight {  
  float:left;  
    background: repeating-linear-gradient(to right, #ff0000, #00ff00 10%, #000000 15%);  
}  
#RepeatingLinearAngle {  
  float:left;  
    background: repeating-linear-gradient(45deg, #ff0000, #00ff00 10%, #0000ff 15%);  
}  
#RepeatingLinearBottomLeft {  
  float:left;  
    background: repeating-linear-gradient(to bottom left, #00ffff, #ff0000 10%, #00ff00 15%);  
}  
  
#RepeatingRadialCircle {  
  float:left;  
    background: repeating-radial-gradient(circle, #ff0000 0, #00ff00 10%, #0000ff 15%);  
}  
#RepeatingRadialTopLeft {  
  float:left;  
    background: repeating-radial-gradient(at top left, #ff0000, #00ff00 10%, #0de0f0 15%, #ffff00 20%, #000000 25%);  
}  
#RepeatingRadialClosestCorner {  
  float:left;  
    background: repeating-radial-gradient(circle closest-corner at 20px 50px, #00ff00, #ff0000 10%, #00ffff 20%, #ffff00 30%, #ff00ff 40%);  
}  
  
</style>  
</head>  
<body>  
<!-- 指定线性渐变起止色 -->  
<p id="LinearStartToEnd"></p>  
<!-- 指定线性渐变起止色位置 -->  
<p id="LinearPercentage"></p>  
<!-- 指定线性渐变颜色渐变方向和起止色位置 -->  
<p id="LinearAnglePercentage"></p>  
<!-- 指定线性渐变颜色渐变方向 -->  
<p id="LinearAngle"></p>  
<!-- 设置渐变从右上到左下 -->  
<p id="LinearTopRight"></p>  
  
<!-- 浮动p换行，此处指定p宽高和边界，是为了覆盖前面定义的p统一CSS样式，  
 可以尝试去掉指定的p宽高和边界，看看效果 -->  
<p style="width:0; height:0; border:none; clear:both"></p>  
<!-- 以中心点为圆心的圆形径向渐变 -->  
<p id="RadialCenterCircle"></p>  
<!-- 径向渐变半径长度：圆心到离圆心最近边的长度 -->  
<p id="RadialClosestSide"></p>  
<!-- 径向渐变半径长度：圆心到离圆心最远边的长度 -->  
<p id="RadialFarthestSide"></p>  
<!-- 左边为径向渐变圆心的横坐标值,顶边为径向渐变圆心的纵坐标值 -->  
<p id="RadialRightTop"></p>  
<!-- 同时指定径向渐变的圆心和半径 -->  
<p id="RadialRadiusCenter"></p>  
<!-- 径向渐变组合 -->  
<p id="RadialGroup"></p>  
  
<p style="width:0; height:0; border:none; clear:both"></p>  
<!-- 指定颜色起止色位置的重复线性渐变 -->  
<p id="RepeatingLinearPercentage"></p>  
<!-- 从左到右渐变的重复线性渐变 -->  
<p id="RepeatingLinearRight"></p>  
<!-- 渐变角度为45度的重复线性渐变 -->  
<p id="RepeatingLinearAngle"></p>  
<!-- 从左下到右上的重复线性渐变 -->  
<p id="RepeatingLinearBottomLeft"></p>  
  
<p style="width:0; height:0; border:none; clear:both"></p>  
<!-- 圆形重复径向渐变 -->  
<p id="RepeatingRadialCircle"></p>  
<!-- 渐变方向为左上到右下的重复径向渐变 -->  
<p id="RepeatingRadialTopLeft"></p>  
<!-- 重复径向渐变：渐变半径长度为从圆心到离圆心最近的角的距离 -->  
<p id="RepeatingRadialClosestCorner"></p>  
  
</body>  
</html>

로그인 후 복사

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！