需要在 css 中圆化边框

Question

我想使元素的边框变圆并向上移动右边的元素，这是我的代码，我想让它像图片中显示的那样，我已经使边框右圆但我不能使左边框变圆，我已使用伪 class 来舍入左边框

div {
  position: relative;
  text-align: center;
  width: 150px;
  color: #256060;
  margin: auto;
}

p {
  position: relative;
  margin: 0;
}

p:first-child {
  border-top: solid #256060;
}

p:last-child {
  border-bottom: solid #256060;
}

p:nth-child(odd) {
  border-top: solid #256060;
  border-bottom: solid #256060;
  border-right: solid #256060;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

p:nth-child(even) {}

p:nth-child(even):before {
  content: '';
  position: absolute;
  border-left: solid;
  left: -15%;
  bottom: 0;
  top: 0;
  border-top: solid;
  border-bottom: solid;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  width: 20px;
  height: 15px;
}

<div>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
</div>

Answer 1

更好？

<!DOCTYPE html>
<html>
<head>
<style> 

div{
    position: relative;
    text-align:center;
    width: 150px;
    color: #256060;
    margin: auto;
}

p{
    position: relative;
    margin: 0;
}

p:first-child{
    border-top:solid #256060;
}

p:last-child{
    border-bottom:solid #256060;
}

p:nth-child(odd) {
    border-top:solid #256060;
    border-bottom:solid #256060;
    border-right:solid #256060;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}


p:nth-child(even) {

}

p:nth-child(even):before{
    content: '';
    position: absolute;
    border-left: solid;
    left: -15%;
    bottom: 0;
    top: -3px;
    border-top: solid;
    border-bottom: solid;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    width: 20px;
    height: 18px;
}
</style>
</head>
<body>

<div>
    <p> Rounded List </p>
    <p> Rounded List </p>
    <p> Rounded List </p>
    <p> Rounded List </p>
    <p> Rounded List </p>
</div>


</body>
</html>

Answer 2

您可以像下面这样简化您的逻辑：

div {
  text-align: center;
  width: 150px;
  color: #256060;
  margin: auto;
}

p {
  position: relative;
  margin:-3px 0;
  padding:8px 0;
}

p::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:15px;
  right:0;
  border:3px solid;
  border-left:none;
  border-radius: 0 15px 15px 0;
}

p:nth-child(even)::before {
  transform:scaleX(-1);
  transform-origin:calc(50% - 15px/2) 50%
}

<div>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
</div>

也喜欢下面：

div {
  text-align: center;
  width: 150px;
  color: #256060;
  margin: auto;
}

p {
  position: relative;
  margin:-3px 0;
  padding:8px 0;
}

p::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  border:3px solid;
  border-radius: 15px;
  clip-path:polygon(15px 0,100% 0,100% 100%,15px 100%);
}

p:nth-child(even)::before {
  transform:scaleX(-1);
}

<div>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
</div>

避免负边距的另一个优化：

div {
  text-align: center;
  width: 150px;
  color: #256060;
  margin: auto;
}

p {
  position: relative;
  margin:0;
  padding:8px 0;
}

p::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  box-shadow:
    0 0 0 1.5px,
    0 0 0 1.5px inset;
  border-radius: 15px;
  clip-path:polygon(15px -100%,200% -100%,200% 200%,15px 200%);
}

p:nth-child(even)::before {
  transform:scaleX(-1);
}

<div>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
</div>

并且没有伪元素但也没有透明度：

div {
  text-align: center;
  width: 150px;
  color: #256060;
  margin: auto;
}

p {
  position: relative;
  margin:-3px 0;
  padding:8px 0;
  border-radius:15px;
  border:3px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(to var(--d,left),transparent 15px, currentColor 0) border-box;
}

p:nth-child(odd) {
  --d:right;
}

<div>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
</div>

Answer 3

我认为这是您想要的解决方案：

div {
  position: relative;
  text-align: center;
  width: 150px;
  color: #256060;
  margin: auto;
}

p {
  position: relative;
  margin: 0;
}

p:first-child {
  border-top: solid #256060;
}

p:last-child {
  border-bottom: solid #256060;
}

p:nth-child(odd) {
  margin-bottom:-2.5px;
  margin-top:-2px;
  margin-left:9px;
  border-top:2.5px solid #256060;
  border-bottom:2.5px solid #256060;
  border-right: solid #256060;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

p:nth-child(even) {
  margin-bottom:-2.5px;
  margin-top:-2.5px;
  margin-right:9px;
  border-top: solid #256060;
  border-bottom: solid #256060;
  border-left: solid #256060;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

<div>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
  <p> Rounded List </p>
</div>

Answer 4

没有伪的可能性:

ul { 
  --wS : 4px ; /* set here the size of the border */
  text-align: center;
  width: 150px;
  color: #256060;
  margin: 1em auto;
  list-style:none;
  padding:0 0 0 1em;
  }
li { 
  padding:0;
  margin: 0 0 calc( var(--wS) * -1);
  border:solid var(--wS);
  box-sizing:border-box;
}
li:nth-child(odd) { 
  border-radius:  1em 0 0 1em ;
  transform:translatex(-1em);
  border-right-color:transparent;
}

li:nth-child(even) {
  border-radius: 0   1em 1em 0;
  border-left-color:transparent;
  /* to fit with translated sibblings*/
  text-indent:-1em;
  padding-right:1em;
}

/* show center */
html {background:linear-gradient(to left, gray 50%, transparent 50%);}
ul   {background:linear-gradient(to left, gold 50%, transparent 50%);}

<ul>
  <li> Rounded List </li>
  <li> Rounded List </li>
  <li> Rounded List </li>
  <li> Rounded List </li>
  <li> Rounded List </li>
</ul>

需要在 css 中圆化边框

Need to round the border in css

css

border