在本文中 。我将介绍以下两者之间的区别:
border
outline
box-shadow
我们还将讨论您何时可以使用另一种方法 。
css Box模型复习这三种边框方法之间的一个关键区别是它们放置在元素的位置以及它们如何影响元素的维度 。这种行为是由CSS box模型控制的 。
文章插图
文章插图
border 正是元素的边界 。位于其padding和margin之间 。它的宽度将影响计算出的元素尺寸 。
outline 在边框旁边但在边框之外 。与 box-shadow 和 margin 重叠 。但不影响元素的尺寸 。
默认情况下 。box-shadow 从边框的边缘向外延伸 。覆盖定义方向的空间量 。也不会影响元素的尺寸 。
border 语法和用法自网络诞生之初 。边框就已经成为设计的标准 。
与我们将要介绍的其他两种方法相比 。一个重要的区别是 。默认情况下 。border 包含在元素的计算尺寸中 。即使您设置 box-sizing:border-box 。border 仍然会计入计算中 。
Border 最基本的语法定义了边框的宽度和样式:
border:3pxsolid;如果未定义则默认颜色为 currentColor 。这意味着它将在级联中使用最接近的颜色定义 。
但 border 有更多的样式可供选择 。如果你愿意 。使用 border-style 你可以为每一面定义不同的样式 。
何时使用 border
当元素的尺寸允许样式计算时 。border 是一个可靠的选择(双关语) 。默认样式给了设计很大的灵活性 。
outline 语法和用法对于outline 。使其可见的唯一必需属性是提供一种样式 。因为默认值为 none:
outline:solid;和border一样 。它将通过 currentColor 获得颜色 。它的默认宽度为 medium 。
outline 的典型应用是通过本机浏览器样式对 :focus 元素(如链接和按钮)进行聚焦 。
除非您能够提供符合WCAG Success Criterion 2.4.7 Focus Visible的自定义 :focus 样式 。否则应该允许发生这种特定的应用 。以达到无障碍的目的 。
出于设计目的 。通常要注意的 outline 问题是它无法从任何 border-radius 样式继承曲线 。
何时使用 outline
当您不想影响元素的尺寸并且不需要其遵循 border-radius 时 。可以使用outline线 。
box-shadow 语法和用法box-shadow 的最低要求属性是 x 和 y 轴的值以及颜色:
box-shadow:5px8pxblack;可以选择添加第三个参数 blur 来制造模糊 。第四个参数 spread 来添加模糊扩散程度 。
要使用它来创建边框 。我们将 x 轴和 y 轴的值以及 blur 都设置为 0。然后为spread设置一个正数 。
box-shadow:0003pxblue;这将在元素周围创建边框的外观 。甚至可以遵循所应用的 border-radius:
文章插图
文章插图
何时使用box-shadow
您可能更喜欢 box-shadow 。特别是当您想为边框设置动画而不引起布局偏移时 。下一节将演示这种情况的示例 。
而且由于 box-shadow可以分层 。所以它是一个全能的好工具 。要了解它来增强你的布局 。
但是 。它将无法完全模仿 border 和 outline 提供的某些样式 。
放在一起以下是一些可能需要使用 border 替代的实际情况 。
按钮边框当为有边框和无边框的按钮提供样式时 。真实的 border 成为一个常见的问题 。以及它们排列在一起的场景 。
文章插图
文章插图
典型的解决方案通常是将无边框按钮的尺寸增加到等于 border-width 的大小
利用我们的新知识 。另一种解决方案是使用 box-shadow 与 inset 关键字一起 。将伪边框视觉上置于按钮内 。
文章插图
文章插图
请注意 。你的 padding 必须大于 border-width 。以防止文本内容的重叠 。
另外 。也许您想在 :hover 或 :focus 上添加边框 。
使用真实的边框 。你会从布局转变中产生不理想的视觉跳跃 。因为边框会短暂地增加这些状态下的尺寸 。
文章插图
文章插图
在这种情况下 。我们可以使用 box-shadow 来创建伪边框 。这样就不会增加真实的尺寸 。另外我们还可以使用 transition 对其进行动画处理 。
文章插图
文章插图
这是上述示例的简化代码:
推荐阅读
- 中国古代防御力最强的盔甲是什么?
- 古代将军都穿的威风凛凛的铠甲打仗,不怕被敌方针对吗?
- cf汤姆逊烈龙怎么获得 汤姆逊烈龙获取途径和属性介绍
- 钢铁侠为什么不用振金做战甲?
- 比较好玩的单机小游戏 安卓耐玩的单机游戏推荐
- 有什么好的乒乓球拍和胶皮推荐?
- 《热血传奇》中什么衣服搭配起来最好看?
- 台式电脑没有声音了怎么恢复 电脑没声音插了耳机也没声音
- 乒乓球哪个牌子好?