css - CSS 边框和动画

Question

在此处输入图像描述

<div id="parent">
<div id="left"></div>
<div id="right></div>
</div>

和CSS：

#left{
border-right:solid 1px black;
border-bottom-right-radius:10px;
}
#right
{
border-top:solid 1px black;
border-top-left-radius:10px;
}

这就是我在页面上的边框的样子，但我不知道如何摆脱顶部的那个东西，右 div 的左上角的边框半径设置为 10px，左 div 的右下角设置为相同的数量. 现在的问题是它们之间的边界，它由左 div 和在我不希望它被看到的顶部保留一个小棍子，我该如何摆脱这个？

第二：尝试css3动画，一旦它一直运行（我正在改变悬停时的宽度）它会跳回原来的......我怎样才能让它改变宽度，但只有在鼠标关了？动画代码：

@keyframes btn
{
0%{width:80%}
1000%{width:100%}
}
@-webkit-keyframes btn
{
0%{width:80%}
100%{width:100%}
}
.button:hover
{
animation:btn 1s;
}

score 0 · Accepted Answer

部分解决方案是将左侧 div 向下移动 10 个像素，方法是为其设置与边框半径相同大小的上边距。

margin-top:10px;

但是，如果这样做，右侧 div 的圆角会出现问题：它从顶部开始为 1 像素宽，但向左缩小到 0 像素宽，因为左边框宽度为 0。

解决方案：也给右 div 一个左边框。然后将整个事物向左移动 1 个像素，使边界重叠（否则，边界将并排）。

border-left:solid 1px black;
position:relative; left:-1px;

1 回答 1