我想弄清楚如何通过仅使用 css 来实现元素底部的跟随边框,并使其尽可能对跨浏览器友好
示例代码,带有标准边框
<div class="object"></div>
.object {
width: 200px;
height: 45px;
background-color: orange;
margin: 20% auto 0 auto;
border-bottom: 5px solid green; /*Needs to be changed to get effect*/
}
最佳答案
给你一个使用一些伪元素和 CSS 边框魔术的例子。请注意,您必须知道父元素的背景颜色才能起作用。使用 :after
这应该是 compatible with IE8+并根据您的要求在旧版浏览器中优雅地回退。
这是通过理解 CSS 方向边框在其方向上以 45° Angular 切割来实现的,以便您能够为不同的边设置不同的样式(例如 border-right
切割 border-top
和 border-bottom
等)。通过巧妙地使用边框属性和位置,您可以创建 Angular 形状效果。
创建一个中心浮雕的 3d 效果不需要任何其他元素,但要小心使用边框。
这样的效果只需要设置border-bottom
为颜色,right
和left
为transparent
.
但是,由于您需要额外的切割,我们使用了一个伪元素,给它一个三 Angular 形并将其重叠在父元素的边界上;通过这种方式,我们可以获得您所需要的。
关于html - 使用css实现浮雕/倾斜/3d边框效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15299070/