我想要這個點和一個更長的點效果:

我嘗試了線性漸變，但無法得到圓形邊緣。

我嘗試的代碼如下所示:

padding-block-end: 0.4rem;
border-block-end: 0.3rem solid;
border-image-source: linear-gradient(to right,
        rgb(255, 255, 255) 0% 30%,
        rgb(206, 21, 181) 33% 40%,
        rgb(255, 255, 255) 43% 45%,
        rgb(219, 17, 192) 48% 70%,
        rgb(255, 255, 255) 73% 100%);
border-image-slice: 10% 20%;
border-radius: 10px;

但我得到了這個:

# # #嘗試一下，然后復制您需要的內容:

.outer {
  width: 130px;
  height: 130px;
  background-color: #ccc;
  border-radius: 8px;
  text-align: center;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

.div1,
.div2 {
  background-color: red;
  height: 10px;
  border-radius: 100px;
  margin: 2px;
}

.div1 {
  width: 20%;
  display: inline-block;
}

.div2 {
  width: 50%;
  display: inline-block;
}

<div class="outer">
  <h1>Hello</h1>
  <div class="div1"></div>
  <div class="div2"></div>
</div>