（Ⅱ）实例：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;
}
复制代码

下一篇咱们继续用实例将知识点学活。bash

祝好，qdywxs ♥ you！post