红影
发表于 2024-7-31 22:18
<style>
.hy1 {
width: 600px;
height: 360px;
background: repeating-linear-gradient(90deg, transparent 60px, green 60px 61px, transparent 0 121px),
repeating-linear-gradient(0deg, transparent 60px, green 60px 61px, transparent 0 121px);
border: 1px solid green;
}
</style>
<div class="hy1">
红影
发表于 2024-7-31 22:19
马黑黑 发表于 2024-7-31 14:36
催更了
呀，又分页了，继续催更{:4_173:}
马黑黑
发表于 2024-7-31 22:24
红影 发表于 2024-7-31 22:18
.hy1 {
width: 600px;
height: 360px;
最右边的格子是不是窄了点
红影
发表于 2024-7-31 22:27
马黑黑 发表于 2024-7-31 22:24
最右边的格子是不是窄了点
是的，没算好{:4_173:}
红影
发表于 2024-7-31 22:32
马黑黑 发表于 2024-7-31 22:24
最右边的格子是不是窄了点
对目前的取值，因为每个格子多加了1，到最后的格子就直接少了10。
修改了一下：
<style>
.hy2 {
width: 600px;
height: 360px;
background: repeating-linear-gradient(90deg, transparent 59px, green 59px 60px, transparent 0 119px),
repeating-linear-gradient(0deg, transparent 59px, green 59px 60px, transparent 0 119px);
border: 1px solid green;
border-width: 0 0 1px 1px;
}
</style>
<div class="hy2">
红影
发表于 2024-7-31 22:33
这样做一下，可以知道里面的细节造成的影响了，真不错{:4_187:}
马黑黑
发表于 2024-7-31 22:49
红影 发表于 2024-7-31 22:32
对目前的取值，因为每个格子多加了1，到最后的格子就直接少了10。
修改了一下：
再加入：
border-width: 0 0 1px 1px;
酱紫上、右边缘就不会出现粗线
红影
发表于 2024-7-31 22:58
马黑黑 发表于 2024-7-31 22:49
再加入：
border-width: 0 0 1px 1px;
奇怪，为什么四边都取1会重复呢？
小辣椒
发表于 2024-7-31 23:02
今天看了后面的第十讲和第十一讲，感觉刚看了有点懂，但感觉记不住代码的意思，还得背下来
小辣椒
发表于 2024-7-31 23:03
仔细看看还是得花时间的，花了一个多小时，前面还没有仔细看的
马黑黑
发表于 2024-7-31 23:05
红影 发表于 2024-7-31 22:58
奇怪，为什么四边都取1会重复呢？
格子边缘线加边框线就重叠了
马黑黑
发表于 2024-8-1 12:21
<style>
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18px / 26px sans-serif; }
.artbox mark { color: black; background: lightblue; padding: 2px 4px; }
.textRed { color: red; }
.showDiv { position: relative; }
</style>
<div class="artbox">
<h2 class="textMid">第十二讲：CSS渐变之径向渐变</h2>
<p>与有明显带状色块的线性渐变不同，径向渐变以椭圆（缺省）和圆（circle）的形状为自己的渐变风格，默认从元素的中心出发，辐射到元素区域内的四周。该渐变的创建方式和圆有关，故称为径向渐变，<span class="textRed">radial-gradient</span>，radial 意为径向的、辐射的等，词根与半径一词同，gradient是渐变。看下面的代码和效果感受一下使用了径向渐变做背景图像的美妙：</p>
<div class="hE"><pre id="pre1">
<style>
.rbox1 {
width: 400px;
height: 200px;
background: radial-gradient(green, tan);
}
</style>
<div class="rbox1"></div>
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看效果</button></p>
<div id="sbox1" class="showDiv"></div>
<p>这是默认的径向渐变效果：绿色从元素的正中央，以椭圆的形状与棕褐色发生自然的过渡性渐变，向元素四周发散。下面，我们试着把渐变的形状变为圆形：</p>
<div class="hE"><pre id="pre2">
<style>
.rbox2 {
width: 400px;
height: 200px;
background: radial-gradient(circle, green, tan);
}
</style>
<div class="rbox2"></div>
</pre></div>
<p><button id="btn2" type="button" value="2">点击查看效果</button></p>
<div id="sbox2" class="showDiv"></div>
<p>可以明显看到，两种颜色的过渡性渐变是以圆形展开的。</p>
<p>我们甚至可以设置渐变的中心，用 at 0 0 或 at 10% 10% 等方式设置。以下例子，我们设置了渐变的形状和发起点，还多加了一个渐变颜色：</p>
<div class="hE"><pre id="pre3">
<style>
.rbox3 {
width: 400px;
height: 200px;
background: radial-gradient(circle at 30% 20%, gold, green, tan);
}
</style>
<div class="rbox3"></div>
</pre></div>
<p><button id="btn3" type="button" value="3">点击查看效果</button></p>
<div id="sbox3" class="showDiv"></div>
<p>有时可能需要硬边渐变，以营造界线分明的椭圆环或圆环：</p>
<div class="hE"><pre id="pre4">
<style>
.rbox4 {
width: 300px;
height: 300px;
background: radial-gradient(gold 10%, green 11% 20%, tan 21% 30%, teal 31% 40%, cyan 41% 50%, transparent 51%);
border: 1px solid gray; /* 边框用于观察 */
}
</style>
<div class="rbox4"></div>
</pre></div>
<p><button id="btn4" type="button" value="4">点击查看效果</button></p>
<div id="sbox4" class="showDiv"></div>
<p>上例，渐变交界处我们做了软的硬过渡，意思是，上一个颜色终点和下一个颜色的起点存在 1% 的软过渡，这样能够消除锯齿。最后一个颜色是透明色，这样可以得到纯粹完美的圆环组合。该例元素宽高一致，所以即使不设置渐变形状，得出的各环形状是正圆而非椭圆，这种情形下如果需要椭圆，可在加入渐变颜色前面加入形状关键字 ellipse。</p>
<p>重复性径向渐变，<span class="textRed">repeating-radial-gradient</span>，则允许我们以更少的代码绘制一系列的圆环，比如，假设我们需要制作一个红绿相间的重复性圆环：</p>
<div class="hE"><pre id="pre5">
<style>
.rbox5 {
width: 300px;
height: 300px;
background: repeating-radial-gradient(green, green 5%, red 6%, red 10%);
}
</style>
<div class="rbox5"></div>
</pre></div>
<p><button id="btn5" type="button" value="5">点击查看效果</button></p>
<div id="sbox5" class="showDiv"></div>
<p>我们早就知悉，渐变具有图像性质。那么，作为元素的背景，我们可以额外为之设置位置和大小。作为本讲的最后一个示例，我们将上一个示例即第五个例子改造一下，给它添加 background-position 和 background-size，看看得到的是什么效果：</p>
<div class="hE"><pre id="pre6">
<style>
.rbox6 {
width: 300px;
height: 300px;
background: repeating-radial-gradient(green, green 5%, red 6%, red 10%) 0/30% 30%;
}
</style>
<div class="rbox6"></div>
</pre></div>
<p><button id="btn6" type="button" value="6">点击查看效果</button></p>
<div id="sbox6" class="showDiv"></div>
<p>第六个示例的技巧，和使用 url() 函数加背景图片一样，用简写的方法在函数之后给出 background-position/background-size，需要特别注意的是，背景尺寸最后宽高都要设置。</p>
<p>作业：使用 radial-gradient 函数在 400*200的元素上绘制两个水平方向并排的青色（teal）圆球，球的直径为180px，要求，① 球的边缘不能有毛刺；② 元素的背景最终效果为粉红色（pink）但不允许单独设置背景色。提示：使用px设置颜色起始边界；将渐变视为图片，为其设置设置 repeat 属性（repeat-x或repeat-y，但当后面的背景位置和尺寸设置得当可以忽略此设置）；以简写形式设置类似于 center/cover 之类的 background-position 和 background-size，其中background-size 宽高都需要设置。</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</a></p>
</div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
var runCodes = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
.forEach((btn,key) => {
var pres = ,
outs = ;
btn.onclick = () => {
runCodes(pres.innerText, outs);
btn.disabled = true;
}
});
</script>
红影
发表于 2024-8-1 12:22
马黑黑 发表于 2024-7-31 23:05
格子边缘线加边框线就重叠了
原来是这样，学习了。{:4_187:}
又翻页了，可以期待十二讲了{:4_173:}
马黑黑
发表于 2024-8-1 12:23
红影 发表于 2024-8-1 12:22
原来是这样，学习了。
又翻页了，可以期待十二讲了
不是已经发了吗
红影
发表于 2024-8-1 12:34
马黑黑 发表于 2024-8-1 12:23
不是已经发了吗
呀，我在帖子里转悠，没看到。现在看到了{:4_173:}
马黑黑
发表于 2024-8-1 12:38
红影 发表于 2024-8-1 12:34
呀，我在帖子里转悠，没看到。现在看到了
午后咖啡需要的
红影
发表于 2024-8-1 15:31
马黑黑 发表于 2024-8-1 12:38
午后咖啡需要的
呵呵，我把做作业也可以当做提神咖啡呢。
这个{:4_190:}黑黑先喝着，我去试试这一讲的作业去。。。
红影
发表于 2024-8-1 15:34
作业：使用 radial-gradient 函数在 400*200的元素上绘制两个水平方向并排的青色（teal）圆球，球的直径为180px，要求，① 球的边缘不能有毛刺；② 元素的背景最终效果为粉红色（pink）但不允许单独设置背景色。
<style>
.hy3 {
width: 400px;
height: 200px;
background: radial-gradient(teal 90px, pink 91px 100px) 0/50% 100%;
}
</style>
<div class="hy3"></div>
红影
发表于 2024-8-1 15:36
不这个作业知道对不对{:4_173:}
红影
发表于 2024-8-1 15:36
好了，又翻页了，下一讲的内容更难些呢。期待着{:4_204:}