6个div都有border如何把重叠的border变成1px

用过margin-left : -1px margin-right : -1px 了 最后最上面的线就消失了 求老司机帮助

图片说明

-1

4个回答

6个div
margin-top: -1px;
margin-left: -1px;
父div
padding-top: 1px;
padding-left: 1px;

1
wswhy2
wswhy2 最后用 选择器写出来了 nth:child(3n+3) 谢谢:)
5 个月之前 回复

用 table表格写啊

0

6个div使用选择器写就可以了
nth:child(3n+3)

3X0+3 = 3
3X1+3 = 6
3X2+3 =9
然后添加样式

0

消失的那條線可以添加相對定位,再設置z軸為1,這樣被遮住的線就能出來了

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
想要边框变细,怎么做,普通的最小是1px
1、先给边框设置class  .li1 .li1{      background-color:white;      position:relative; } .li1:after{ position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#d9d9d9; content:
【HTML+CSS】设置border: 1px ..在某些内容中占据1px的间隔影响界面美观问题
有时我们给一些内容设置border时,时常出现父级100%,然后border所在div多出1px的间隔,造成页面显示不美观的问题:   解决方案,利用css3的 box-sizing属性进行设置: 最终效果如下:  ...
设置border线条小于1px
       正常来说,border的最小宽度为1px,这种情况对于移动端来说是一个很大的问题,因为1px在手机显示确实显得有点粗;对于iOS系统它支持浮点数,可以使用rpx作为单位,可设置为1rpx,相当于0.5px,而安卓就不行了,下面说一下安卓设置细下边框        对于安卓需要使用到伪元素,只需要把该伪元素添加到你想要的元素中就可以了,比如: <div class="tex...
怎样去除DIV块重复边框
如下边框代码为:border:1px solid #ccc; 在border:1px solid #ccc; 后面加上 margin-top:-1px ; 我这里是去除顶部重复,所以顶部外边距设为 -1 ,具体视情况定义外边距方向。
DIV边框重叠变粗解决方案(子元素浮动导致父元素失去高度解决方法)
1、问题如图: 代码如下:     new document         .father{ width:400px; } .c{ width:95px; height:100px; float:left; border:1px solid black; }
DIV 边框重叠太粗 解决办法 阿星小栈

   将margin值为边框值的相反数就行   原图:   .clear-box-border-weight {     margin-right:-1px;     margin-bottom:-1px; }    
 
 
 
 
 
 
 
 
 
 
 &#13...
在retina屏中实现1px border效果
街景wap官网中有在视网膜屏幕中实现1px border的需求. 首先,来看下面视觉给的输出图中的border: 从上面的视觉图可以看到,border是一根非常细的线。这篇文章将说明如何使用border-image实现在视网膜屏中1px的border效果。 注:因为硬件条件的限制,设备像素比(devicePixelRatio)为1的非视网膜屏手机无法达到这样的效果 首先准备一张符合你要求的b
div边框重叠 解决办法
解决办法:设置边框的相反数,比如边框为1PX, 则给每块的div添加margin-right:-1px; margin-bottom:-1px.
解决1px的border在移动端变粗的问题
给需要设置下边框的div设置伪类:after 2.div给一个相对定位 3.伪类给一个决定定位 4.div再给一个class名 .border-1px
table里的th和td加了边框后,他是两个边框重合的,1PX就变成了2PX
table里的th和td加了边框后,他是两个边框重合的,1PX就变成了2PX,解决方法.table{ border-collapse: collapse; border-spacing: 0; } .table th, .table td{ border:1px solid #000; }
css小于1px边框的实现
1、利用scale .content h1:after, .content h2:after { border-top: 9px solid red; content: ' '; display: block; width: 200px; ...
Webapp中1px边框在retina屏中变粗的问题
最近在做一个webapp, 给边框设置了1px的大小, 结果同时在1080P的手机中打开并截图后用PS无限放大, 发现边框并不是1px大小, 而是变成了3px的大小. 其实这是因为手机的dpr在作祟, 在超高清屏(dpr=3)的情况下会用3dp的大小去渲染1px的内容, 因此1px的边框在超高清手机上会被拉伸成3px, 这个问题是需要解决的. 还好,时代总是进步的。也许很多人都不知道, 现
做出比1px还细的线条
案例图片如下   代码: <div style="width:300px;border-top: 1px solid #CCCCCC;transform: scaleY(0.2);"></div> 注意:这是直接给一个新的并且没有高度的div设置的边框线,相当于把div做边框,并不是设置内容的div边框属性 注意:div一定要有一个宽度,不然看不出来  ...
vue解决移动端1px边框的问题 border.css
@charset “utf-8”; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft { ...
移动端border 1px 问题完美解决方案
我是用sass写的,用其他的预处理器写法大同小异,新建mixin.scss文件: /*单条border样式*/ @mixin border-1px ($color, $direction) { content: ''; position: absolute; background: $color; @if $direction == left { left: 0; ...
margin重叠问题,设置border会造成的后果
在两个嵌套的div中,如果外层div添加border,则两个嵌套div的margin就不会重叠,由此可见在实际开发过程中,如果div最后不会设置border,而会设置margin的,就尽量不要设置border去做调试,容易出错,可以设置背景色去做调试。 示例代码: <style> .div1{ margin-top:30px; ...
如何在移动端设置1px的border
在这里我只介绍下边框的实现: 实现原理:伪类+缩放 工具:stylus预编译器 1、在 stylus文件夹中创建mixin.styl文件,内容如下:(即通过伪类+子绝父相 实现1px的下边框,这只是开始,并没有结束 )   border-1px($color) position: relative &:after display: block ...
边框1像素的多个盒子并在一起相邻部分变成2像素的问题
1像素多个盒子边框并在一起变成2像素的问题 假设需要多个盒子。盒子边框的像素都为1,但是将这几个盒子并列放在一起会导致相邻的部分变为2像素,此时不想要2像素,想让边框变为1像素,该如何解决呢? 下面本人附上代码截图,并且适当说明原因。 本人在此用了5个盒子做示范,五个盒子浮动的时候会并在一起,导致相邻部分变为2像素。如下图所示: 解决此问题需要两个关键点: margin-lef...
用div做一个1px高的线条
问:为什么我设置的div的高度是1px,为什么看不到效果啊,div老是那么高。答:给你的div加一个属性:font-size:0; 说明:这个问题出现在IE6中;IE6中的div默认有个最小字体高度,div的最小高度就是这个高度,除非你改变这个字体的大小。这样来加: .style1{height:1px;font-size:0;} 比如想用一个div来做一个1px高的红色线条在没有
Css设置边框透明
border: 1px solid transparent;
border:1px引起的盒模型塌陷问题解决方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .main { margin: 100px auto; height: 1
移动端1px解决方案 1px border.css
将以下代码放在border.css文件中,然后引入 @charset &amp;quot;utf-8&amp;quot;; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topr...
js你真的了解offsetWidth吗
offsetWidth是什么? 答:它可以获取物体宽度的数值 那么就只是这样吗! html部分 &amp;lt;div id=&quot;div1&quot;&amp;gt;&amp;lt;/div&amp;gt;   &amp;lt;style&amp;gt; #div1 { width:200px; height:200px; border:1px solid red; padding:2px; margin:2px; ...
高分辨率下的1px border 实现方法
由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,与设计稿有出入,为了追求1px精准还原,我们就不得不拿出一个完美的解决方案 在Photoshop中,如果需要看似0.5px的边框,常见的方法就是对1px边框加上阴影模糊1px。同理,我们在retina屏下需要做到真实的1px边框,可利用box-shadow属性模拟。
border设置1px看起来很粗问题
border设置1px看起来很粗问题 在解决这个问题之前我们需要先理解一下‘设备像素比’这个概念 描述:设备像素比(devicePixelRatio) 公式:设备像素比 = 物理像素 / 设备独立像素 (注:在某一方向上) 问题本质:css中设置的像素并不是跟设备的像素点一一对应,这就是说,在css中写明1px,实际在手机上,看到的有可能并不是一个像素点占据的宽度。 css的像素是一个抽...
移动端border:1px 解决办法
sass写法 @mixin border-1px ($color) { position:relative; &::after{ diplay:block; position:absolute; content:""; left:0; bottom:0; width:100%; border-top:1px solid $color; } @media(-webkit-mi
border 1px 移动端兼容问题解决方案
@charset &quot;utf-8&quot;; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft { ...
解决移动端border 1像素变2像素问题
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt; &amp;lt;script src=&quot;js/rem.js&quot;&amp;gt;&amp;lt;
实现真正的1px的边框 border
实现真正的1px的边框 border问题 解决的问题是1像素的边框在某些移动设备中会显示过粗,主要原因是设备进行了放大,成为了2px; 解决利用媒体查询和min-device-pixel-ratio 实现
css设置了border-width:1px,却没有边框,原来是这么回事
border-style:solid 否则就没有边框,呵呵
css如何去掉重叠部分的边框
边框border属性是经常会用到的一个属性,它可以给元素添加边框;但两个相邻的元素在一起同时添加了边框,就会出现一个问题,边框会重叠在一起 边框重叠可以分为两种情况,分别为: 1、div,ul等元素盒子设置边框后的重叠问题 2、table表格设置边框后的重叠问题 1、div,ul等元素盒子设置边框后的重叠问题 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; ...
使用css3做0.5px的细线
webapp中的CSS3实现 0.5px的细线 感觉很长时间没写过博客了,最近生活还算稳定,过得较为充实,所以又要开始写写东西了,一个是为了做些记录,是怕自己某一天,忘记了,回头翻翻博客,就会再次的拾起来,记忆,就是这样。 曾看过淘宝,京东,易迅,一号店等等电商的移动端网站,这些大的电商站的共同特点是做的精致,用户体验良好,其中在布局方面 , 0.5px的线看上去就比1px的线看上去要
小程序的小bug(三)--------------------border 1px 在iphone6下显示的问题
不仅仅是小程序  手机端h5均为如此,所以可以采用以下方法//如果是竖线。用个div代替.border { height: 80rpx; width: 0.5px; background-color: #999; align-items: center;}这样就可以了...
前端面试题---HTML部分
一年一度的秋招马上开始了(部分BAT这样的老大已经开始内推了,小伙伴们,快找学长学姐们内推吧):整理了一些面试题及答案;css与js部分之后更新。 ————————————————– HTML1.Doctype作用?严格模式与混杂模式如何区分?它们有何意义? 答:1.是一个标签(Document Type),用来声明标准通用标记语言的文档类型,就是要告诉解析器,应该使用什么样的文档类型定义来解析
实现手机端的1px像素 border的实现
实现1px像素需要知道min-device-pixel-ratio设备像素比。如不清除的情移步了解下张鑫旭大神的设备像素比devicePixelRatio简单介绍 @media (-webkit-device-pixel-ratio: 1.5),(device-pixel-ratio: 1.5) { .border-1px{ &amp;amp;amp;:after{ ...
【CSS】div的border总是显示在整个div的上方
解决方法: 加一个css样式 clear:both;
移动端1px问题border.css
@charset &quot;utf-8&quot;; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft {...
一些网站常见的虚线和边框
一、四边为虚线边框 border:1px dashed #000; 黑色虚线边框 实例: CSS代码: .divcss5{border:1px dashed #000; height:50px;width:350px} Html代码: 我的四边为黑色虚线边框 这里设置边框缩写方式定义divcss5选择器四边边框为1px的黑色虚线边框 二、左边为虚线: CSS代码: .divcss
解决移动端1px线条的显示方式
本文实际上想说的是ios8下 1px解决方案。 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px。由其影响美感。 还好,时代总是进步的。也许很多人都不知道, 现在IOS8下,已经支持0.5px了。 。 那么意味着,在devicePixelRatio = 2下,我们可以使用如下的css代码:
Table 单元格重叠变粗 使用border-collapse:collapse; 可以解决
<br />Table 单元格重叠变粗 使用border-collapse:collapse;  可以解决。对比的HTML如下:<br />       <style><br />            .grid<br />            {<br />            border-collapse: collapse;<br />            }<br />            .grid td<br />            {<br />            bord
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 如何把python学好 java一个班级6个小组