在保留边框半径的同时，扩展盒子的各种方法

我最近注意到Codepen的一个有趣的变化：在悬停在主页上的笔时，有一个矩形，后面有圆角。

作为我的好奇生物，我必须检查一下这是如何工作的！事实证明，后面的矩形绝对位置：伪元素之后。

ON：悬停，其偏移被覆盖，并结合过渡，我们获得了扩展的框效果。

右属性在初始和悬停规则集中都具有相同的值（-1REM），因此不需要覆盖它，但是所有其他偏移都在2rem向外移动（从1REM到-1REM到-1REM到-1REM到顶部和左侧偏移，从-1REM到-1REM，从-1REM到-3REM到-3REM to -3Rem for -tost OffeT of tost ofert ofst offeT over the Bosteal）

在这里要注意的一件事是，伪元素的边界是10px之后的::，随着它的扩展，它被保留。这使我想到了我们在保留边界 - 拉迪乌斯（Border-Radius）的同时，我们采用了什么方法来扩展/收缩（伪）。你能想到多少？让我知道您是否有下面尚未包括的想法，我们可以查看很多选择，并查看哪种情况最适合什么情况。

更换偏移

这是在Codepen上使用的方法，由于多种原因，它在这种特殊情况下非常有效。首先，它有很大的支持。当扩展（伪）元素响应迅速，没有固定尺寸，并且其扩展的量为固定的数量（rem值）时，它也起作用。它还可以在两个以上的方向上扩展（在此特定情况下，顶部，底部和左侧）。

但是，我们需要注意一些警告。

首先，我们扩展的元素不能具有位置：静态。在CodePen用例的上下文中，这不是问题，因为:: pseudo-element之后需要绝对放置，以便将其放置在此父母的其余内容下。

其次，与偏移动画（通常，都会对任何影响布局的属性进行动画范围，从而使用框属性来偏移，边距，边框宽度，桨板或尺寸的属性）会对性能产生负面影响。同样，这不是关注的问题，我们只有一点过渡：悬停，没什么大不了的。

改变尺寸

我们可以更改尺寸，而不是更改偏移。但是，如果我们希望我们（伪 - ）元素扩展到两个方向，则这是一种有效的方法。否则，我们也需要更改偏移。为了更好地理解这一点，让我们考虑使用Codepen的情况，在该情况下，我们希望我们的::伪元素在三个方向（顶部，底部和左）扩展。

相关的初始尺寸信息如下：

 .single-item :: after {
  顶部：1REM;
  右：-1REM;
  底部：-1REM;
  左：1REM;
}

由于相反的偏移量（顶部 - 底部和左 - 右对）相互取消（1REM -1REM = 0），因此会导致伪元素的尺寸等于其父母的尺寸（或父母尺寸的100％）。

因此，我们可以重写以上内容为：

 .single-item :: after {
  顶部：1REM;
  右：-1REM;
  宽度：100％；
  身高：100％；
}

ON：悬停，我们将宽度向左增加2rem，而高度则增加4REM，将2REM和2REM和2REM增加到底部。但是，只是写：

 .single-item :: after {
  宽度：计算（100％2REM）;
  高度：计算（100％4REM）;
}

…还不够，因为这会使高度向下增加4REM，而不是将其增加2REM向上和2REM向下增加。以下演示说明了这一点（放在：专注于或悬停在项目上，以查看伪元素后的::如何扩展）：

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

我们还需要更新顶级属性以获得理想的效果：

 .single-item :: after {
  顶部：-1REM;
  宽度：计算（100％2REM）;
  高度：计算（100％4REM）;
}

可以在下面看到的，有效的是：

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

但是，老实说，这比单独改变偏移量不太理想。

但是，在不同种类的情况下，改变尺寸是一个很好的解决方案，例如，当我们想拥有一些带有圆角的杆时，它们会朝着一个方向扩展/收缩。

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

请注意，如果我们没有圆角可以保存，那么更好的解决方案是通过转换属性使用方向缩放。

更改填充/边界宽度

类似于改变尺寸，我们可以更改填充或边界宽度（对于透明的边界）。请注意，就像更改尺寸一样，如果在超过两个维度上扩展框，我们也需要更新偏移量：

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

在上面的演示中，粉红色的盒子表示假元素之后的::的内容框，并且您可以看到它保持相同的大小，这对于这种方法很重要。

为了理解为什么重要的原因，请考虑其他限制：我们还需要将两个偏移量加上宽度和高度定义的框尺寸，而不是使用所有四个偏移。这是因为只有在使用四个偏移而不是两个加宽度和高度的情况下，填充/边界宽度才会向内增长。

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

