如何使用 CSS 或 SCSS 为文本添加描边或虚线边框？

Question

我想知道如何为我的 header 文本添加虚线边框，这样我的结果应该如下图所示。

请看我试过的代码（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;
}

我想要展示或正在努力实现的结果。

如有任何帮助或建议，我们将不胜感激。

感谢您抽出时间提前阅读和评论。

Answer 1

自定义边框的机会很少。

但是你可以使用 ::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>

Answer 2

你可以按照通常的方式在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>

如何使用 CSS 或 SCSS 为文本添加描边或虚线边框？

How to add stroke or dashed border to a text using CSS or SCSS?

css

sass