本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01前端样式框架-web前端开发软件工具推荐

外框长短转变

使我们从一个更简易的逐渐，完成那样的外框实际效果:

事实上，这里有2个从原素拿来的伪元素。2个虚似原素各自只设定了上外框和左外框，下外框和右侧框，根据悬停时能够设定2个虚似原素的相对高度和总宽。非常好了解。

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); }}

下面，它将逐渐加重一些艰难。

斜线外框动漫

应用斜线关键词，您能够轻轻松松建立斜线外框。

div { border: 1px dashed #333;}自然，大家的总体目标是让架构挪动。没有办法应用斜线关键词。可是，在CSS中完成斜线的办法有很多，例如渐变色便是一个有效的方式:

div { background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x; background-size: 4px 1px; background-position: 0 0;}

看，用渐变色仿真模拟的斜线如下所示:

好的，渐变色适用好几个渐变色，因此大家可以用渐变色来表明器皿的全部四个边:

div { background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x, linear-gradient(90deg, #333 50%, transparent 0) repeat-x, linear-gradient(0deg, #333 50%, transparent 0) repeat-y, linear-gradient(0deg, #333 50%, transparent 0) repeat-y; background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px; background-position: 0 0, 0 100%, 0 0, 100% 0;}

实际效果如下所示:

好啦，到此，大家的斜线外框动漫事实上早已完成了一大半。尽管外框款式:斜线不兼容动漫，渐变色适用。大家在上面的div中加上一个悬停实际效果，在悬停时加上一个动漫，并变更原素的环境部位。

div:hover { animation: linearGradientMove .3s infinite linear;}@keyframes linearGradientMove { 100% { background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px; }}

好，看实际效果。当悬停上升，帧会挪动，由于全部动漫是首尾相接的，不断循环的动漫看上去如同虚线条一直在挪动。这是一个小盲者或是一个小把戏:

这里有另一个方法，如果我们期待斜线外框动漫从别的外框衔接到斜线外框，随后再次动漫。还可以彻底用梯度方向来仿真模拟。假如你要储存一些编码，应用外框会迅速，例如那样:

div { border: 1px solid #333; &:hover { border: none; background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x, linear-gradient(90deg, #333 50%, transparent 0) repeat-x, linear-gradient(0deg, #333 50%, transparent 0) repeat-y, linear-gradient(0deg, #333 50%, transparent 0) repeat-y; background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px; background-position: 0 0, 0 100%, 0 0, 100% 0; }}

因为外框和环境在盒子模型上的部位不一样，视觉效果上面有显著的错乱感:

为了更好地彻底解决这个问题，大家可以用轮廊替代外框，由于轮廊能够设定轮廊偏位。你能极致地处理这个问题:

div { outline: 1px solid #333; outline-offset: -1px; &:hover { outline: none; }}

最终，看一下运用于具体按键的实际效果:

实际上由于环境和外框的特殊关系，在应用外框的情况下，能够根据改动环境-部位来处理，也就是较为曲折。

渐变色的别的奇特主要用途。

由浅入深，不但可以做到以上实际效果。

大家再次深层次发掘渐变色，并应用它来完成那样的环境:

div { position: relative; &::after { content: ''; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background-repeat: no-repeat; background-size: 50% 50%, 50% 50%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5); }}

留意这儿用的是原素的伪元素转化成的这一图，总宽和相对高度全是父原素的200%，外溢:超出就掩藏。

下面，给它加上一个转动:

div { animation: rotate 4s linear infinite;}@keyframes rotate { 100% { transform: rotate(1turn); }}

看实际效果:

最终用一个假的属性来挡住正中间，便会出去一个Nice的帧动画(动漫中会发生透明色的原素，便捷了解基本原理):

变更渐变色的色调。

把握之上基本上方法后，我们可以对渐变色的色彩做一些调节。大家将把四种色调变为一种色调:

div::after { content: ''; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background-color: #fff; background-repeat: no-repeat; background-size: 50% 50%; background-position: 0 0; background-image: linear-gradient(#399953, #399953);}

获得如下图:

一样，让它一起转动，便会出去一个纯色追帧动画:

哇，真好看。可是如果是单线铁路，就有一个显著的缺点，便是帧尾是一个小三角形，而不是竖直三角形，很有可能也有一些情景对PM不适合或是不能接纳。

有什么办法能够清除这种小三角形？是的，在下面，大家将详细介绍一种应用剪裁途径清除这种小三角形的方式。

视频剪辑途径的用途

是老友的夹道，有意思的事它始终不容易缺阵。

视频剪辑途径自身能够动漫座标点，并从一个视频剪辑样子变换到另一个视频剪辑样子。

拥有这一特点，大家就可以恰当地完成那样的外框追随实际效果。伪代码如下所示:

div { position: relative; &::before { content: "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid gold; animation: clippath 3s infinite linear; }}@keyframes clippath { 0%, 100% { clip-path: inset(0 0 95% 0); } 25% { clip-path: inset(0 95% 0 0); } 50% { clip-path: inset(95% 0 0 0); } 75% { clip-path: inset(0 0 0 95%); }}

设计效果图和平面图:

在这儿，由于原素会被裁切，因此假原素能够做为裁切和动漫的环境，而且运用了视频剪辑途径的优点，因此裁切的外框不容易造成小三角形。与此同时，该方式还适用圆弧外框半经。

如果我们应用另一个伪元素并具体完成一个按钮样式，我们可以获得如下实际效果:

边框图像的用途

如果我们有那样一张照片:

您还可以应用外框-图象-切成片和外框-图象-反复的特色来得到差不多的边框图案:

div { width: 200px; height: 120px; border: 24px solid; border-image: url(image-url); border-image-slice: 32; border-image-repeat: round;}

在这个基础上，您还可以随便变更原素的相对高度和总宽，便于它能够扩大到一切尺寸的器皿架构: