线性渐变

马黑黑 发表于 2023-8-3 08:05

本帖最后由马黑黑于 2023-8-3 08:08 编辑 <br /><br /><style>
.gradientbox {
margin: 20px;
width: 300px;
height: 40px;
background: linear-gradient(90deg,
olive,
tan,
orange,
teal
);
border: 1px solid gray;
}
.gradientbox:nth-of-type(2) {
background: linear-gradient(90deg,
olive,
tan,
orange,
teal
) no-repeat 0 50% / 100% 4px;
}
.gradientbox:nth-of-type(3) {
background: linear-gradient(90deg,
olive 25%,
tan 25%,
tan 50%,
orange 50%,
orange 75%,
teal 75%,
teal 0
);
}

.gradientbox:nth-of-type(4) {
background: linear-gradient(90deg,
olive 25%,
tan 25%,
tan 50%,
orange 50%,
orange 75%,
teal 75%,
teal 0
) no-repeat 0 50% / 100% 4px;;
}
</style>

<h2>（一）linear-gradient</h2>
<p>试看如下效果：</p>
<div class="gradientbox"></div>
<div class="gradientbox"></div>
<div class="gradientbox"></div>
<div class="gradientbox"></div>

<p>代码放在楼下</p>

马黑黑 发表于 2023-8-3 08:06

本帖最后由马黑黑于 2023-8-3 08:50 编辑

一楼效果的代码：
<style>
.gradientbox {
   margin: 10px;
   width: 300px;
   height: 40px;
   background: linear-gradient(90deg,
            olive,
            tan,
            orange,
            teal
   );
   border: 1px solid gray;
}
.gradientbox:nth-of-type(2) {
   background: linear-gradient(90deg,
            olive,
            tan,
            orange,
            teal
   ) no-repeat 0 50% / 100% 4px;
}
.gradientbox:nth-of-type(3) {
   background: linear-gradient(90deg,
            olive 25%,
            tan 25%,
            tan 50%,
            orange 50%,
            orange 75%,
            teal 75%,
            teal 0
   );
}

.gradientbox:nth-of-type(4) {
   background: linear-gradient(90deg,
            olive 25%,
            tan 25%,
            tan 50%,
            orange 50%,
            orange 75%,
            teal 75%,
            teal 0
   ) no-repeat 0 50% / 100% 4px;;
}
</style>

<div class="gradientbox"></div>
<div class="gradientbox"></div>
<div class="gradientbox"></div>
<div class="gradientbox"></div>
线性渐变背景属性名为 linear-gradient，作用元素 background 或 background-image，还有 border-image 等。其语句规范可以为如下的简写属性：
background: linear-gradient(角度或方向, 颜色一, 颜色二, ... , 颜色N) 是否重复位置 / 尺寸;

注意：渐变角度（或方向）和颜色作为一个单位放在小角括号里，每一样参数表达完毕均需要使用小角逗号表示该参数表达完毕。后面的参数用空格隔开，位置和尺寸则必须使用 / 隔开。

background 属性可以分行写（主要为了便于阅读或配置）：

background: linear-gradient(
   角度或方向,
   颜色一,
   颜色二,
      ... ,
   颜色N) 是否重复位置 / 尺寸;

若需要相邻颜色界线分明，可给出颜色边界值，下一个颜色和上一个颜色共享一个边界值、并有自己的边界值（像素值或百分比都可以），设置起来有点繁琐没有难度：

background: linear-gradient(
   角度或方向,
   颜色一 25%,
   颜色二 25%,
   颜色二 50%,
   颜色三 50%,
   颜色三 75%,
   颜色四 75%,
   颜色四 0) 是否重复位置 / 尺寸;

最后一个颜色界定值是 0，表示占完剩下的所有尺寸。

是否重复的值由：repeat（重复）、no-repeat（不重复）、repeat-x（水平方向重复）、repeat-y（垂直方向重复）。

位置指渐变背景在元素中的位置，缺省时 linear-gradient 占满整个盒子，可以定义 xy坐标值或使用关键字（如center等）表示。例中，二、四使用的值是 0 50%，表示水平方向从 0 开始，垂直方向处在 50% 处。

