CSS，设置两个DIV相交处出现虚线边框。如图效果。

时间：2022-09-25 05:32:25
CSS，设置两个DIV相交处出现虚线边框。如图效果。

如图效果

两个项目相交，中间才会出现虚线，否则不出现虚线，这种效果怎么用CSS写？


——我想使用AJAX读取出项目后直接套用CSS列出来，而不经过判断是否是在边界的项目。

12 个解决方案

#1

该回复于2015-05-26 11:34:11被管理员删除

#2

呃……
我还以为有人回答了，害我贼激动……

#3

图呢？

#4

设置单侧边框 隐藏多余的

#5

怎么隐藏捏？
是不是在外面设置
我突然想到一个办法，求证实：
CSS，设置两个DIV相交处出现虚线边框。如图效果。

#6

很多单线框就是这样实现的.


.list {width:795px; padding:1 0 0 0px; border:1px solid #00f; margin:0 0 0 0px;}
.list li {width:100px; float:left; border:1px solid #f00; margin:-1 -1 0 0px;}

#7

border-style:dotted;
border:

#8

你可以设置上下左右哪个方向的border-style的不同类型，和不同宽度，综合一下就可以了.

#9

引用 8 楼 only_endure 的回复:
你可以设置上下左右哪个方向的border-style的不同类型，和不同宽度，综合一下就可以了.


但是不是每个项目的边框都是一样的
比如统一使用右侧、下方有边框
但是，第一行的最右边的只有下方有边框
而第二行除了最后一个只有右侧有边框

#10

引用 6 楼 mrshelly 的回复:
很多单线框就是这样实现的. 


.list {width:795px; padding:1 0 0 0px; border:1px solid #00f; margin:0 0 0 0px;} 
.list li {width:100px; float:left; border:1px solid #f00; margin:-1 -1 0 0px;} 


能给个简单点的示例吗……谢谢~~:-P

#11




<style>

.list {width:305px; padding:-1 0 0 -1px; border:0px solid #00f; margin:0 0 0 0px;} 

.list li {width:100px; float:left; border-left:1px dotted #f00; border-top:1px dotted #f00; margin:-1 0 0 -1px;} 

</style>


<div class="list">

	<li> 1 </li>

	<li> 2 </li>

	<li> 3 </li>

	<li> 4 </li>

	<li> 5 </li>

	<li> 6 </li>

	<li> 7 </li>

	<li> 8 </li>

	<li> 9 </li>

</div>

#12

谢谢
楼上的可以

#1

该回复于2015-05-26 11:34:11被管理员删除

#2

呃……
我还以为有人回答了，害我贼激动……

#3

图呢？

#4

设置单侧边框 隐藏多余的

#5

怎么隐藏捏？
是不是在外面设置
我突然想到一个办法，求证实：
CSS，设置两个DIV相交处出现虚线边框。如图效果。

#6

很多单线框就是这样实现的.


.list {width:795px; padding:1 0 0 0px; border:1px solid #00f; margin:0 0 0 0px;}
.list li {width:100px; float:left; border:1px solid #f00; margin:-1 -1 0 0px;}

#7

border-style:dotted;
border:

#8

你可以设置上下左右哪个方向的border-style的不同类型，和不同宽度，综合一下就可以了.

#9

引用 8 楼 only_endure 的回复:
你可以设置上下左右哪个方向的border-style的不同类型，和不同宽度，综合一下就可以了.


但是不是每个项目的边框都是一样的
比如统一使用右侧、下方有边框
但是，第一行的最右边的只有下方有边框
而第二行除了最后一个只有右侧有边框

#10

引用 6 楼 mrshelly 的回复:
很多单线框就是这样实现的. 


.list {width:795px; padding:1 0 0 0px; border:1px solid #00f; margin:0 0 0 0px;} 
.list li {width:100px; float:left; border:1px solid #f00; margin:-1 -1 0 0px;} 


能给个简单点的示例吗……谢谢~~:-P

#11




<style>

.list {width:305px; padding:-1 0 0 -1px; border:0px solid #00f; margin:0 0 0 0px;} 

.list li {width:100px; float:left; border-left:1px dotted #f00; border-top:1px dotted #f00; margin:-1 0 0 -1px;} 

</style>


<div class="list">

	<li> 1 </li>

	<li> 2 </li>

	<li> 3 </li>

	<li> 4 </li>

	<li> 5 </li>

	<li> 6 </li>

	<li> 7 </li>

	<li> 8 </li>

	<li> 9 </li>

</div>

#12

谢谢
楼上的可以
标签：

相关文章