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 条评论
登录 后参与评论

相关文章

来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之relative

1、relative和absolute的相煎关系   限制作用:①限制left/top/right/bottom定位;②限制z-index层级;③限制在over...

3518
来自专栏移动开发

Android 5.0 Button 按钮水纹效果的适配问题

但是这样在5.0以下的系统,这样就没有效果,按钮会变成默认的灰色状态,点击按钮也不会有颜色的状态区别 为了兼容5.0以下的设备,我们可以利用seletor(...

1593
来自专栏一“技”之长

iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程

        众所周知,绚丽动画效果是iOS系统的一大特点,通过UIView层封装的动画,基本已经可以满足我们应用开发的所有需求,但若需要更加自由的控制动画的...

2633
来自专栏程序员的知识天地

利用HTML5,无JS实现各种交互效果

<details> 标签在Chrome,Firefox等浏览器下默认是有展开收起行为的,例如下面HTML:

9122
来自专栏GIS讲堂

地图切片详解

地图切片很多做GIS的筒子都不陌生,但是其中的原理一直是马马虎虎,在此,就地图切片中的几个重要的概念做一个介绍,一则自己做个总结,二则希望能够帮助到有此困惑的战...

7052
来自专栏Coco的专栏

【CSS3进阶】酷炫的3D旋转透视

2594
来自专栏编程

小白必知什么是css和盒模型

CSS盒模型概念 CSS 盒模型也叫框模型 (Box Model) ,包含了元素内容(content)、内边距(padding,也叫填充)、边框(border)...

2037
来自专栏vue学习

小程序 — 展开/收起

(1)首先我们应该在data中定义一个变量isShow用来控制样式的切换,默认为收起状态(即不展示)。

4624
来自专栏IMWeb前端团队

animation动画实践

由于业务关系,有幸参与腾讯课堂app下载页面制作,原则上ie8、9可表现为静态版本,而高级浏览则为动画版本。在这把一些重要思想和中间遇到的一些问题记录下,以供知...

2440
来自专栏前端知识分享

第101天:CSS3中transform-style和perspective

1、transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。

1803

扫码关注云+社区

领取腾讯云代金券