点击哪个临近的两个元素就会有圆角这种效果要用js控制吗

楼上已经给出了使用 JS 的方案，这个问题用 CSS 实际上也可以解决，但是实现比较繁琐，而且如果列表是使用表格实现的话，这套思路是行不通的，所以不保证实际效果，大致思路如下: 给列表的每一项都加上圆角、阴影、背景色，给定位为 relative ；给每一项加上负值 margin-top ，使其恰好遮盖上一项的底部圆角和阴影；给每一项加一个绝对定位的 ::before 伪元素，设其宽高和位置，遮盖本项的顶部圆角和阴影；使用伪类选择器 :active 给每一项添加点击响应，被鼠标“按下” 的时候该项的 z-index 设为负值，这样就会显示出前一项的圆角和阴影，使用兄弟选择器 + 选择后面一项，并隐藏其 ::before 伪元素，以显示其圆角和阴影。当然，实际应用中，通常不希望鼠标松开就恢复原状，所以还要配合一个隐藏的 input[type=radio] 来实现选中效果，所以实现相当繁琐，不如使用 JS 来得直接和快速。

这种元素模块交界的地方的border-radius效果怎么做？

Fractal

5.5k22331

发布于
2020-09-11

更新于
2020-09-11

✓ 已被采纳

纯 CSS 方案
上左下的阴影可以再套一个DIV，overflow:hidden 去掉
还有一点点的瑕疵

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Title</title>  
 <style type="text/css">  
 .nav {box-shadow:0 0 5px 0 #000;}  
    .nav .item {position:relative;height:3em;line-height:3em;text-align:center;border-radius:0.5em;}  
    .nav .item.active {margin-right:-5px;background-color:#FFF;}  
    .nav .item.active:before {content:'200B';position:absolute;width:100%;height:1em;top:-0.5em;left:-5px;border-bottom-right-radius:0.5em;background-color:transparent;box-shadow:5px 5px 5px -5px #000;}  
    .nav .item.active:after {content:'200B';position:absolute;width:100%;height:1em;bottom:-0.5em;left:-5px;border-top-right-radius:0.5em;background-color:transparent;box-shadow:5px -5px 5px -5px #000;}  
    </style>  
</head>  
<body>  
<div class="nav">  
 <div class="item">精选推荐</div>  
 <div class="item">保健品</div>  
 <div class="item active">男装</div>  
 <div class="item">女装</div>  
 <div class="item">童装</div>  
</div>  
</body>  
</html>

linong

29.2k1163128

发布于
2020-09-11

通过js给前后增加一个class吧。单纯的css 只能控制后面的、子级的

http://jsrun.net/KBLKp/edit

易函123

1.2k2622

发布于
2020-09-11

箭头位置没看到圆角

薛浮生

7224728

发布于
2020-09-11

更新于
2020-09-11

你是说的图片的圆角吗。
第一个

中间的

最终完善(有借鉴楼下一位老哥)

君迹我心

5.1k41927

发布于
2020-09-11

楼上已经给出了使用 JS 的方案，这个问题用 CSS 实际上也可以解决，但是实现比较繁琐，而且如果列表是使用表格实现的话，这套思路是行不通的，所以不保证实际效果，大致思路如下:

给列表的每一项都加上圆角、阴影、背景色，给定位为 relative；
给每一项加上负值 margin-top，使其恰好遮盖上一项的底部圆角和阴影；
给每一项加一个绝对定位的 ::before 伪元素，设其宽高和位置，遮盖本项的顶部圆角和阴影；
使用伪类选择器 :active 给每一项添加点击响应，被鼠标“按下” 的时候该项的 z-index 设为负值，这样就会显示出前一项的圆角和阴影，使用兄弟选择器 + 选择后面一项，并隐藏其 ::before 伪元素，以显示其圆角和阴影。

当然，实际应用中，通常不希望鼠标松开就恢复原状，所以还要配合一个隐藏的 input[type=radio] 来实现选中效果，所以实现相当繁琐，不如使用 JS 来得直接和快速。

zangeci

14.8k71731

发布于
2020-09-11

jsbin
不是很完美优雅，期待有人给出一个完美方案

这种元素模块交界的地方的border-radius效果怎么做？

最终完善(有借鉴楼下一位老哥)

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

如何在浏览器开发者工具中导入本地JS文件并直接运行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？