边框回顾

正如你将在课程中看到的，元素有一个边缘，舒适地位于元素的填充和边缘之间。 默认情况下，边框的大小为0 - 使其不可见 - 但您可以设置边框的厚度，样式和颜色使其显示。

边框速记

通过 border 速记属性，您可以设置所有这些 同时在所有四边，例如:

<p>I have a red border!</p>

p {
  padding: 10px;
  background: yellow;
  border: 2px solid red;
}

Longhand选项

border 可以细分为许多不同的longhand属性，用于更具体的样式需求:

• border-top, border-right, border-bottom, border-left: Set the thickness, style and color of one side of the border.
• border-width, border-style, border-color: Set only the thickness, style, or color individually, but for all four sides of the border.
• You can also set one of the three properties of a single side of the border individually, using border-top-width, border-top-style, border-top-color, etc. 

你可能会想知道为什么会有这么多longhand选项 - 好吧，它是有用的，让你可以覆盖或关闭单个的样式设置的必要，而不必不断地重新定义一切; 它可以从长远来看为你节省很多代码。 它也是值得知道的边框默认情况下的文本的颜色，宽度为3px，当没有明确设置的值。

考虑到这一点，让我们看一个虚构书的写作进度计划器的例子。 每个章节都由 < div> >元素，其设置为固定宽度并包含章节编号和标题。 写入进度由以下键指示:

• Not started/incomplete chapters are marked by a dotted border.
• Chapters that have been written but need reviewing are marked by a dashed border.
• Chapters that are complete (written and reviewed) are marked by a solid border.
• Chapters that are in the process of being written or reviewed are marked by a thick red solid bottom border.

让我们来看看我们可以用来实现这个的一些CSS:

<h1>Writing progress</h1>

<div class="complete">
  <p>Chapter 1: I was born</p>
</div>

<div class="complete">
  <p>Chapter 2: School</p>
</div>

<div class="written review">
  <p>Chapter 3: University</p>
</div>

<div class="written">
  <p>Chapter 4: Rock and roll</p>
</div>

<div class="incomplete writing">
  <p>Chapter 5: Fell in love</p>
</div>

<div class="incomplete">
  <p>Chapter 6: Children</p>
</div>

<div class="incomplete">
  <p>Chapter 7: Tired!</p>
</div>

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 220px;
  padding: 20px;
  margin: 10px;
  line-height: 2;
  background-color: yellow;
  text-align: center;
  display: inline-block;
}

.complete {
  border-style: solid;
}

.written {
  border-style: dashed;
}

.incomplete {
  border-style: dotted;
}

.writing, .review {
  border-bottom: 6px solid red;
}

这给我们以下结果:

真的没有太多的造型用来完成这一点。 我们没有在 div 规则上声明任何边框样式; 只是我们用来编辑过程中不同点的具体类。 我们依赖于边框的默认宽度和颜色，只需设置 .complete ， .written 和 .incomplete 。 然后对于 .writing 或 .review 正在积极进行的章节，我们必须为底部边框指定整个属性集。 这比为每个不同的框类型设置一个完整的边框速记更有效率。

