CSS3 样式学习笔记再次学习了 CSS/CSS3 基础知识，遇到了一些之前不知道、不熟悉的知识点，于是进行记录供后续查

记录一些以前对 CSS/CSS3 没有了解的知识点。

开源字体库

Google 字体库

Google 字体库是一个免费的 Web 字体库，不过在国内用不了，可以使用Google 字体中文版代替。我们只需要在 CSS 里设置字体的 URL 即可使用，比如 Lobster 字体：

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link href="https://fonts.font.im/css?family=Lobster" rel="stylesheet" type="text/css">

阴影

box-shadow 在样式中还是比较常见，我们一般会这样写：

box-shadow:  0 10px 20px rgba(0,0,0,0.19);

效果如下：

而我们通常不会另外一个写法：

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 15px 6px 16px rgba(50,250,50,0.7);

效果如下：

对的，就是多重阴影。下面是阴影的另一个应用角度，使用阴影代替本体：

<style>
  .center {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 25px 10px 0px 0px blue;
  }
</style>
<div class="center"></div>

英文大小写

快速的使得某段英文进行大小写字母变化的方式是：使用样式。

值	结果
lowercase	"transform me"
uppercase	"TRANSFORM ME"
capitalize	"Transform Me"
initial	使用默认值
inherit	使用父元素的 text-transform 值。
none	Default:不改变文字。

关于颜色

互补色

下列即是互补色：

红色（#FF0000）和蓝绿色 (#00FFFF)
绿色（#00FF00）和品红色（#FF00FF）
蓝色（#0000FF）和黄色（#FFFF00）

上面的颜色很容易用三原色表示（所有的颜色都可以理解成三原色的组合）

红色（R）和蓝绿色 (B+G)
绿色（G）和品红色（R+B）
蓝色（B）和黄色（R+G）

三次色

要解释什么是三次色，先说说什么是二次色，上述如 蓝绿色（B+G） 刚好由两种颜色平均合成，一份的 Blue 和一份的 Green，像这种由两种原色平均组合的颜色即二次色，二次色有三种：蓝绿（G+B）、品红（R+B）和 黄色（R+G） 。那么三次色是什么呢？当我们把一份原色和一份二次色平均组合（互补色除外）

HSL 颜色

css3 对颜色定义可以采用名称定义（预定义颜色）、RGB（RGBA）颜色、HSL（HSLA）颜色。 HSLA 颜色由色相（颜色）、饱和度（色彩的纯度 100% 最纯，比例越小含的灰色越多）、亮度（黑白比 100% 纯白，0% 纯黑）、透明度。

示例颜色如下：

颜色	HSL
红	hsl(0, 100%, 50%)
黄	hsl(60, 100%, 50%)
绿	hsl(120, 100%, 50%)
蓝绿	hsl(180, 100%, 50%)
蓝	hsl(240, 100%, 50%)
品红	hsl(300, 100%, 50%)

线性渐变

<style>
  div {
    border-radius: 20px;
    width: 70%;
    height: 200px;
    margin: 50px auto;
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
  }
</style>
<div></div>

<style>
  div{
    border-radius: 20px;
    width: 70%;
    height: 200px;
    margin:  50 auto;
    background: repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 40px,
      black 40px,
      black 80px
    );
  }
</style>
<div></div>

悬停渐变状态

下列代码实现按钮悬停颜色变化，渐变效果不会突然变色

<style>
  button {
    border-radius: 5px;
    color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
  }

  button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
  }

  @keyframes background-color {
    100% {
      background-color: #4791d0;
    }
  }
</style>
<button>Register</button>

动画之贝塞尔曲线

参见下列代码，使用 cubic-bezier 函数描述动画的贝塞尔曲线，其中参数对应两个点，参数为：(x1, y1, x2, y2) 分别为点 P1（x1,y1）、P2（x2,y2）

animation-timing-function: cubic-bezier(0.3, 0.4, 0.5, 1.6);

我们知道构建一个区域内贝塞尔曲线需要四个点，如下图。由于区域已确定，P0、P3恒定，只需要提供 P1、P2 坐标即可唯一确定一个内贝塞尔曲线

注：P1、P2 点的坐标可以不在区域内，如点：(0.5,3)、(1.4, 1.1)

<style>
  .balls {
    border-radius: 50%;
    position: fixed;
    width: 50px;
    height: 50px;
    top: 60%;
    animation-name: jump;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #green {
    background: green;
    left: 75%;
    animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
  }
  @keyframes jump {
    50% {
      top: 10%;
    }
  }
</style>
<div class="balls" id="green"></div>

上述示例类似一个杂耍抛物球。

图片描述

