html 边框变粗 margin -1px

最近刚开始学习web前端,html和css,对于遇到的边框变粗的问题,用margin为负值解决问题发表一些自己的理解

首先我们来看看下面一张图片

list-style: none;                 border:1px solid black;                 width: 200px;                 line-height: 2em;                 text-align: center;

你会发现中间的线条特别的粗,这个问题该如何解决呢?

这里就可以用margin -1px(取决你边框的宽度)来解决。加入这行代码的样式,如下图

 下面我们就来分析这就话,对于边框的top,和left向上和向左移动一个而对于right和bottom它们会把紧跟其后的元素拉过来。

其实每个li都向上和向左在原来的基础上移动了1px,对于bottom边框把下方紧随其后的top边框拉过来之后,top边框也要向上移动1px,刚好重合。 还有其他的解决方法,就是重合的边框你可以设置:border-top(bottom或left或right):none;这样的话也可以取消边框。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

试试这4个CSS动画解决方案和资源

随着移动设备的大量使用和CSS3兼容性在浏览器中的普及,越来越多的程序猿开始设计和使用基于CSS3的动画效果解决方案,但是自己编写基于CSS3的动画效果也是一件...

3065
来自专栏玩转前端

小程序怎么将视觉搞实现成ui

这个真的是强烈建议,对于一个页面,首先应该大致的看一下可以划分为哪几个模块,通常的划分方式是,整体来看,是row排列,还是column排列的,那么,最擅长做这种...

29917
来自专栏性能与架构

影子(Shadow) DOM

什么是 Shadow DOM? Shadow DOM 是一个革命性的新技术,先来看下他是什么样子的 以<video>标签为例非常适合,例如 <video ...

3108
来自专栏mukekeheart的iOS之旅

iOS模拟器使用

  在iOS开发过程中一直都是使用模拟器进行调试,在模拟器上有很多不适应的地方,但是其实在模拟器上也有很多其他的功能,在本文中主要对模拟器的一些基本功能进行总结...

733
来自专栏IMWeb前端团队

快速优雅的为React组件生成文档

在开发React组件时我们通常需要处理2个问题: 实例化这个组件以便调试 为这个组件编写使用文档以便更好的让别人知道怎么使用这个组件 最原始的方法莫过于开发时建...

2798
来自专栏ACM小冰成长之路

51Nod-2020-排序相减

ACM模版 描述 ? 题解 还是那句话,这种题不该出现在 51Nod51Nod 题库,就算出现也不该是基础题,应该是 11 级题,和基础题的定位不符。 代码 #...

17810
来自专栏编程微刊

三个Bootstrap免费字体和图标库

1434
来自专栏九彩拼盘的叨叨叨

学习概要:前端该会的 Photoshop 使用

544
来自专栏IMWeb前端团队

React.createClass vs extends React.Component

当我们学习ReactJS的时候, 都会通过官方Tutorial看到下面的写法. import React from 'react'; let TodoItem...

1928
来自专栏破晓之歌

固定边栏滚动特效 原

732

扫码关注云+社区