尺寸可以用 XY 方向表示，如例中二、四效果，使用 100% 4px 这个值，表示尺寸为水平方向的全部、纵向方向的4px。

位置/尺寸的配套，得出一条垂直居中、贯穿左右的4像素厚度的水平线。

马黑黑 发表于 2023-8-3 08:08

本帖最后由马黑黑于 2023-8-3 20:47 编辑 <br /><br /><style>
.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); background: #f9f9f9; box-sizing: border-box; overflow-x: auto; tab-size: 3; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: #ccc; border-right: 1px solid #ccc; text-align: right; pointer-events: none; }
.stage { display: grid; place-items: center; }
.hidden { display: none; }
</style>

<div class="papa">
<h2>线性渐变 linear-gradient 使用实例：米字格</h2>
<p>为了扫盲，俺闲余之时练练毛笔字，兜里有钱但兜里钱少，只好自己用高端彩喷+高端打印纸打印米字格。俺使用 linear-gradient 设计俺专用的米字格稿纸：</p>
<div class="mama">
<pre class="hCode">
<style>
.mybox {
width: 400px;
height: 400px;
background-color: lightblue;
background-image:
linear-gradient(to top right,
transparent,
transparent 49.8%,
olive 49.8%,
olive 50.2%,
transparent 50.2%
),
linear-gradient(to bottom right,
transparent,
transparent 49.8%,
olive 49.8%,
olive 50.2%,
transparent 50.2%
),
linear-gradient(to bottom,
transparent,
transparent 49.8%,
olive 49.8%,
olive 50.2%,
transparent 50.2%
),
linear-gradient(to right,
transparent,
transparent 49.8%,
olive 49.8%,
olive 50.2%,
transparent 50.2%
);
}
</style>

<div class="mybox"></div>
</pre>
<pre class="hLineNum"></pre>
</div>
<p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
<div class="stage"></div>
<p>代码中设计了四组线性渐变背景，每一组的颜色设计都一样，由透明色和橄榄色按一定比例布排，但是方向不一样，大家细细比较。</p>
</div>

<script>

let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);

let btns = document.querySelectorAll('.btnok'),
stages = document.querySelectorAll('.stage'),
hCodes = document.querySelectorAll('.hCode'),
hLineNums = document.querySelectorAll('.hLineNum'),
mamas = document.querySelectorAll('.mama');

btns.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
hLineNums.innerText = str;
mamas.style.cssText += `height: ${hCodes.offsetHeight + 10}px`;
item.onclick = () => {
let val = item.value;
stages.innerHTML = val === '运行代码' ? hCodes.innerText : '';
item.value = item.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
}
});

</script>

马黑黑 发表于 2023-8-3 08:08

本帖最后由马黑黑于 2023-8-4 08:56 编辑 <br /><br /><h2>线性渐变 linear-gradient 应用实例：进度条</h2>

<pre>

<style>
.prog {
width: 300px;
height: 40px;
border: 1px solid gray;
background: linear-gradient(to right, red 30%, silver 0);
background-repeat: no-repeat;
background-position: 0 50%;
background-size: 100% 2px;
}
</style>

<div class="prog"></div>

</pre>

<p>background系列属性设置，可以使用简写方式：<br><br> background: linear-gradient(to right, red 30%, silver 0) no-repeat 0 50% / 100% 2px;<br><br>效果：<br><br></p>

<style>
.prog {
width: 300px;
height: 40px;
border: 1px solid gray;
background: linear-gradient(to right, red 30%, silver 0) no-repeat 0 50% / 100% 2px;
}
</style>

<div class="prog"></div>

马黑黑 发表于 2023-8-3 08:08

本帖最后由马黑黑于 2023-8-4 20:55 编辑 <br /><br /><style>
#mydiv1, #mydiv2 {
   margin: 20px;
   padding: 20px;
   width: 400px;
   height: 100px;
   border: 1px solid gray;
   color: gray;
}
</style>

