这次给大家带来在CSS边界线消失如何处理，处理在CSS边界线消失的注意事项有哪些，下面就是实战案例，一起来看一下。
先来看看下图，经常会在一些注意事项栏中见到，要求每行中最后一列的右边框消失，如何在所有浏览器中最便捷优雅的实现?
如果是不需要兼容 IE8- ，那么使用 CSS3 注意事项的选择器无疑是一种好方法。
// 使用伪类选择器，选择第 3n 个元素去掉边框li:nth-child(3n){ border-right:none; }
登录后复制
当然，如果个数确定也不多，给需要去掉右边框的元素直接添加一个特定的 class 也就完事。或者，使用 table 虽然繁琐一点，不过也能实现。
不过这样都不够优雅。
这里有个小技巧，就是通过添加反向边框并且增加一个负的 注意事项 来实现。
首先，假定我们的 ul 结构如下：
- 测试
- 消失
- 边界线
- 右侧
- 边界线
- 消失
- 测试
登录后复制
如图中所示，假定每行排列 3 个 li ，每个 li 宽 100px ，我们的 ul 和 ul-container 宽度都设为 300px 。
最重要的是，每个 li 设置一个左边框而不是右边框：
.ul-container, ul{ width:300px; } li{ float:left; width:99px; border-left:1px solid #999; }
登录后复制
我们会得到如下这样的结果：
接下来，我们将容器 ul-container 设置为 注意事项:hidden ，并且将 ul 左移一个像素 注意事项:-1px。
这样 ul 中第一列的所有边框都因为左移了一像素并且被 overflow:hidden 而消失了，造成了下一个 li 的右边框看着像左边框一样，其实只是个障眼法：
.ul-container{ overflow:hidden; } ul{ margin-left:-1px; }
登录后复制
效果图就如一开始图示所示：
这种做法可以适应不同 li 个数不同行数的所有情况，因为每个新添加的 li ，都会生成一个左边框与上一个 li 元素分开，只是在视觉上看上去像是上一个 li 元素的右边框。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
注意事项
注意事项
注意事项
以上就是在CSS边界线消失如何处理的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2898195.html
