對于我的生活，我無法弄清楚如何實作以下目標。
我需要創建一個支持預覽鍵入內容的表單，就像下面的 Github 新問題創建表單一樣
我想要復制的是寫入/預覽對周圍的彎曲邊框，寫入和預覽的界限如圖所示。
這如何在 CSS 中實作？
謝謝
uj5u.com熱心網友回復：
一種方法是background-color為活動選項卡設定 a，同時將其底部邊框顏色設定為與其背景相同的顏色，然后將其向下移動1px以遮擋較長的邊框線。
[...document.querySelectorAll('.tabs > *')].forEach((tab, i, arr) => {
tab.addEventListener('click', () => {
arr.forEach(tab => tab.classList.remove('active'));
tab.classList.add('active');
});
}).wrapper {
padding: 4px;
}
.tabs {
display: flex;
border-bottom: solid 1px gray;
}
.tabs a {
text-decoration: none;
padding: 10px 16px;
margin-left: 10px;
border: solid 1px transparent;
/* only rounded border for top left and right */
border-radius: 8px 8px 0px 0px;
/* move the tab 1px downwards */
margin-bottom: -1px;
}
.tabs a.active {
border: solid 1px gray;
background-color: #fff;
border-bottom-color: white;
}<div class="wrapper">
<div class="tabs">
<a href="#" class="active">Write</a>
<a href="#">Preview</a>
</div>
<div class="content">
<p>content</p>
</div>
</div>uj5u.com熱心網友回復：
我不確定您打算如何使用這樣的編輯器，但如果它是基于 html 的，請查看基于 javascript 的降價編輯器。他們會使用 css，但 javascript 是他們處理所有功能的主要方式。一些編輯器功能強大，并提供格式化文本的預覽。
這是一份檔案，其中突出顯示了 10 種不同的編輯器，它們可能會提供您正在尋找的內容。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/476179.html
上一篇：將圖片定位在左側，但文本居中