（Ⅰ）CSS 實現不一樣邊框效果 | CSS 給盒子、背景、連接、列表、表單、表格等加樣式

時間 2020-01-18

標籤 css 實現不一樣邊框效果盒子背景連接列表表單表格樣式欄目 CSS 简体版

原文原文鏈接

原創：itsOli  @前端一萬小時

本文首發於公衆號「前端一萬小時」

本文版權歸做者全部，未經受權，請勿轉載！

本文節選自「語雀」私有專欄「前端一萬小時 | 從零基礎到輕鬆就業」
複製代碼

1. 讓一個元素「看不見」有幾種方式？有什麼區別？
2. 單行文本溢出加 ... 如何實現？
3. 如何在頁面上實現一個圓形的可點擊區域？
4. 解釋下面代碼的做用？字體裏 \5b8b\4f53 表明什麼？
    body{
      font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
    }

5. 如何去除列表元素的默認樣式前面的點 · ？
  ✅ list-style: none;
  ❌ text-decoration: none;
  ❌ opacity: 0;
  ❌ default-type: none;
複製代碼

🙋上方面試題「參考答案詳解」，請點擊此處查看獲取方式！css

前言： 經過前 8 篇文章基礎知識的鋪墊，咱們也算是見識了 CSS 的「神通廣大」。html

這篇文章，咱們就把實際工做中最高頻用到的「CSS 加樣式」挨個列一列，用一行行代碼來展現 CSS 是如何給「盒子」、「背景」、「連接」、「列表」、「表單」、「表格」等加樣式的。前端

本篇的全部知識點爲必掌握項，咱們學習的時候能夠先本身按要求寫出樣式，而後參照個人代碼，把一行行所有弄懂。面試

1 CSS 實現以下邊框效果

參考代碼：
🔗源碼及效果展現bash

HTML學習

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p class="box1">
    「UI 設計」和「前端代碼實現」在實際工做中既像「冤家」又像「情人」。此號目的：把「冤家」、「情人」變成「內人」。前期我們聊基礎，後期我們聊提升。 一切從零開始，一點一點到一萬，一步一步作大佬！
  </p>
  <p class="box2">
    「UI 設計」和「前端代碼實現」在實際工做中既像「冤家」又像「情人」。此號目的：把「冤家」、「情人」變成「內人」。前期我們聊基礎，後期我們聊提升。 一切從零開始，一點一點到一萬，一步一步作大佬！
  </p>
  <p class="box3">
    「UI 設計」和「前端代碼實現」在實際工做中既像「冤家」又像「情人」。此號目的：把「冤家」、「情人」變成「內人」。前期我們聊基礎，後期我們聊提升。 一切從零開始，一點一點到一萬，一步一步作大佬！
  </p>
  <p class="box4">
    「UI 設計」和「前端代碼實現」在實際工做中既像「冤家」又像「情人」。此號目的：把「冤家」、「情人」變成「內人」。前期我們聊基礎，後期我們聊提升。 一切從零開始，一點一點到一萬，一步一步作大佬！
  </p>
</body>
</html>
複製代碼

CSS字體

body {
  width: 600px;
  margin: 0 auto;
}
p {
  margin-top: 30px;
  line-height: 1.5;
  padding: 18px 16px;
}
.box1 {
  border: 1px solid #ccc;
  border-radius: 3px;

/* 🚀咱們用 border-radius 給邊框加「圓角」 */

}
.box2 {
  background-color: #ffe7e7;
  border-left: 6px solid #f44336;
  border-right: 7px solid #f44336;
}
.box3 {
  background-color: #ffffd7;
  border-top: 6px solid #ffeb3b;
  border-bottom: 7px solid #ffeb3b;
}
.box4 {
  background-color: #e7ffe7;
  border: 1px solid #4CAF50;
  border-bottom: 7px solid #4CAF50;
}
複製代碼