出于同样的原因，我们无法在伪元素之后的boxsing signssing：border-box上。

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

尽管存在这些局限性，但如果我们的扩展（伪 - ）元素具有我们不想看到的文本内容，则该方法可能会派上用场：如下笔所示，悬停在其中，前两个示例会更改偏移/尺寸，而最后两个更改paddings/ border宽度：

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

更改边距

使用此方法，我们首先将偏移设置为：悬停状态值和余额以补偿并为我们提供初始状态大小：

 .single-item :: after {
  顶部：-1REM;
  右：-1REM;
  底部：-3REM;
  左：-1REM;
  边距：2REM 0 2REM 2REM;
}

然后，我们为此空间为零：悬停：

 .single-item：hover :: after {margin：0} 

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

这是另一种适合Codepen情况的方法，尽管我真的不能想到其他用例。另请注意，就像更改偏移或尺寸一样，此方法会影响内容框的大小，因此我们可能会移动和重新排列的任何文本内容。

更改字体大小

这可能是最棘手的，并且有很多局限性，其中最重要的是我们不能在扩展/收缩的实际（伪 - ）元素上具有文本内容 - 但这是在Codepen情况下可以很好地工作的另一种方法。

另外，字体尺寸本身并没有任何事情可以使盒子扩展或收缩。我们需要将其与先前讨论的属性之一相结合。

例如，我们可以将字体大小设置为::之后等于1REM，将偏移设置为扩展的情况，并设置与扩展的和初始状态之间的差异相对应的EM边距。

 .single-item :: after {
  顶部：-1REM;
  右：-1REM;
  底部：-3REM;
  左：-1REM;
  边距：2EM 0 2EM 2EM;
  字体大小：1REM;
}

然后，开：悬停，我们将字体大小提高到0：

 .Single-item：Hover :: after {font-size：0} 

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

我们还可以将字体大小与偏移量一起使用，尽管它变得更加复杂：

 .single-item :: after {
  顶部：calc（2em -1REM）;
  右：-1REM;
  底部：计算（2em -3REM）;
  左：calc（2em -1REM）;
  字体大小：1REM;
}

.Single-item：Hover :: after {font-size：0}

尽管如此，重要的是它起作用，如下所示：

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

将字体大小与尺寸结合起来甚至更容易发生，因为我们还需要更改垂直偏移值：悬停在所有内容之上：

 .single-item :: after {
  顶部：1REM;
  右：-1REM;
  宽度：计算（100％2EM）;
  高度：计算（100％4EM）;
  字体大小：0;
}

。
  顶部：-1REM;
  字体大小：1REM
}

哦，嗯，​​至少它有效：

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

同样的事情也适用于填充/边框宽度的字体大小：

 .single-item :: after {
  顶部：1REM;
  右：-1REM;
  宽度：100％；
  身高：100％；
  字体大小：0;
}

。
  填充：2EM 0 2EM 2EM;
}

。
  边界：实心0透明；
  边缘宽度：2EM 0 2EM 2EM;
}

。
  顶部：-1REM;
  字体大小：1REM;
} 

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

变化规模

如果您阅读了有关动画性能的文章，那么您可能已经阅读了动画变换，而不是影响布局的属性，例如偏移，保证金，边框，边框，桨，尺寸，尺寸 - 几乎是我们到目前为止使用的！

这里突出的第一个问题是，缩放元素还缩放了其角舍入，如下所示：

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

我们可以通过以另一种方式缩放边界拉迪乌斯来解决这个问题。

假设我们沿X轴和沿Y轴的因子$ fx扩展了一个因子$ fx，我们希望将其边界-radius保持在恒定值$ r。

这意味着我们还需要将$ R除以每个轴的相应缩放系数。

 Border-Radius：＃{$ r/$ fx}/＃{$ r/$ fy};
变换：比例尺（$ fx，$ fy） 

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

但是，请注意，使用这种方法，我们需要使用缩放因素，而不是在此或该方向上扩展（伪 - ）元素的数量。从尺寸和扩展量中获取缩放因素是可能的，但前提是它们以它们之间具有一定固定关系的单位表示。由于1英寸始终是96px，预处理程序可以混合或PX之类的单位，但由于缺乏上下文，他们无法解析PX中的1em或1％或1Vmin或1ch。 calc（）也不是解决方案，因为它不允许我们将长度值除以其他长度值以获得无单位比例因子。

