马黑黑 发表于 2024-2-12 10:02

边框也是美美哒

<style>
#mydiv {
        margin: auto;
        width: 160px;
        height: 160px;
        border-style: dotted solid double dashed;
        border-color: red green orange blue;
        border-width: 10px;
        border-radius: 50%;
}
</style>

<div id="mydiv"></div>

马黑黑 发表于 2024-2-12 10:07

本帖最后由 马黑黑 于 2024-2-12 10:10 编辑 <br /><br /><style>
.mum { }
.mum ol { padding: 10px 20px; background: #eee; color: navy; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
.mum ol li { white-space: pre-wrap; word-wrap: break-word; tab-size: 4; }
</style>

<p>代码：</p>
<p><br></p>
<div class="mum"><pre>
&lt;style&gt;
.circle {
        margin: auto;
        width: 160px;
        height: 160px;
        border-style: dotted solid double dashed;
        border-color: red green orange blue;
        border-width: 10px;
        border-radius: 50%;
}
&lt;/style&gt;

&lt;div class="circle"&gt;&lt;/div&gt;
</pre></div>

<script>
var mums = document.querySelectorAll('.mum');
mums.forEach(mum => {
        var pre = document.querySelector('pre');
        var innerConts = pre.innerHTML.replaceAll(/(^.+$)/gm,'<li>$1</li>');
        mum.innerHTML = '<ol>' + innerConts + '</ol>';
});
</script>

马黑黑 发表于 2024-2-12 10:09

新版 Edge，Chrome，Firefox 浏览器环境下效果完美

醉美水芙蓉 发表于 2024-2-12 10:32

红影 发表于 2024-2-12 11:03

的确完美，也顺便学习了线型的设计，这个好{:4_187:}

红影 发表于 2024-2-12 11:04

border-style: dotted solid double dashed;
给出这个再接着给出边框颜色，它们就老老实实地一一对应呢，真神奇{:4_199:}

红影 发表于 2024-2-12 11:06

这个涉及了边框的种类、颜色、宽度、半径的设置。学习了{:4_199:}

马黑黑 发表于 2024-2-12 11:39

醉美水芙蓉 发表于 2024-2-12 10:32
欣赏黑黑新款播放器！

这个还木有打算

四海八荒 发表于 2024-2-12 11:47

欣赏黑黑新款播放器！

马黑黑 发表于 2024-2-12 11:58

本帖最后由 马黑黑 于 2024-2-12 12:00 编辑

红影 发表于 2024-2-12 11:04
border-style: dotted solid double dashed;
给出这个再接着给出边框颜色，它们就老老实实地一一对应呢， ...
边框的基本样式共四种，默认 solid，还有另外三个，dashed，dotted，double，还有一个缺省值 none（不设置边框）

我们过去设置border，多数情况下使用复合写法，一句话解决问题。要精细设置的话，需要分来来写，可以：

① 针对 border-xx 参数

border-style ：值有 solid（默认）, dashed, dotted, double
border-width ：值有 thin, medium（默认）, thick, 数值+单位（例如10px）
border-color ：值为有效的颜色表达式

上述每一个属性均支持多只表达法：

    单值 ：四个边一样 【例】border-width: 2px; → 四个边框尺寸均为 2px
    双值 ：上下一样、左右一样，【例】border-color: red blue; → 上下红色，左右蓝色
    三值 ：上、左右、下，【例】border-style: solid double dotted; → 上实线、左右双实线、下小圆点线
   四值：上、右、下、左

②分边写

border-top: 1px solid gray;
border-right: thin dotted red;
border-bottom: thick dashed purple;
border-left: medium double yellow;

还有其他写法，可以自行网补

马黑黑 发表于 2024-2-12 12:01

四海八荒 发表于 2024-2-12 11:47
欣赏黑黑新款播放器！

这个现在不是播放器

小辣椒 发表于 2024-2-12 12:49

彩色边框出来了，黑黑的新作{:4_178:}

醉美水芙蓉 发表于 2024-2-12 14:00

红影 发表于 2024-2-12 14:01

马黑黑 发表于 2024-2-12 11:58
边框的基本样式共四种，默认 solid，还有另外三个，dashed，dotted，double，还有一个缺省值 none（不设 ...

这个讲解很详细，很有收获{:4_187:}

醉美水芙蓉 发表于 2024-2-12 14:02

樵歌 发表于 2024-2-12 14:43

估计对俺狠有用，到时请红影再改动高和宽，以及上下左右的颜色边框，用来填字，岂不锦上添花鸟。{:4_189:}

樵歌 发表于 2024-2-12 14:46

红影 发表于 2024-2-12 14:01
这个讲解很详细，很有收获

觉得可以用在消寒上，得劳动师妹了，我不知道高和宽乍改，又怎么和原来那个边框代码整合{:4_203:}

梦油 发表于 2024-2-12 15:09

你为咱们家园的贡献居功至伟。

红影 发表于 2024-2-12 15:59

樵歌 发表于 2024-2-12 14:46
觉得可以用在消寒上，得劳动师妹了，我不知道高和宽乍改，又怎么和原来那个边框代码整合

这个没法用上去呢，缩小了以后，估计看不出各种线条了呢{:4_173:}

马黑黑 发表于 2024-2-12 17:16

梦油 发表于 2024-2-12 15:09
你为咱们家园的贡献居功至伟。

言重言重
页: [1] 2 3 4 5 6 7
查看完整版本: 边框也是美美哒