（Ⅱ）實例：CSS 給按鈕加陰影 | CSS 給盒子、背景、連接、列表、表單、表格等加樣式

時間 2020-01-19

標籤實例 css 按鈕陰影盒子背景連接列表表單表格樣式欄目 CSS 简体版

原文原文鏈接

原創：itsOli  @前端一萬小時

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

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

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

🔗緊接上篇文章css

2 CSS 實現以下邊框、按鈕效果

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

HTML前端

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <ul class="btn">
    <li><a class="btn-s" href=""> steal</a></li>
    <li><a class="btn-y" href=""> yellow</a></li>
    <li><a class="btn-o" href=""> orange</a></li>
    <li><a class="btn-r" href=""> red</a></li>
    <li><a class="btn-g" href=""> green</a></li>
  </ul>
</body>
</html>
複製代碼

CSS瀏覽器

body,h1,h2,h3,h4,h5,h6,ul,li,p {
  margin: 0;
  padding: 0;
}
/* 🚀以上這種經常使用的設置是爲了把瀏覽器默認樣式——margin、padding 所產生的縫隙給去掉， 以便後邊咱們本身加樣式。 */

ul {
  list-style: none;
}
/* 🚀這個是爲了把列表前邊的「小黑點」或「數字」去掉 */

a {
  text-decoration: none;
}
/* 🚀這個能夠把 a 連接下邊默認的」下劃線「去掉」 */

body {
  text-align: center;
}
.btn>li {
  display: inline-block;
  /* 🚀使列表變成「行內盒子」，讓它展現成「一行」 */

  margin-top: 30px;
}

a {
  display: inline-block;
  /* 🚀使「塊盒子」顯示爲「行內盒子」，讓它展現成「一行」。 */

  padding: 8px 10px;
  color: #000;
  border-radius: 3px;
 }
a:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

/* 🏆隱藏或者透明元素的方法： 1. opacity: 0; 透明度爲 0，總體都看不見了； 2. visibility: hidden; 這個和上邊相似； 3. display: none; 消失，不佔用位置； 4. background-color: rgba(0, 0, 0, 0.2); 只是背景色透明。 */


.btn-s {
  background-color: #009688;
  color: #fff;  /* 🚀表示「白色」 */
 }
.btn-y {
  background-color: #ff9800;
}
.btn-o {
  background-color: #ffeb3b;
 }
.btn-r {
  background-color: #f44336;
  color: #fff;
 }
.btn-g {
  background-color: #4CAF50;
  color: #fff;
}
複製代碼