纯css实现动态边框的示例代码(2)

/*CSS*/ .exammple { transition: ease-in .3s; background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat, linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat, linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat, linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat; background-size: 0 2px, 2px 0, 0 2px, 2px 0; background-position: left top, right top, right bottom, left bottom; } .exammple:hover { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }

现在我们已经按要求实现了交互效果。

总结

相比border属性，用background的模拟边框存在以下的优势和劣势

优势 劣势
可以控制宽高，渐变色，运动方向等，灵活多变，能实现很多border不能实现的效果，并且不用添加额外的元素   不能实现border圆角  

需要注意的是 background模拟的边框不等同于真正的边框，是不占用边框的宽高的，计算盒子模型时要留心

最后

由于CSS3对背景属性的进一步丰富，利用CSS3的多背景可以实现很多以前必须借助js或图片才能实现的效果，比如半透明背景、几何图案背景、条纹背景等，期待和大家一块儿去探索CSS的奥秘。

（编辑：ASP站长网）