html - 如何在选定的列表项上绘制倒圆 Angular ?

标签 html css border css-shapes

让我们假设一组方框,一个在另一个下方,由一些边框分隔。

如果我设置其中一个框,它应该有 top-left-border-radius 和 bottom-left-border-radius

同样对于上面的盒子,右下角的边框半径应该在不影响边框流动的情况下,并且所选盒子下面的盒子应该有右上角的边框半径而不影响边框的流动。

图片已提供。

enter image description here

最佳答案

试试这个 https://plnkr.co/edit/dN4LqEQGIG6hmegl7DRV?p=preview

                .box:nth-child(even){
              border: 1px solid #000;
              border-top-left-radius: 6px;
              border-bottom-left-radius: 6px;
              border-right:none;
              border-top:none;
              border-bottom:none;
            }

            .box:nth-child(odd){
              border: 1px solid #000;
              border-top-right-radius: 6px;
              border-bottom-right-radius: 6px;
              border-left:none;
              margin-left:4px;
            }

关于html - 如何在选定的列表项上绘制倒圆 Angular ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41374692/

相关文章:

javascript - 设置值后输入字段是否扩展?

javascript禁用在chrome中点击事件之前触发的输入图像提交按钮

CSS 使元素完全移出可见屏幕?

android - 怎样消除图片周围的黑边

react-native - React Native如何像QR码标记一样只在广场的角落制作边框

html - 如何用CSS单元素制作镜像效果

javascript - 我将如何完成这个脚本,将用户输入乘以 100,然后在浏览器中将其输出到控制台?

html - 悬停时隐藏/显示文本

javascript - hover li 和第二个 li 元素

html - Css div 边框环绕一切,而不仅仅是它的内容