BenzHub | Background and Border(背景和邊框)

在前端工程師的日常工作中，最常使用的應該就是 background 和border ，不管是在切版或是在關於美感的調配畫面比例，幾乎是每天都會使用，對於前端工程師來說， background 和border 是一定要熟練掌握的。
使用CSS中邊框和背景輕鬆增強你網站的視覺吸引力。我們這邊用案例讓你學會如何用邊框優雅地裝飾元素，以及如何透過多樣的背景風格提升設計水平。無論你是設計師還是前端工程師，掌握這些 CSS 基礎將使你能夠輕鬆創建視覺上令人驚嘆的網頁元素。
See the Pen Background and Border(背景和邊框)-CSS by lenrich (@lenrich) on CodePen.
範例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS背景和邊框</title>
    <style>
      #box-1 {
        background-color: antiquewhite;
        /* 邊框寬度 */
        border-width: 3px;
        /* 邊框顏色 */
        border-color: red;
        /* 邊框樣式: 實線 */
        border-style: solid;
        /* 邊框樣式: 原點線 */
        border-style: dotted;
        /* 邊框樣式: 虛線 */
        border-style: dashed;

        /* border 複合屬性設定寫法 */
        border: 3px red dashed;
        border-radius: 10px;
      }

      #box-2 {
        background-color: #333;
        color: #fff;
        /* border-bottom border-left border-right */
        border-top: 3px solid blue;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }

      #box-3 {
        background-image: url(https://images.pexels.com/photos/58997/pexels-photo-58997.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
        /* 不重複裂圖 */
        background-repeat: no-repeat;
        /* 向右向下各移動100px */
        background-position: 100px 100px;
        /* 向左向上各移動100px */
        background-position: -100px -100px;
        /* 置中 */
        background-position: center center;
        /* 背景圖完整覆蓋 */
        background-size: cover;
        width: 600px;
        height: 300px;
        /* ///////////////////////////////////////////////////////////////// */

        /* backgroud複合屬性 */
        background: url(https://images.pexels.com/photos/58997/pexels-photo-58997.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1) no-repeat center center/cover;
        color: #fff;
        width: 600px;
        height: 300px;
      }

      #box-4 {
        background: url(https://images.pexels.com/photos/2253275/pexels-photo-2253275.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1) no-repeat center center;
        /* 背景滑動固定 */
        background-attachment: fixed;
      }
    </style>
  </head>
  <body>
    <div id="box-1">
      <h3>box 1</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
    </div>
    <br />

    <div id="box-2">
      <h3>box 2</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
    </div>

    <div id="box-3">
      <h3>box 3</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
    </div>

    <div id="box-4">
      <h3>box 4</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
     
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione
        earum esse? Ullam, enim vitae necessitatibus tenetur fugiat incidunt
        pariatur excepturi earum impedit deleniti nemo, quidem quisquam illo
        totam nulla?
      </p>
    </div>
  </body>
</html>
Background and Border(背景和邊框) | CSS

範例
