新的一页了。。。
红影 发表于 2024-7-30 17:58
别这么想，可能大家没注意。
{:4_190:}
<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">第十讲：元素边框</h2>
<p>本讲起，我们暂时从艰涩的JS中走出来，集中学习一些做帖子无法回避的CSS知识与技能。这些会比JS容易得多，不过就是有些繁琐。不论如何，接下来的几个讲义要讨论的东东，要求不同于JS能读懂、做简单修改那么低，它们应被充分理解和掌握。本节专门讲CSS边框，border。</p>
<p>border 属性隶属于CSS范畴，用来制定HTML元素的边框样式。border属性实际上由一系列的 border-* 属性组成，常用的有 <span class="textRed">border-style</span>（边框样貌）、<span class="textRed">border-width</span>（边框厚度）、<span class="textRed">border-color</span>（边框颜色）、<span class="textRed">border-radius</span>（边框角半径），还有其他的。试看如下的 .mybox {} 选择器代码：</p>
<div class="hE"><pre>
.mybox {
width: 600px;
height: 260px;
border-style: solid; /* 实线样式 */
border-width: 8px; /* 8像素厚度 */
border-color: red; /* 红色 */
}
</pre></div>
<p>其中，边框的样貌还可以是 dashed（虚线）、dotted（圆点）、double（双线）、groove（雕刻）、ridge（浮雕）、inset（凹陷）、outset（凸起）、hidden（隐藏）、none（无）等，还是挺丰富的；厚度除了实体数值，还有关键字 thick（厚）、thin（薄）可用；颜色支持任何一种浏览器支持的颜色表达法。这些属性独立使用时都支持多值设置，后面会谈到。</p>
<p>可以使用语法糖简写方式书写border属性。下面的写法，运行效果与上面的写法同：</p>
<div class="hE"><pre>
.mybox {
width: 600px;
height: 260px;
border: 8px solid red; /* 此句包含了边框的厚度+样式+颜色 */
}
</pre></div>
<p>但语法糖写法仅支持各属性的单值设置，当我们需要给不同的边框设置不同的颜色、样式、厚度时，最好还是一个一个地写 border-* 属性，试看代码和效果：</p>
<div class="hE"><pre id="pre1">
<style>
/* border-* 属性四个值对应的边框顺序 ：上右下左 */
.mybox {
width: 600px;
height: 260px;
border-color: red green blue cyan; /* 颜色 */
border-style: solid dotted dashed groove; /* 长相 */
border-width: 3px 6px 12px 8px; /* 厚度 */
}
</style>
<div class="mybox"></div>
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看效果</button></p>
<div id="sbox1" class="showDiv"></div>
<p>border-* 属性的设置支持单值和多值。单一值时，四条边框一样；双值时，上和下使用第一个值、左和右使用第二个值；三个值时，上用第一个值，左和右用第二个值，下用第三个值；四个值时，按上右下左的顺序依次使用四个值。</p>
<p>元素的四个角默认是尖角，我们可以通过 border-radius 设置圆角半径。圆角半径可以使用px值，也可以使用百分比。以下示例，我们给 id="mybox" 的元素设置了 10px 的圆角半径，注意观察元素四个角的效果：</p>
<div class="hE"><pre id="pre2">
<style>
#mybox {
width: 600px;
height: 260px;
border: thick groove green;
border-radius: 10px;
}
</style>
<div id="mybox"></div>
</pre></div>
<p><button id="btn2" type="button" value="2">点击查看效果</button></p>
<div id="sbox2" class="showDiv"></div>
<p>如果元素的宽高一致，当 border-radius 的值设为单值 50% 或 100% 都会得出圆形的形状，但是，当 border-radius 是多值时只有所有值都设为 50% 或宽高像素尺寸的一半时才得到圆形。以下代码使用四个值设置四个角的圆角半径，试分析代码然后查看效果：</p>
<div class="hE"><pre id="pre3">
<style>
#mybox1 {
width: 300px;
height: 300px;
border: 2px groove cyan;
border-radius: 0 50% 0 100%; /* 值为 0 时可以省略单位符号 */
}
</style>
<div id="mybox1"></div>
</pre></div>
<p><button id="btn3" type="button" value="3">点击查看效果</button></p>
<div id="sbox3" class="showDiv"></div>
<p>border-radius属性多值时，两个值的，左上和右下使用第一个值，右上和左下使用第二个值；三个值的，左上使用第一个值，右上、左下使用第二个值，右下使用第三个值；四个值则按左上、右上、右下、左下依次使用四个值。取值顺序可能会让人一时半会儿找不着北，但这和和上右下左有联系，border-radius针对的是角，所以从左上开始。</p>
<p>顺便提一下，border-radius还有最多8个值的，这样它完全可以设置出奇形怪状的元素，感兴趣且有余力的童鞋可以去搜一搜。</p>
<p>请特别注意，border-radius 属性不依赖于border边框的有无，即，即使元素没有边框，元素也一样执行 border-radius 属性的设置。</p>
<p>本节主要讲 <span class="textRed">border</span> 和 <span class="textRed">border-radius</span> 两个属性，二者有联系但彼此独立。border 是纯边框层面的CSS属性，它由 border-* 诸多属性组成，用于设置HTML元素的边框；border-radius 是元素四个角的圆角半径，不设置边框属性的元素如果设置了 border-radius 属性圆角设置一样生效。两者都支持多属性值，请特别留意多值时对应边框和角的取值次序。</p>
<p>作业：制作一个有浮雕边框效果（ridge）的 400*200 的元素，要求边框颜色为浅绿色（lightgreen），厚度为10px，左上角和右下角不需要圆角、右上角和左下角圆角半径为30px。</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-7-30 18:11
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18 ...
{:4_204:}{:4_190:}{:4_199:}
马黑黑 发表于 2024-7-30 17:57
这些都是有条件的，且纳入了智能管控，根据条件来合理运作
我是说这个比喻特别有趣{:4_173:}
“其中，边框的样貌还可以是 dashed（虚线）、dotted（圆点）、double（双线）、groove（雕刻）、ridge（浮雕）、inset（凹陷）、outset（凸起）、hidden（隐藏）、none（无）等”
这个些个名称还是需要记一下的，来学习并努力记住{:4_187:}
感觉border-radius 是经常使用的，对 border在最近的几个贴子里也用得比较多{:4_187:}
马黑黑 发表于 2024-7-30 18:11
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18 ...
这些讲解有文字，还能直接看效果，效果特别好{:4_187:}
黑黑辛苦了，请{:4_190:}
红影 发表于 2024-7-30 20:05
黑黑辛苦了，请
谢大咖
马黑黑 发表于 2024-7-30 20:18
谢大咖
嗯嗯，大杯咖啡喝了精神更集中{:4_173:}
红影 发表于 2024-7-30 20:43
嗯嗯，大杯咖啡喝了精神更集中
是这意思
今天第十讲了
黑黑出教程的速度也是杠杠的
黑黑应该没日没夜的在赶教程吧
不过黑黑高手分分钟一个教程就出来的{:4_189:}
马黑黑 发表于 2024-7-30 21:14
是这意思
是学习时的必备饮料{:4_173:}
<style>
#hy {
width: 400px;
height: 200px;
border: 10px ridge LightGreen;
border-radius: 0 30px;
}
</style>
<div id="hy"></div>
小辣椒 发表于 2024-7-30 21:50
黑黑应该没日没夜的在赶教程吧
钢铁侠呀俺
红影 发表于 2024-7-30 22:00
#hy {
width: 400px;
height: 200px;
100√