我们通常会使用 alt 作为替代文本出现在图片无法加载的场合，当 img 没有 alt 属性时，图片加载不成功将会破损，为了避免出现这个问题，可以设置属性 alt="" 来隐藏图片。

<img alt="图片介绍" src="https://gimg2.baidu.com/image_search/123.jpg">
<img alt="" src="https://gimg2.baidu.com/image_search/123.jpg">

设置焦点

可以给非焦点对象，如：div 或 p 设置 tabindex 属性来使其可获得焦点

<head>
  <style>
  p:focus {
    background-color: yellow;
  }
  </style>
</head>
<body>
  <header>
    <h1>Ninja Survey</h1>
  </header>
  <section>
      <p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>
  </section>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

无障碍设计

设计规范参考推荐

谷歌公司 Material Design 的无障碍章节：[Material - accessibility] (material.io/design/usab…)
微软公司包容性设计：Microsoft - Inclusive Design
Web内容无障碍指南：Web Content Accessibility Guidelines - WCAG 2.1

色彩及对比度相关站点

getstark
Tanaguru
选色投票网站
 站点颜色在线检测网站

弹性盒子

父元素中样式，通过在父元素中设置来使得子元素遵从样式

display: flex; // 设置弹性盒子
flex-direction: row/row-reverse/column/column-reverse; // 设置子元素排列方式
justify-content: flex-start(默认值)/flex-end/center/space-between/space-around/space-evenly; // 设置主轴对齐方式
align-items: flex-start/flex-end/center/stretch(默认值)/baseline; // 设置交叉轴对齐方式
flex-wrap: nowrap(默认值)/wrap/wrap-reverse; // 拆分行
flex-shrink: number; // 自动收缩，类似于 Ext 的 flex 值
flex-grow: number; // 自动增长，类似于 Ext 的 flex 值
flex-basis: number/auto; // 伸缩基准值
flex: 0 1 auto; // flex-shrink、flex-grow、flex-basis 混用

子元素中样式

order: 1; // 子元素的排序
align-self: flex-start/flex-end/center/stretch(默认值)/baseline; // 可以设置当前子元素的对齐方式

排序方向上的轴（主轴、交叉轴）

网格

父元素中样式，通过在父元素中设置来使得子元素遵从样式

display: grid; // 设置网格
grid-template-columns: 50px 50px 150px 1fr 2fr; // 网格模板列，fr 表示剩余控件占比，类似 Extjs 中 Grid 列参数的 flex
grid-template-rows: 50px 50px 50px; // 网格模板行

//重复添加行列
grid-template-rows: repeat(100, 50px); // 重复 100 个 50px 的列
grid-template-columns: repeat(2, 1fr 50px) 20px; // 重复 2 个（1fr 50px）的两列，最后一个 20px

grid-column-gap: 10px; // 列间距
grid-row-gap: 5px; // 行间距
grid-gap: 5px 10px; // 行列间距
justify-items: start/center/end/stretch(默认值); // 所有子元素水平对齐方式
align-items: start/center/end/stretch(默认值); // 所有子元素垂直对齐方式

grid-template-columns: 100px minmax(50px, 200px); //限制元素列的宽度
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); //弹性布局
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); //弹性布局，更好看

子元素中样式，先给出图片

图1

图2

grid-column: 2/4; // 子元素占位，按照上图1行列线划分，结果参考图2
grid-row: 3/4; // 子元素占位，按照上图1行列线划分，结果参考图2
justify-self: start/center/end/stretch(默认值); // 水平对齐方式
align-self: start/center/end/stretch(默认值); // 垂直对齐方式

//也可以直接一次性定义区域
grid-area: 1/1/2/4;
grid-area: 水平开始/垂直开始/水平结束/垂直结束;

使用上述子元素占位划分方式（行列线方式）相对而言比较麻烦，下面就是更直观方便的方式:

<style>
  .item1{
    background:LightSkyBlue;
    grid-area: advert; // 区域命名
  }
  .item2{
    background:LightSalmon;
    grid-area: content;
  }
  .item3{
    background:PaleTurquoise;
    grid-area: footer;
  }
  .item4 {
    background: PaleGreen;
    grid-area: header;
  }
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas: // 按照网格的方式给相应位置添加 grid-area 名称，“.”号会变成空白
      "header header header"
      "advert . content"
      ". footer footer";
  }
</style>
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

具体效果如下：

配合 media 屏幕尺寸进行局部调整

@media (min-width: 300px){
    .container{
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "advert header"
            "advert content"
            "advert footer";
    }
}

其他

transform: scale(2.5); // 放大 2.5 倍
transform: skewX(-32deg); // X 轴旋转 -32 度
transform: skewY(35deg); // Y 轴旋转 35 度