我几乎在网站的页脚处有一个“返回顶部”箭头，并且该 div 有一个底部边框。到目前为止一切都很好，我唯一的问题是我想删除我用 CSS 做的那个三角形周围的任何边框，没有边框底部，因为它看起来很难看..
我尝试更改内部 div 的边框底部，但它没有用
问问题
102 次
3 回答
2
只要您要求“破解”，那么可以：只需在 HTML 中添加另一个 div:before和:after伪元素。将border-bottom 移到这些元素上，并赋予它们看起来正确的宽度。
当然，这需要一个没有语义值的额外 HTML 元素——尽管将所有这三个内容 div 包装在另一个中是有意义的，您可以向其中添加属性。
嵌套或多个伪元素，如果它们被支持，将是一个更好的方法。
不幸的是，仅仅为 :before 和 :after 样式添加一个底部边框是行不通的（它们仍然会延伸太远），因为 CSS 边框的呈现方式——看到这会使边框更厚并且颜色不同. 这个问题的答案也说明了这一点。
于 2012-07-08T01:49:54.210 回答
1
我不确定我是否完全理解这个问题，因为它对我来说看起来相当简单。
如果您要省略 div 的border-bottom: 1px solid #c6c5c5样式#backtotop，这将解决问题 - 不是吗？
另一种方法是更改箭头元素，使其成为一个完整的图像，而不是你正在做的::beforeand元素。::after但是你需要匹配图案背景。
我没有看到另一种方式，尤其是可以在多个浏览器中使用的方式。
于 2012-07-08T00:51:40.600 回答
1
看来您的箭头是<a>具有 CSS 背景的标签。
到目前为止一切都很好，我唯一的问题是我想删除我用 CSS 做的那个三角形周围的任何边框，没有边框底部，因为它看起来很难看..
在 Chrome 中检查后，没有应用边框底部。事实上，它是一个绝对定位的元素，所以边框不能作为间距提供者。只需top稍微调整一下您的属性（可能是 6px 或 9px），您的定位就应该完美了。
于 2012-07-08T00:57:24.930 回答