Html 如何在所选列表项上绘制倒圆角？

让我们假设一组框，一个在另一个下面，由一些边框隔开

如果我设置其中一个框，它应该具有左上边框半径和左下边框半径

同样，对于上面的框，右下边界半径应在不干扰边界流的情况下存在，并且所选框下方的框应具有右上边界半径，而不干扰边界流

提供的图像

---

这应该可以解决您的问题：

div{
宽度：100px；
高度：40px；
}
.首先{
边框顶部：1px实心#000；
右边框：1px实心#000；
边框底部：1px实心#000；
}
.第二{
右边框：1px实心#000；
边框底部：1px实心#000；
边框右下半径：10px；
宽度：92px；
左边距：8px；
}
.第三{
左边框：1px实心#000；
边框底部：1px实心#000；
边框左上半径：10px；
边框左下半径：10px；
宽度：92px；
}
.第四{
右边框：1px实心#000；
边框底部：1px实心#000；
边框右上角半径：10px；
}

试试这个

.box{
宽度：300px；
高度：30px；
边框：2倍实心#000；
显示：块；
溢出：隐藏；
左边距：10px；
}
#一、二、四{
左边界：无；
}
#两个{
边框右下半径：20px；
}
#一，三{
边框底部：无；
}
#三{
边界顶部：无；
边界权：无；
边框左下半径：20px；
边框左上半径：20px；
左边距：0px；
宽度：40px；
}
#四{
边框右上角半径：20px；
}

ul{
列表样式：无；
}
李{
填充：20px；
}
李：第n个孩子（1）{
右边框：1px实心#000；
边框顶部：1px实心；
边框底部：1px实心；
}
李：第n个孩子（2）{
右边框：1px实心#000；
边框底部：1px实心；
边框右下半径：15px；
左边距：13px；
}
李：第n个孩子（3）{
左边框：1px实心；
边框左上半径：15px；
边框左下半径：15px；
边框底部：1px实心；
右边距：13px；
}
李：第n个孩子（4）{
右边框：1px实心#000；
边框右上角半径：15px；
边框底部：1px实心；
}

亲爱的，请检查这段代码，我只是给你一个完美的形状。这正是你需要检查的边缘

.box1{
宽度：300px；
高度：100px；
边框：1px实心#000；
左边框：0；
右边框宽度：2px；
}
.box2{
宽度：300px；
高度：100px；
右边框：2倍实心#000；
边框右下半径：20px；
边框左下半径：0px；
位置：相对位置；
}
.box2：：之后{
位置：绝对位置；
右：-2px；
宽度：30px；
高度：30px；
边框底部：2倍实心#000；
右边框：2倍实心#000；
边框右下半径：20px；
边框左下半径：0px；
底部：0px；
内容：“；
}
.box2：：之前{
位置：绝对位置；
右：16px；
宽度：90%；
高度：2倍；
背景：#000；
底部：0px；
内容：“；
}
.box3{
宽度：281px；
高度：100px；
边框底部：2倍实心#000；
左边框：2倍实心#000；
边框左上半径：20px；
边框左下半径：20px；
位置：相对位置；
}
.box3：：之后{
位置：绝对位置；
左：-2px；
宽度：30px；
高度：30px；
边框顶部：2个实心#000；
左边框：2倍实心#000；
边框左上半径：20px；
边框左下半径：0px；
顶部：-2px；
内容：“；
}
.box4{
宽度：300px；
高度：100px；
边框底部：1px实心#000；
右边框：2倍实心#000；
边框左上半径：20px；
边框右上角半径：20px；
位置：相对位置；
}
.box4：：之后{
位置：绝对位置；
右：-2px；
宽度：30px；
高度：30px；
边框顶部：2个实心#000；
右边框：2倍实心#000；
边框右上角半径：20px；
边框左下半径：0px；
顶部：-2px；
内容：“；
}

---

这里有一个纯css的方法来实现这一点

为此需要以下

HTML

结构：

<ul>
  <li>
    <span>1</span>
  </li>
  <li>
    <span>2</span>
  </li>
  .....
  .....
  .....
  <li>
    <span>n</span>
  </li>
</ul>

1
二,
三,
四,
五,
六,


一,
2
三,
四,
五,
六,


一,
二,
3
四,
五,
六,


一,
二,
三,
4
五,
六,


一,
二,
三,
四,
5
六,


一,
二,
三,
四,
五,
6

从一个列表和一个伪列表中，也可以做一些事情：

（

tabindex

是为演示添加的，您可以单击或通过项设置选项卡以查看边框和背景切换）

项目的高度和填充并不重要，但您需要注意半径值和边框厚度（如有必要），以更新边距和/或坐标以匹配使用的值

ul{
背景：线性渐变（向左，白色，#0F4782，#069ED5，白色）；
边框底部：实心；
填充：0；
边缘：0 1米；
}
李{
显示：块；
边框：实心；
左边界：无；
边框底部：无；
填充：0.5em；
}
李:聚焦,，
李：积极的{
大纲：无；
边框：实心；
边界权：无；
位置：相对位置；
左：-.5em；
利润上限：3倍；
利润底部：-3px；
边界半径：0.5em 0.5em；
背景：线性渐变（向右，番茄色，白色）
}
李:焦点+李,，
李：主动+李{
边界半径：0.75em；
}
李:焦点:之前,，
李：主动的：之前{
内容：''；
边界半径：0.75em；
边框：实心透明；
边框底部：实心；
位置：绝对位置；
右：-8px；
底部：100%；
高度：0.75em；
宽度：0.75em；
变换：旋转（-45度）；
;
}
li：焦点i，li：活动i{display:none；}
李:焦点:之后,，
李：活动：之后{
内容：“>聚焦”；
字体大小：粗体；
}

项目单击我
<ul>
  <li>
    <span>1</span>
  </li>
  <li>
    <span>2</span>
  </li>
  .....
  .....
  .....
  <li>
    <span>n</span>
  </li>
</ul>