<h2>线性渐变 linear-gradient 实例：七彩虹色卡</h2>
<p>牛顿七彩虹：红橙黄绿蓝靛紫，修正过的七彩虹：红橙黄绿青蓝紫。我们采用后者做如下示例，并将JS生成的背景代码附在后面：</p>
<div id="mydiv1"></div>
<div id="mydiv2"></div>
<pre id="scode"></pre>

<script>
let colors = ['red','orange','yellow','green','cyan','blue','violet'];
let ar1 = [], ar2 = [];
colors.forEach((item,key) => {
   ar1.push(colors);
   ar2.push(`${colors} ${key * 100 / 7}%,\n\t${colors} ${(key + 1) * 100 / 7}%`);
});

mydiv1.style.background = 'linear-gradient(to right,' + ar1.join(',\n') + ')';
mydiv2.style.background = 'linear-gradient(to right,' + ar2.join(',\n') + ')';
scode.innerText = '代码1：\n\nbackground: linear-gradient(\n\tto right,\n\t' + ar1.join(',\n\t') + '\n);';
scode.innerText += '\n\n代码2：\n\nbackground: linear-gradient(\n\tto right,\n\t' + ar2.join(',\n\t') + '\n);';
</script>

马黑黑 发表于 2023-8-3 08:08

本帖最后由马黑黑于 2023-8-4 23:04 编辑 <br /><br /><style>
.repeatbox {
margin: 20px;
width: 400px;
height: 200px;
border: 3px solid red;
background: repeating-linear-gradient(
silver,
green 20%
);
}
.repeatbox:nth-of-type(2) {
background: repeating-linear-gradient(
silver 15%,
green 20%
);
}
</style>

<h2>（二）repeating-linear-gradient</h2>
<p>线性渐变 linear-gradient 前面加 repeating- 就是重复性线性渐变，即 repeating-linear-gradient，二者语法规范一样。重复性线性渐变将配置好的线性渐变颜色作为一个配置单元均匀复制在所设置的元素之上，试看以下例子：</p>
<pre>

代码：

<style>
.repeatbox {
width: 400px;
height: 300px;
border: 3px solid red;
background: repeating-linear-gradient(
silver,
green 20%
);
}
</style>

<div class="repeatbox"></div>

效果：

</pre>

<div class="repeatbox"></div>

<p>渐变代码中，我们设计了两种颜色，silver（银色），green（绿色）的，两种颜色构成一个单元，在 20% 的位置终止。这样，该颜色单元将在元素上重复5次。这看上去貌似简单，不过，重复性渐变的重复行为其实很怪异、不好理解，例如，我们给 silver 也加上位置值，15%，效果会如下：</p>

<div class="repeatbox"></div>

<pre>

代码：

background: repeating-linear-gradient(
silver 15%,
green 20%
);
</pre>

<p>重复的颜色单元变成了 20% - 15% = 5%，百叶窗的窗条数变成了20根。如果有更多的颜色参与被复制的颜色单元，其重复的怪异性更为费解，大家可以自行体会。</p>

马黑黑 发表于 2023-8-3 08:08

本帖最后由马黑黑于 2023-8-5 17:37 编辑 <br /><br /><style>
#repeatingLg {
margin: 20px auto;
width: 400px;
height: 400px;
border-radius: 50%;
background: repeating-linear-gradient(
teal,
teal 10px,
transparent 10px,
transparent 15px
);
}
</style>

<h2>实例：使用固定位置设置重复性线性渐变</h2>
<p>所谓固定位置，指使用像素值设置颜色的位置。如下代码，我们使用 teal（蓝绿色）和 transparent（透明色）通过硬过渡组成一个渐变单元，蓝绿色占10个像素，透明色占5个像素：</p>

<pre>

background: repeating-linear-gradient(
teal,
teal 10px,
transparent 10px,
transparent 15px
);

效果：

</pre>

<div id="repeatingLg"></div>

马黑黑 发表于 2023-8-3 08:08