您可以在Github上找到示例: border-longhand .html (另请参阅 外部">源代码)。

边框半径

盒子上的圆角是网站上另一个令人难以置信的热门功能 - 实际上流行的是，浏览器实现了一个专门用于实现圆角的属性: Web / CSS / border-radius"> border-radius 。 在此之前(并且对于支持的多个背景图像)，开发人员过去必须将每个框包装成他们想要在三个附加的< div> 中具有圆角，并且附加单独的圆角图形 到这四个元素中的每一个。 如果他们想要他们的盒子是灵活的，那就是。

现在这很容易 - 你只需使用以下属性:

border-radius: 20px;

要在不同的角落放置不同大小的边框半径，您可以指定两个，三个或四个值，而非像 CSS / padding"> padding 和 margin :

/* 1st value is top left and bottom right corners,
   2nd value is top right and bottom left  */
border-radius: 20px 10px;
/* 1st value is top left corner, 2nd value is top right
   and bottom left, 3rd value is bottom right  */
border-radius: 20px 10px 50px;
/* top left, top right, bottom right, bottom left */
border-radius: 20px 10px 50px 0;

作为最后一点，您还可以创建椭圆形角(其中x半径不同于y半径)。两个不同的半径由正斜线( / )分隔， 这与值的任何组合，如上所示。 例如:

border-radius: 10px / 20px;
border-radius: 10px 30px / 20px 40px;

主动学习:使用边界半径

对于这种主动学习，我们希望您在提供的元素上实现一些不同类型的边界半径。 请尝试添加:

• The same rounded corner on every corner.
• The same elliptical corner on every corner.
• A different rounded and eliptical corner on every corner.
• Rounded corners to each corner using the three value syntax.
• A rounded corner to the bottom left corner.
• Rounded corners using different unit values, to see how they behave. Percentages are interesting — why?

如果发生错误，您可以随时使用重置按钮重置。

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="rounded">
  <p>Rounded corners are groovy!</p>
</div>
  </textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.rounded {
  width: 220px;
  padding: 20px;
  margin: 10px;
  line-height: 2;
  background-color: yellow;
  text-align: center;
  border-style: dashed;
}</textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div>
  <div class="controls">
    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

边框图像

最后，让我们看看CSS中用于操作边框的最新(和复杂)添加功能 - code> border-image 。 这里的想法是，有时创建一个复杂的用户界面功能将需要一个复杂的设计边框，而不只是一个纯色。 这可能是通过将一个元素重叠在另一个较大元素的中心的中心，并将背景图像应用于底部元素，伪造复杂边框而创建的。 或者在极端情况下，您可能需要创建一个3 x 3网格的九个元素，中心元素作为您的内容，周围的八个元素都应用了边框元素。

border-image 图片使它更容易 实现复杂的图案边界，虽然在现代浏览器(Internet Explorer 11+支持它，以及其他现代浏览器)。让我们看看它是如何工作的。

首先，您需要有一个图像来应用到您的浏览器。 这通常是3×3，4×4,5×5(等)网格设计，如下所示:

alt ="">

当这样的图像用于边界图像时，浏览器将图像分割成8个部分，如下图所示:

alt ="">角图像将插入边框的角落，顶部，右侧，底部和左侧切片将用于填充边框的相应边(通过拉伸或重复)。 我们需要告诉浏览器使切片尺寸合适 - 例如，这个图像是160像素，一个4 x 4网格，因此每个切片都需要40像素。

首先，我们需要一个框来应用边框。 这需要指定边框，否则边框图片将没有空间显示。我们还将使用 -clip"> background-clip 以使任何背景颜色只填充内容和填充下的区域，而不是扩展到边框下(您可能不希望这样的设计 ，但它在这种情况下很有用)。

border: 30px solid black;
background-clip: padding-box;

接下来，我们将使用 border-image-source 指定要用作边框图像的源图像。 此工作方式与 background-image a>，能够接受 url()函数或梯度作为值。

border-image-source: url(border-image.png);

现在，我们将使用 href=\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-slice\">代码>边境形象片代码> / a>来设置所需的切片大小，如上所述:

border-image-slice: 40;

如果所有切片大小相同，则此属性可以采用一个值，如果切片需要不同大小，则可以采用多个值，方法与 / docs / Web / CSS / padding"> padding 和 > margin :

• Two values: top and bottom, left and right.
• Three values: Top, left and right, bottom.
• Four values: Top, right, bottom, left.

如果图像是光栅图形(如 .png 或 .jpg )，那么数字将以像素为单位进行解释。 如果图像是矢量图形(如 .svg )，则该数字将被解释为图形中的坐标。 也可以使用百分比(使用单位％)。 查看 border-image-slice >页面获取更多选项和详细信息。

最后，我们将使用 border-image-repeat 指定我们如何让图像填充边框边。 选项是:

• stretch: The default; the side images are stretched to fill the borders. This generally looks terrible and pixellated, so is not recommended.
• repeat: The side images are repeated until the borders are filled. Depending on circumstances, this might look ok, but you can get left with unsightly image fragments.
• round: The side images are repeated until the borders are filled, and they are all stretched slightly so that no fragments appear.
• space: The side images are repeated until the borders are filled, and a small amount of spacing is added between each copy such that no fragments appear. This value is only supported in Safari (9+) and Internet Explorer (11+).

我们决定使用圆形值，因为它似乎是最有用和最灵活的:

border-image-repeat: round;

把这一切放在一起

让我们把所有这些代码放在一起来展示一个工作示例。 首先，一些简单的HTML:

<div>
  <p>Border image</p>
</div>

现在我们的CSS:

div {
  width: 300px;
  padding: 20px;
  margin: 10px auto;
  line-height: 3;
  background-color: #f66;
  text-align: center;
  /* border-related properties */
  border: 20px solid black;
  background-clip: padding-box;
  border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
  border-image-slice: 40;
  border-image-repeat: round;
}

这里是结果:

有趣的是，你可能已经注意到，边框已设置为20px宽度，而图像切片是40 - 在这种情况下，浏览器只是将切片缩小到20px宽，因此它适合。

您可以将此示例作为 border-image.html (另请参阅 外部">源代码)。 制作本地副本并玩游戏。

其他性能

两个不太常用的边框图像属性如下:

• border-image-width: Resizes the border image only, not the border — if this is set smaller than the border-width, it will sit against the outside of the border, not filling it. If it is larger, then it will expand beyond the border and start to overlap the padding/content.
• border-image-outset: Defines the size of an extra layer of space between the inside of the border and the padding — kind of like "border padding". This is an easy way to move the border-image out a bit if desired.

速记

正如您可能期望的，有一个速记属性可用， border-image 代码> ，它允许您在一行上设置所有相关的值。 下面几行:

border-image-source: url(border-image.png);
border-image-slice: 40;
border-image-repeat: round;

可以用这个替换:

border-image: url(border-image.png) 40 round;

概要

现在你明白了边界，对吧？ 不是在你的国家的边缘，而是在你的元素的边缘。 边框有助于理解，并有许多不同的用途。 在接下来的文章中，我们将采取横向的步骤，并探索样式表的最佳做法 - 这将显示一些有用的应用程序，我们在模块中看到的一些技术。