如何使用 CSS 获得带有边框半径的部分圆形边框？

Question

我见过使用伪元素、border-image 和渐变背景的解决方案，它们可以实现部分边框。但它们似乎都不适用于获得尊重 border-radius 属性的部分边框。

我想实现这样的目标-

我能得到的最接近的是使用这个 -

.wrapper{
    width: 120px;
    height: 40px;
    background: linear-gradient(#374FDE,#374FDE) top left/ 20px 2px no-repeat, linear-gradient(#374FDE,#374FDE) left top/ 2px 20px no-repeat, #CDD8FF;
    border-radius: 8px;
}

<div class="wrapper"></div>

但正如您所见，它仍然会在角落处剪裁边框。在 HTML + CSS 中有什么方法可以实现这一点（不使用 SVG 元素）？感谢任何帮助。

Answer 1

.

html, body {
    height:100%;
    margin:0;
}
#div1 {
    position:relative;
    margin:20px auto;
    width:20%;
    padding-bottom:20%;
    background-color:white;
    border:1px solid black;
    border-radius:15px;
}
#div1:before {
    content:'';
    position:absolute;
    top:-1px; left:-1px;
    border:1px solid #fff;
    height:100%;
    width:100%;
    border-radius: 10%;
}

<div id="div1"></div>

资源：http://jsfiddle.net/webtiki/y3EfP/147/

Answer 2

多个背景和背景剪辑可以实现这一点。诀窍是有一个透明边框，你用部分渐变着色，然后用另一个渐变着色填充区域：

.wrapper{
    width: 120px;
    height: 40px;
    background: 
       linear-gradient(#CDD8FF,#CDD8FF) padding-box,
       linear-gradient(#374FDE,#374FDE) top left/20px 20px border-box;
    background-repeat:no-repeat;
    border-radius: 8px;
    border:2px solid transparent;
 }

<div class="wrapper"></div>

也像下面这样：

.wrapper{
    width: 120px;
    height: 40px;
    background: 
       linear-gradient(#CDD8FF,#CDD8FF) padding-box,
       linear-gradient(135deg,#374FDE 20px,#CDD8FF 0)  border-box;
    background-repeat:no-repeat;
    border-radius: 8px;
    border:2px solid transparent;
 }

<div class="wrapper"></div>

另一种语法：

.wrapper{
    width: 120px;
    height: 40px;
    background: 
       linear-gradient(#CDD8FF,#CDD8FF) padding-box,
       linear-gradient(to right, #374FDE 20px,#CDD8FF 0) 0 0/100% 20px  border-box,
       linear-gradient(#CDD8FF,#CDD8FF) border-box;
    background-repeat:no-repeat;
    border-radius: 8px;
    border:2px solid transparent;
 }

<div class="wrapper"></div>

您还可以考虑使用剪辑路径或蒙版剪切的伪元素：

.wrapper {
  width: 120px;
  height: 40px;
  background: #CDD8FF;
  border-radius: 8px;
  position: relative;
}

.wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  border-radius: inherit;
  border: 2px solid #374FDE;
  clip-path:inset(0 calc(100% - 30px) calc(100% - 20px) 0);
}

<div class="wrapper"></div>