（Ⅰ）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;
}
复制代码

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

祝好，qdywxs ♥ you！设计