这就是为什么在Codepen情况下，缩放不是解决方案的原因，在codepen情况下，:: box的尺寸取决于视口，同时又扩展了固定的REM量。

但是，如果给出了规模的数量，或者我们可以轻松地计算它，则可以考虑使用，尤其是因为制作缩放因子自定义属性，然后使用一些Houdini Magic进行动画化，可以极大地简化我们的代码。

 border-radius：calc（＃{$ r}/var（-fx））/calc（＃{$ r}/var（ -  fy））;
变换：比例尺（var（-fx），var（-fy））

请注意，Houdini仅在启用实验Web Platform特征标志的Chromium浏览器中工作。

例如，我们可以创建此瓷砖网格动画：

方瓷砖具有边缘长度$ l，并且有$ k*$ l的角圆形：

 .tile {
  宽度：$ L；
  身高：$ L；
  border-radius：calc（＃{$ r}/var（-fx））/calc（＃{$ r}/var（ -  fy））;
  变换：比例尺（var（-fx），var（-fy））
}

我们注册了我们的两个自定义属性：

 CSS.RegisterProperty（{
  名称：' -  fx'， 
  语法：''， 
  初始值：1， 
  继承：false
}）;

CSS.RegisterProperty（{
  名称：' -  -fy'， 
  语法：''， 
  初始值：1， 
  继承：false
}）;

然后我们可以使它们动画：

 .tile {
  / *与以前相同 */
  动画：$ t无限的轻松替代品；
  动画名称：FX，FY；
}

@keyframes fx {
  0％，35％{-fx：1}
  50％，100％{-fx：＃{2*$ k}}}
}

@keyframes fy {
  0％，35％{ -  -FY：1}
  50％，100％{ -  -fy：＃{2*$ k}}}
}

最后，根据水平（-i）和垂直（ - J）网格索引，我们添加了一个延迟，以创建交错的动画效果：

动画 - 延迟： 
  calc（（var（-i）var（-m）-v var（-j））*＃{$ t}/（2*var（-m）） - ＃{$ t}）， 
  calc（（var（-i）var（-m）-var（-j））*＃{$ t}/（2*var（-m）） - ＃{1.5*$ t}）

另一个示例是以下一个，其中借助伪元素创建点：

由于伪元素与父母一起缩放，因此我们还需要扭转对他们的缩放变换：

 。长钉 {
  / *其他尖峰样式 */
  变换：var（ - 位置）scalex（var（-fx））;

  ＆::之前，＆:: efter {
    / *其他伪样式 */
    变换：scalex（calc（1/var（-fx）））;
  }
}

更改…剪贴路径？

这是我非常喜欢的一种方法，即使它削减了牙质优势和Internet Explorer的支持。

几乎所有的用法示例示例都具有polygon（）值或SVG参考值。但是，如果您已经看过我以前的一些文章，那么您可能知道我们可以使用其他基本形状，例如Intet（），如下所示：

因此，为了使用此方法重现Codepen效应，我们将:: ::设置为偏移到扩展的状态值之后，然后在剪辑路径的帮助下删除我们不想看到的内容：

 .single-item :: after {
  顶部：-1REM;
  右：-1REM;
  底部：-3em;
  左：-1EM;
  剪辑路径：插图（2REM 0 2REM 2REM）
}

然后，在：悬停状态下，我们将所有插图归零：

 。
  剪辑路径：插图（0）
}

这可以在下面的行动中看到：

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

好吧，这有效，但我们也需要一个圆形的圆形。幸运的是，inset（）也可以让我们将其指定为我们可能希望的边界 - 拉迪乌斯价值。

在这里，沿两个方向的所有角落都有一个10px。

 .single-item :: after {
  / *与以前相同的样式 */
  剪辑路径：插图（2REM 0 2REM 2REM圆形10PX）
}

。
  剪辑路径：插图（0回合10px）
}

这为我们提供了我们所要做的事情：

请参阅Codepen上的thebabydino（@TheBabydino）的笔。

此外，它并没有真正破坏不支持的浏览器，它总是保持在扩展状态。

但是，尽管这是适合多种情况（包括Codepen用例）非常有用的方法，但当我们的扩展/收缩元素具有后代的后代，它不起作用，这些后代可以超出其剪切的父母的边框盒子，因为对于先前讨论的缩放方法给出的最后一个示例就是这种情况。

以上是在保留边框半径的同时，扩展盒子的各种方法的详细内容。更多信息请关注PHP中文网其他相关文章！