本帖最后由马黑黑于 2023-8-5 17:48 编辑 <br /><br /><style>
#rpBox {
margin: 20px auto;
width: 400px;
height: 400px;
background: repeating-linear-gradient(
to right bottom,
teal,
teal 10px,
transparent 10px,
transparent 15px
),
repeating-linear-gradient(
to right top,
teal,
teal 10px,
transparent 10px,
transparent 15px
);
}
</style>

<h2>实例：多组重复性线性渐变的设置</h2>

<p>渐变背景被视为图像性质，所以，一个元素可以拥有多组渐变背景。当渐变背景重合在一起，我们或许需要通过部分透明度、背景融合技术等手段令被覆盖的渐变也能呈现出来。以下代码，使用部分透明颜色，并改变其中一组渐变背景的方向，使其构成交叉图案：</p>

<pre>

background: repeating-linear-gradient(
to right bottom,
teal,
teal 10px,
transparent 10px,
transparent 15px
),
repeating-linear-gradient(
to right top,
teal,
teal 10px,
transparent 10px,
transparent 15px
);

效果：

</pre>

<div id="rpBox"></div>

红影发表于 2023-8-3 09:46

这个好，能看到均匀的从一个颜色过渡到另一个颜色，也能看到不渐变的颜色的对比。还能复习background: 的位置和大小的设置方式。真好{:4_199:}

醉美水芙蓉 发表于 2023-8-3 11:57

花飞飞 发表于 2023-8-3 12:38

这个边界不清晰的就直接列颜色。。需要边界清晰的给个值就好。。原来如此。。

花飞飞 发表于 2023-8-3 12:38

border-image: linear-gradient(35deg,tan,purple,cyan,orange,red) 4;
昨天我试图用这个代码给贴子加一个之前的变幻效果，结果效果没出来。。{:4_170:}

马黑黑 发表于 2023-8-3 12:46

花飞飞发表于 2023-8-3 12:38
border-image: linear-gradient(35deg,tan,purple,cyan,orange,red) 4;
昨天我试图用这个代码给贴子加一 ...

你这个是边框特效，有条件要求，我有专贴讲过这个

马黑黑 发表于 2023-8-3 12:51

红影发表于 2023-8-3 09:46
这个好，能看到均匀的从一个颜色过渡到另一个颜色，也能看到不渐变的颜色的对比。还能复习background: 的位 ...

之前谈过渐变的硬线，就是相邻颜色界线分明的那种

马黑黑 发表于 2023-8-3 12:52

花飞飞发表于 2023-8-3 12:38
这个边界不清晰的就直接列颜色。。需要边界清晰的给个值就好。。原来如此。。

渐变，逐渐变化，所以两种颜色之间，中间有过度，这是渐变的初衷。但是，根据需要，也可以给渐变加上硬线，就是有分明的边界。

红影发表于 2023-8-3 19:45

马黑黑发表于 2023-8-3 12:51
之前谈过渐变的硬线，就是相邻颜色界线分明的那种
是的，加上明确的界线，就不是渐变了。

花飞飞 发表于 2023-8-3 20:25

马黑黑发表于 2023-8-3 12:52
渐变，逐渐变化，所以两种颜色之间，中间有过度，这是渐变的初衷。但是，根据需要，也可以给渐变加上硬线 ...

允许溢出与否的区别。。。这个得根据实际情况来定。。

花飞飞 发表于 2023-8-3 20:26

马黑黑发表于 2023-8-3 12:46
你这个是边框特效，有条件要求，我有专贴讲过这个

这是被发现翘课了。。。{:4_170:}

马黑黑 发表于 2023-8-3 20:48

花飞飞发表于 2023-8-3 20:26
这是被发现翘课了。。。

边框渐变色其实挺好的

马黑黑 发表于 2023-8-3 21:02

花飞飞发表于 2023-8-3 20:25
允许溢出与否的区别。。。这个得根据实际情况来定。。

这里不是溢出，是渐变的方式：软过渡和硬过渡

页: [1] 2 3 4 5 6 7 8 9 10

花潮论坛's Archiver

线性渐变