首页 > 设计 > WEB开发 > 正文

使用 css 实现十字 内边框 内网格

2019-11-02 18:21:43
字体:
来源:转载
供稿:网友

使用 CSS 实现十字 内边框 内网格

在实现商品列表的时候大都有这样的需求,商品之间有条边框线如下图:

这里写图片描述

通过使用css可以轻松实现,代码如下:

<style> *{ padding: 0; margin: 0; } div{ overflow: hidden; width: 160px; margin: 50px; } ul{ list-style: none; } li{ float: left; height: 100px; width: 50px; border-left:1px solid red; /*设置左边框*/ border-bottom: 1px solid red; /*设置下边框*/ margin-left: -1px; /*-1后在父容器下面了,所以看不到*/ margin-bottom: -1px; } </style> <div> <ul> <li>商品</li> <li>商品</li> <li>商品</li> <li>商品</li> <li>商品</li> <li>商品</li> </ul> </div>

也可以不使用ul li 使用div也可以实现效果

进一步美化 实现如下边框效果 使用伪类befor

这里写图片描述

<style> *{ padding: 0; margin: 0; } div{ overflow: hidden; width: 160px; margin: 50px; } ul{ list-style: none; } li{ float: left; height: 100px; width: 50px; position: relative; border-bottom: 1px solid red; margin-bottom: -1px; } li::before{ position: absolute; content: ''; border-left:1px solid red; /*设置左边框*/ border-bottom: 1px solid red; /*设置下边框*/ margin-left: -1px; /*-1后在父容器下面了,所以看不到*/ margin-bottom: -1px; height: 80px; top: 10px; } </style> <div> <ul> <li>商品</li> <li>商品</li> <li>商品</li> <li>商品</li> <li>商品</li> <li>商品</li> </ul> </div>
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表