今天逛博客网站 -- shoptalkshow,看到这样一个界面,非常有意思:
觉得它的风格很独特,尤其是其中一些边框。
嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样。
border 属性
谈到边框,首先会想到 border
,我们最常用的莫过于 solid
,dashed
,上图中便出现了 dashed
。
除了最常见的 solid
,dashed
,CSS border 还支持 none
,hidden
, dotted
, double
, groove
, ridge
, inset
, outset
等样式。除去 none
,hidden
,看看所有原生支持的 border 的样式:
基础的就这些,如果希望实现一个其他样式的边框,或者给边框加上动画,那就需要配合一些其他属性,或是脑洞大开。OK,一起来看看一些额外的有意思的边框。
边框长度变化
先来个比较简单的,实现一个类似这样的边框效果:
这里其实是借用了元素的两个伪元素。两个伪元素分别只设置上、左边框,下、右边框,通过 hover
时改变两个伪元素的高宽即可。非常好理解。
div {
position: relative;
border: 1px solid #03A9F3;
&::before,
&::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
}
&::before {
top: -5px;
left: -5px;
border-top: 1px solid var(--borderColor);
border-left: 1px solid var(--borderColor);
}
&::after {
right: -5px;
bottom: -5px;
border-bottom: 1px solid var(--borderColor);
border-right: 1px solid var(--borderColor);
}
&:hover::before,
&:hover::after {
width: calc(100% + 9px);
height: calc(100% + 9px);
}
}
复制代码
CodePen Demo -- width border animation
接下来,会开始加深一些难度。
虚线边框动画
使用 dashed
关键字,可以方便的创建虚线边框。
div {
border: 1px dashed #333;
}
复制代码
当然,我们的目的是让边框能够动起来。使用 dashed
关键字是没有办法的。但是实现虚线的方式在 CSS 中有很多种,譬如渐变就是一种很好的方式:
div {
background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
background-size: 4px 1px;
background-position: 0 0;
}
复制代码
看看,使用渐变模拟的虚线如下:
好,渐变支持多重渐变,我们把容器的 4 个边都用渐变表示即可:
div {
background:
linear-gradient(90deg, #3