旧帖边框简单模拟
本帖最后由 马黑黑 于 2023-6-3 07:16 编辑 <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">
<p>这是一个旧帖边框的大致模拟，大家可以精雕细琢：</p>
<div class="mama">
<pre class="hCode"><style>
#mydiv {
width: 760px;
min-height: 760px;
padding: 40px;
box-sizing: border-box;
border-radius: 12px;
box-shadow: 0 0 8px #000;
position: relative;
margin: 20px auto;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
}
#mydiv::before {
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
border: 2px dashed purple;
border-radius: inherit;
}
#mydiv::after {
content: '帖子标题 Title';
padding: 10px 40px 10px 10px;
left: -20px;
top: 16px;
border-radius: 10px 0 0 10px;
background: rebeccapurple;
opacity: .85;
font: bold 20px/28px sans-serif;
color: white;
clip-path: polygon(0 0,100% 0,90% 50%, 100% 100%, 0 100%);
}
</style>
<div id="mydiv">
<p><br><br>正文</p>
</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>
到七夕是不是能派对上用场{:4_170:} 好适用，收藏了。问大师好，问师叔早！ 这个边框对偶来说是新的，没见过。信笺纸 黑黑辛苦了，标题哪里还做了特别设计，这个很简洁实用{:4_199:} 看不懂 我就蹭个热度
给黑黑老师{:4_199:} 醉美水芙蓉 发表于 2023-6-3 11:48
很漂亮的边框！
以前论坛用过的H5边框，换用新的实现方法 樵歌 发表于 2023-6-3 07:58
到七夕是不是能派对上用场
按道理是可以的 小文 发表于 2023-6-3 08:20
好适用，收藏了。问大师好，问师叔早！
大师这个称谓太大了{:4_172:} 一斛珠 发表于 2023-6-3 11:11
看不懂 我就蹭个热度
给黑黑老师
会用就好 南无月 发表于 2023-6-3 08:56
这个边框对偶来说是新的，没见过。信笺纸
真正的信笺、方格稿啥的也有，找找 红影 发表于 2023-6-3 10:02
黑黑辛苦了，标题哪里还做了特别设计，这个很简洁实用
若使用，可以在精装一下 马黑黑 发表于 2023-6-3 12:19
若使用，可以在精装一下
嗯嗯，然后再加个音乐。 红影 发表于 2023-6-3 16:35
嗯嗯，然后再加个音乐。
加啥都行 马黑黑 发表于 2023-6-3 12:16
按道理是可以的
还是用不来{:4_198:} 谢谢老师的边框，感谢分享！{:4_187:} 马黑黑 发表于 2023-6-3 12:18
真正的信笺、方格稿啥的也有，找找
看来压箱底宝贝不少。。。这就去翻 翻 马黑黑 发表于 2023-6-3 17:06
加啥都行
对，还可以加图片之类的。 樵歌 发表于 2023-6-3 20:17
还是用不来
我可以用这个先去做一个{:4_173:}