我試圖弄清楚如何在標題文本中添加虛線邊框，這樣我的結果應該如下圖所示。
請查看我嘗試過的代碼（React JSX）：
<Box>
<p className="recentTitle"> Recent Transactions</p>
</Box>
CSS
.recentTitle {
margin-left: 6% !important;
margin-top: 7% !important;
outline: 1px dashed white;
width: fit-content !important;
padding: 5px !important;
border-radius: 2px !important;
}
我想要展示或試圖達到的結果。
任何幫助或建議表示贊賞。
感謝您抽出寶貴時間提前閱讀和評論。
uj5u.com熱心網友回復：
自定義邊框有一些機會。
但是你可以使用一個技巧::before來::after模仿邊界。
body {
background: #000;
}
.recentTitle {
position: relative;
display: inline-block;
padding: 20px;
border-radius: 8px;
color: white;
}
.recentTitle::before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 50%;
height: 75%;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-radius: 8px 0 0 0;
}
.recentTitle::after {
position: absolute;
bottom: 0;
right: 0;
content: '';
width: 50%;
height: 75%;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-radius: 0 0 8px 0;
}<div class="recentTitle"> Recent Transactions</div>這是一個使用偽類的更有趣的例子：
（原文來源：https ://codepen.io/shshaw/pen/MqMZGR?editors=0010 ）
@charset "UTF-8";
.gradient-box {
display: flex;
align-items: center;
width: 90%;
margin: auto;
max-width: 22em;
position: relative;
padding: 30% 2em;
box-sizing: border-box;
color: #FFF;
background: #000;
background-clip: padding-box;
/* !importanté */
border: solid 5px transparent;
/* !importanté */
border-radius: 2em;
}
.gradient-box:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
margin: -5px;
/* !importanté */
border-radius: inherit;
/* !importanté */
background: linear-gradient(to right, red, orange);
}
html {
height: 100%;
background: #000;
display: flex;
}
body {
margin: auto;
}<div class="gradient-box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. </p>
</div>uj5u.com熱心網友回復：
您可以以通常的方式在 p 上繪制邊框，然后使用 clip-path 剪切掉您不想要的位。
在此代碼段中，假設您要剪切的數量等于 5px 填充，但當然，如果您想在 y 方向剪切更多內容，您可以使用更復雜的步進路徑。
body {
background: black;
}
.recentTitle {
margin-left: 6%;
margin-top: 7%;
width: fit-content;
padding: 5px;
border-radius: 2px;
color: white;
position: relative;
border: solid white 1px;
box-sizing: border-box;
--c: 5px;
clip-path: polygon(0% 0%, 50% 0%, 50% var(--c), 100% var(--c), 100% 100%, 100% 100%, 50% 100%, 50% calc(100% - var(--c)), 0% calc(100% - var(--c)));
}<p class="recentTitle"> Recent Transactions</p>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/465716.html
上一篇：表格單元格中的影像尺寸錯誤