Borders

邊框回顧

正如你將在課程中看到的，元素有一個邊緣，舒適地位于元素的填充和邊緣之間。 默認(rèn)情況下，邊框的大小為0 - 使其不可見 - 但您可以設(shè)置邊框的厚度，樣式和顏色使其顯示。

邊框速記

通過 border 速記屬性，您可以設(shè)置所有這些 同時在所有四邊，例如:

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

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

Longhand選項

border 可以細(xì)分為許多不同的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.?

你可能會想知道為什么會有這么多l(xiāng)onghand選項 - 好吧，它是有用的，讓你可以覆蓋或關(guān)閉單個的樣式設(shè)置的必要，而不必不斷地重新定義一切; 它可以從長遠(yuǎn)來看為你節(jié)省很多代碼。 它也是值得知道的邊框默認(rèn)情況下的文本的顏色，寬度為3px，當(dāng)沒有明確設(shè)置的值。

考慮到這一點，讓我們看一個虛構(gòu)書的寫作進(jìn)度計劃器的例子。 每個章節(jié)都由 < div> >元素，其設(shè)置為固定寬度并包含章節(jié)編號和標(biāo)題。 寫入進(jìn)度由以下鍵指示:

• 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.

讓我們來看看我們可以用來實現(xiàn)這個的一些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;
}

這給我們以下結(jié)果:

真的沒有太多的造型用來完成這一點。 我們沒有在 div 規(guī)則上聲明任何邊框樣式; 只是我們用來編輯過程中不同點的具體類。 我們依賴于邊框的默認(rèn)寬度和顏色，只需設(shè)置 .complete ， .written 和 .incomplete 。 然后對于 .writing 或 .review 正在積極進(jìn)行的章節(jié)，我們必須為底部邊框指定整個屬性集。 這比為每個不同的框類型設(shè)置一個完整的邊框速記更有效率。

您可以在Github上找到示例: border-longhand .html (另請參閱 外部">源代碼)。

邊框半徑

盒子上的圓角是網(wǎng)站上另一個令人難以置信的熱門功能 - 實際上流行的是，瀏覽器實現(xiàn)了一個專門用于實現(xiàn)圓角的屬性: Web / CSS / border-radius"> border-radius 。 在此之前(并且對于支持的多個背景圖像)，開發(fā)人員過去必須將每個框包裝成他們想要在三個附加的< div> 中具有圓角，并且附加單獨的圓角圖形 到這四個元素中的每一個。 如果他們想要他們的盒子是靈活的，那就是。

現(xiàn)在這很容易 - 你只需使用以下屬性:

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;

作為最后一點，您還可以創(chuàng)建橢圓形角(其中x半徑不同于y半徑)。兩個不同的半徑由正斜線( / )分隔， 這與值的任何組合，如上所示。 例如:

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

主動學(xué)習(xí):使用邊界半徑

對于這種主動學(xué)習(xí)，我們希望您在提供的元素上實現(xiàn)一些不同類型的邊界半徑。 請嘗試添加:

• 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?

如果發(fā)生錯誤，您可以隨時使用重置按鈕重置。

<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中用于操作邊框的最新(和復(fù)雜)添加功能 - code> border-image 。 這里的想法是，有時創(chuàng)建一個復(fù)雜的用戶界面功能將需要一個復(fù)雜的設(shè)計邊框，而不只是一個純色。 這可能是通過將一個元素重疊在另一個較大元素的中心的中心，并將背景圖像應(yīng)用于底部元素，偽造復(fù)雜邊框而創(chuàng)建的。 或者在極端情況下，您可能需要創(chuàng)建一個3 x 3網(wǎng)格的九個元素，中心元素作為您的內(nèi)容，周圍的八個元素都應(yīng)用了邊框元素。

border-image 圖片使它更容易 實現(xiàn)復(fù)雜的圖案邊界，雖然在現(xiàn)代瀏覽器(Internet Explorer 11+支持它，以及其他現(xiàn)代瀏覽器)。讓我們看看它是如何工作的。

首先，您需要有一個圖像來應(yīng)用到您的瀏覽器。 這通常是3×3，4×4,5×5(等)網(wǎng)格設(shè)計，如下所示:

alt ="">

當(dāng)這樣的圖像用于邊界圖像時，瀏覽器將圖像分割成8個部分，如下圖所示:

alt ="">角圖像將插入邊框的角落，頂部，右側(cè)，底部和左側(cè)切片將用于填充邊框的相應(yīng)邊(通過拉伸或重復(fù))。 我們需要告訴瀏覽器使切片尺寸合適 - 例如，這個圖像是160像素，一個4 x 4網(wǎng)格，因此每個切片都需要40像素。

首先，我們需要一個框來應(yīng)用邊框。 這需要指定邊框，否則邊框圖片將沒有空間顯示。我們還將使用 -clip"> background-clip 以使任何背景顏色只填充內(nèi)容和填充下的區(qū)域，而不是擴(kuò)展到邊框下(您可能不希望這樣的設(shè)計 ，但它在這種情況下很有用)。

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

接下來，我們將使用 border-image-source 指定要用作邊框圖像的源圖像。 此工作方式與 background-image a>，能夠接受 url()函數(shù)或梯度作為值。

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

現(xiàn)在，我們將使用 href=\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-slice\">代碼>邊境形象片代碼> / a>來設(shè)置所需的切片大小，如上所述:

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 )，那么數(shù)字將以像素為單位進(jìn)行解釋。 如果圖像是矢量圖形(如 .svg )，則該數(shù)字將被解釋為圖形中的坐標(biāo)。 也可以使用百分比(使用單位％)。 查看 border-image-slice >頁面獲取更多選項和詳細(xì)信息。

最后，我們將使用 border-image-repeat 指定我們?nèi)绾巫寛D像填充邊框邊。 選項是:

• 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>

現(xiàn)在我們的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;
}

這里是結(jié)果:

有趣的是，你可能已經(jīng)注意到，邊框已設(shè)置為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 代碼> ，它允許您在一行上設(shè)置所有相關(guān)的值。 下面幾行:

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

可以用這個替換:

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

概要

現(xiàn)在你明白了邊界，對吧？ 不是在你的國家的邊緣，而是在你的元素的邊緣。 邊框有助于理解，并有許多不同的用途。 在接下來的文章中，我們將采取橫向的步驟，并探索樣式表的最佳做法 - 這將顯示一些有用的應(yīng)用程序，我們在模塊中看到的一些技術(shù)。