动画 animation

简写属性：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name：动画名称，默认为 none

animation-duration：动画指定需要多少秒或毫秒完成

animation-timing-function：设置动画将如何完成一个周期

linear：画从头到尾的速度是相同的

ease：默认。动画以低速开始，然后加快，在结束前变慢。

ease-in：动画以低速开始

ease-out：动画以低速结束

ease-in-out：动画以低速开始和结束

cubic-bezier(n,n,n,n)：贝塞尔曲线

animation-delay：设置动画在启动前的延迟间隔

animation-iteration-count：定义动画的播放次数

n：一个数字，定义应该播放多少次动画

infinite：指定动画应该播放无限次（永远）

animation-direction：指定是否应该轮流反向播放动画

normal：默认值。动画按正常播放

reverse：动画反向播放

alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放

alternate-reverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式

none：默认值。动画在动画执行之前和之后不会应用任何样式到目标元素

forwards：在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值

backwards：动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）

both：动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性

animation-play-state：指定动画是否正在运行或已暂停

paused：动画暂停

running：动画运行

div {
    animation-name: dh;
    animation-duration: 0s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes dh{
    from{}
    to{}
}

@keyframes dh{
    0%{}
    50%{}
    100%{}
}

背景 background

属性简写：background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background-color：指定要使用的背景颜色

background-position：指定背景图像的位置

positions：如果仅指定一个关键字，其他值将会是 "center"

x% y%：第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。

xpos ypos：第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px 0px）或任何其他 CSS 单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和 positions

background-size：指定背景图片的大小

length：设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)

percentage：将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"

cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小

contain：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小

background-repeat：指定如何重复背景图像

repeat：背景图像将向垂直和水平方向重复，这是默认

repeat-x：只有水平位置会重复背景图像

repeat-y：只有垂直位置会重复背景图像

no-repeat：background-image 不会重复

background-origin：指定背景图像的定位区域，background-Origin 属性指定 background-position 属性应该是相对位置

padding-box：背景图像填充框的相对位置

border-box：背景图像边界框的相对位置

content-box：背景图像的相对位置的内容框

background-clip：指定背景图像的绘画区域

border-box：默认值。背景绘制在边框方框内（ border 以内显示）

padding-box：背景绘制在衬距方框内（ border 以内显示）

content-box：背景绘制在内容方框内（ padding 以内显示）

background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动

scroll：背景图片随着页面的滚动而滚动，这是默认的。

fixed：背景图片不会随着页面的滚动而滚动。

local：背景图片会随着元素内容的滚动而滚动。

background-image：指定要使用的一个或多个背景图像

none：无图像背景会显示。这是默认

url('URL')：图像的URL，如果要设置多张 url ，可以多写几个 url

linear-gradient()：创建一个线性渐变的 "图像" 默认从上到下

radial-gradient()：用径向渐变创建 "图像"(center to edges)，径向渐变由中心点定义，background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape 确定圆的类型

ellipse (默认): 指定椭圆形的径向渐变。

circle ：指定圆形的径向渐变

size 定义渐变的大小

farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角

closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

position 定义渐变的位置

center（默认）：设置中间为径向渐变圆心的纵坐标值。

top：设置顶部为径向渐变圆心的纵坐标值。

bottom：设置底部为径向渐变圆心的纵坐标值

repeating-linear-gradient()：创建重复的线性渐变 "图像"。 repeating-radial-gradient()：创建重复的径向渐变 "图像"，属性同镜像渐变。

background-image: url('img1'), url('img2');  // 多张背景图
background-image: linear-gradient(to right, red , blue);  // 从左到右
background-image: linear-gradient(to bottom right, red, blue);  // 左下角到右上角
background-image: linear-gradient(-90deg, red, blue);  // 使用角度
background-image: linear-gradient(red, green, blue);  // 多种颜色
background-image: linear-gradient(red 20%, green 50%, blue 100%);  // 多种颜色占比
background-image: repeating-linear-gradient(red, yellow 10%, green 20%); // 重复的线性渐变
background-image: radial-gradient(#fe683f, rgba(0, 0, 0, 0));  // 径向渐变

边框 border

简写属性：border: width style color;

border-width：指定边框的宽度

border-style：指定边框的样式

none：定义无边框。

hidden：与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted：定义点状边框。在大多数浏览器中呈现为实线。

dashed：定义虚线。在大多数浏览器中呈现为实线。

solid：定义实线。

double：定义双线。双线的宽度等于 border-width 的值。

groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。

inset：定义 3D inset 边框。其效果取决于 border-color 的值。

outset：定义 3D outset 边框。其效果取决于 border-color 的值。

border-color：指定边框的颜色

简写属性：border-image: source slice width outset repeat|initial|inherit;

border-image：图片边框

border-image-source：用于指定要用于绘制边框的图像的位置

border-image-slice：图像边界向内偏移

border-image-width：图像边界的宽度

border-image-outset：用于指定在边框外部绘制 border-image-area 的量

border-image-repeat：用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

圆形渐变边框

<div class="box gradient-border">圆形渐变边框</div>

.gradient-border {
  border: solid 5px transparent;
  border-radius: 10px;
  background-image: linear-gradient(white, white), linear-gradient(315deg,#833ab4,#fd1d1d 50%,#fcb045);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.box {
  width: 350px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 100px auto;
}

文本

文本换行与文本溢出

文本换行

white-space:nowrap;：文本强制不换行

word-break:break-all;：截断单词强制换行

word-wrap:break-word;：长单词在下一行

文本溢出

单行文本溢出显示省略号

.txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行文本溢出显示省略号

.text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

文本排列

writing-mode:horizontal-tb; ：默认：水平方向

writing-mode:vertical-rl;：垂直方向，从右向左

writing-mode:vertical-lr;：垂直方向，从左向右

text-align-last:justify;：段落最后一行的对齐方式或单行对齐方式

.wrap {
    text-align: justify;
    text-justify: distribute-all-lines;
    text-align-last: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}

指定文本方向/书写方向

direction：

ltr：默认。文本方向从左到右。

rtl：文本方向从右到左。

文本不可被选中

user-select: none;：文本不可被选中

文字倾斜

font-style:italic;：斜体。对于没有斜体变量的特殊字体，将应用 oblique

font-style:oblique;：显示一个倾斜的字体样式

字词间距

word-spacing:10px;：只有英文有用

letter-spacing:10px;：中英文都有用

识别空格与换行

white-space:pre-line;：识别换行

white-space:pre;：识别空格

white-space:pre-wrap;：保留空白符序列，但是正常地进行换行

文本的修饰

text-decoration：

none：默认。定义标准的文本。

underline：定义文本下的一条线。

overline：定义文本上的一条线。

line-through：定义穿过文本的一条线。

blink：定义闪烁的文本。

文本对齐

vertical-align：

baseline：默认。元素放置在父元素的基线上

sub：垂直对齐文本的下标

super：垂直对齐文本的上标

top：把元素的顶端与行中最高元素的顶端对齐

text-top：把元素的顶端与父元素字体的顶端对齐

middle：把此元素放置在父元素的中部

bottom：使元素及其后代元素的底部与整行的底部对齐

text-bottom：把元素的底端与父元素字体的底端对齐

length：将元素升高或降低指定的高度，可以是负数

%：使用 "line-height" 属性的百分比值来排列此元素。允许使用负值

文本阴影

text-shadow: 5px 5px 5px #FF0000;

文字渐变

background-image: -webkit-linear-gradient(bottom, red, blue);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

打字效果

<div class="wrapper">
  <div class="typing-demo">
    有趣且实用的 CSS 小技巧
  </div>
</div>

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.typing-demo {
  width: 22ch;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}

@keyframes typing {
  from {
    width: 0
  }
}

@keyframes blink {
  50% {
    border-color: transparent
  }
}

模糊文本

简单但很漂亮的文本模糊效果，简单又好看！

.blur {
   color: transparent;
   text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}

输入框

/* 修改 input 的提示文本 */
::placeholder{}

/* 修改 radio 和 checkbox 的大小 */
input[type='radio'],
input[type='checkbox'] {
  zoom: 150%;
}

/* 取消聚集时的边框 */
outline:none;

/* input 的 type 设置为 "number" 时取消后边的上下箭头 */
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

删除 type="number" 末尾的箭头

默认情况下，在 type="number" 的末尾会出现一个小箭头，但有时需要将其删除。应该怎么做呢？

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input[type="number"] {
  -moz-appearance: textfield;
}

outline:none 删除输入状态线

当输入框被选中时，它默认会有一条蓝色的状态线，可以通过使用 outline: none 来移除它。

如下图所示：第二个输入框被移除，第一个输入框没有被移除。

修改 input placeholder 样式

.placehoder-custom::-webkit-input-placeholder {
  color: #babbc1;
  font-size: 12px;
}

使用 caret-color 来修改光标的颜色

可以使用caret-color: #ffd476;来修改光标的颜色，如下所示：

阻止自动填入

autocomplete：原生属性，自动补全

若 autocomplete="off" 不起作用时，可修改为 autocomplete="new-password"

多行文本

resize

none：用户无法调整元素的尺寸。

both：用户可调整元素的高度和宽度。

horizontal：用户可调整元素的宽度。

vertical：用户可调整元素的高度。

outline:none：取消聚集时的边框

图片

属性指定元素的内容应该如何去适应指定容器的高度与宽度

object-fit:

fill：默认，不保证保持原有的比例，内容拉伸填充整个内容容器

contain：保持原有尺寸比例。内容被缩放

cover：保持原有尺寸比例。但部分内容可能被剪切

none：保留原有元素内容的长度和宽度，也就是说内容不会被重置

scale-down：保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

/* 对图片进行剪切保留原始比例 */
object-fit: cover;
/* 给图片加高斯模糊 */
filter: blur(10px);
/* 图片在不规则形状中显示 */
clip-path:;

解决 img 5px 间距的问题

方案一：为父元素设置字体大小为 0

方案二：将 img 元素设置为 display: block

方案三：将 img 元素设置为 vertical-align: bottom

方案四：给父元素设置 line-height: 5px

滚动条

overflow: overlay; 滚动条溢出不占位

/* -webkit-内核 */
::-webkit-scrollbar{} 								/* 整个滚动条 */
::-webkit-scrollbar-button{} 					/* 滚动条上的按钮 (上下箭头) */
::-webkit-scrollbar-thumb{}						/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-track{}						/* 滚动条轨道 */
::-webkit-scrollbar-track-piece{}			/* 滚动条没有滑块的轨道部分 */
::-webkit-scrollbar-corner{}					/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
::-webkit-resizer{}										/* 某些元素的 corner 部分的部分样式 ( 例：textarea 的可拖动按钮 ) */
::-webkit-scrollbar{ display:none; } 	/* 隐藏滚动条 */

/* crollbar- ie 浏览器 */
scrollbar-arrow-color: #fff;					/* 三角箭头的颜色 */
scrollbar-face-color: #fff;        		/* 滚动条滑块按钮的颜色 */
scrollbar-highlight-color: #fff;   		/* 滚动条整体颜色 */
scrollbar-shadow-color: #fff;					/* 滚动条阴影 */
scrollbar-track-color: #fff;       		/* 滚动条轨道颜色 */
scrollbar-3dlight-color:#fff;      		/* 滚动条 3d 亮色阴影边框的外观颜色——左边和上边的阴影色 */
scrollbar-darkshadow-color: #fff;  		/* 滚动条 3d 暗色阴影边框的外观颜色——右边和下边的阴影色 */
scrollbar-base-color: #fff; 					/* 滚动条基准颜色 */

滚动条样式

&::-webkit-scrollbar {
  width: 8px;
  background-color: #f1f1f1;
  border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

平滑滚动

无需 JavaScript 即可实现平滑滚动，只需一行 CSS：scroll-behavior: smooth；

<nav>
  Scroll to: 
  <a href="#sectionA" class="link bg-red">A</a>
  <a href="#sectionB" class="link bg-blue">B</a>
  <a href="#sectionC" class="link bg-green">C</a>
</nav>

<div class="wrapper">
  <div id="sectionA" class="section bg-red">A</div>
  <div id="sectionB" class="section bg-blue">B</div>
  <div id="sectionC" class="section bg-green">C</div>
</div>

html {
  scroll-behavior: smooth;
}

nav {
  position: fixed;
  left: calc(50vw - 115px);
  top: 0;
  width: 200px;
  text-align: center;
  padding: 15px;
  background: #fff;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
}

nav .link {
  padding: 5px;
  color: white;
}

.section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 5em;
  text-shadow:
    0px 2px 0px #b2a98f,
    0px 4px 3px rgba(0,0,0,0.15),
    0px 8px 1px rgba(0,0,0,0.1);
}

.bg-red {
  background: #de5448;
}

.bg-blue {
  background: #4267b2;
}

.bg-green {
  background: #4CAF50;
}

阴影

CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。

该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

/* 两边阴影 */
box-shadow: 10px 5px 5px red;
/* 四边阴影 */
box-shadow: 0px 0px 5px red;
/* 阴影向内  inset 可将阴影改变为内部阴影 */
box-shadow: 0px 0px 5px red inset;
/* 单边阴影 */
box-shadow: 0px 10px 5px -10px red;

设置阴影

当使用透明图像时，可以使用 drop-shadow() 函数在图像上创建阴影，而不是使用 box shadow 属性在元素的整个框后面创建矩形阴影：

<div class="wrapper">
  <div class="mr-2">
    <div class="mb-1 text-center">
      box-shadow
    </div>
    <img class="box-shadow" src="https://markodenic.com/man_working.png" alt="Image with box-shadow">
  </div>
  <div>
    <div class="mb-1 text-center">
      drop-shadow
    </div>
    <img class="drop-shadow" src="https://markodenic.com/man_working.png" alt="Image with drop-shadow">
  </div>
</div>

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mr-2 {
  margin-right: 2em;
}

.mb-1 {
  margin-bottom: 1em;
}

.text-center {
  text-align: center;
}

.box-shadow {
  box-shadow: 2px 4px 8px #585858;
}

.drop-shadow {
  filter: drop-shadow(2px 4px 8px #585858);
}

圆角

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值：第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值：第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同

字体

@font-face {
  /* 字体的名字：自定义 */
  font-family: myZT;
  /* 字体在文件中的地址 */
  src: url("../font/RuiZiYunZiKuXingKaiGB-2.ttf");
	/* ie9 仅支持 .eot 格式的字体 */
}
body,
html {
	/* 在 body 和 html 下使用 myZT 字体 */
  font-family: myZT;
}

2D 转换

/* 向左向右移动 */
/* translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动 */
transform: translateX(100px);
transform: translateY(100px);
transform: translate(100px, 100px);

/* 元素旋转 */
/* rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。 */
transform: rotate(30deg);

/* 元素缩放 */
/* scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数： */
/* 宽度是原来的两倍，高度是原来的三倍 */
transform: scale(2, 3);

/* 元素倾斜 */
/* 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。 */
/* skew(30deg,30deg) 元素在X轴和Y轴上倾斜20度30度。 */
transform: skew(30deg, 30deg);

3D 转换

过度

/* 过度属性的连写 */
transition: width 1s ease 1s;

元素可编辑

contenteditable: "inherit"; /* (默认) */
contenteditable: "plaintext-only"; /* (输入纯文本) */
contenteditable: "true"; /* 可编辑 */
contenteditable: "false"; /* 不可编辑 */
contenteditable: "caret"; /* (符号) */

/* 可编辑状态的默认样式 */
outline: 0; /* 取消聚焦高亮 */

单选框与复选框的样式

input[type='radio'] 单选框

input[type='checkbox'] 复选框

/* 选择所有的的复选框设置大小和定位 */
input[type='radio'] { 
  position: relative;
  width: 30px;
  height: 30px;
}

/* 利用伪元素加图片覆盖 - 这是未选中 */
input[type='radio']::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: #fff;
  background-image: url('../img/wxz.png');
  background-size: 30px 30px;
}

/* 利用伪元素加图片覆盖 - 这是选中 */
input[type='radio']:checked::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: #fff;
  background-image: url('../img/xz.png');
  background-size: 30px 30px;
}

table

.table{
	table-layout: fixed; // table 设置 tr 和 td 的固定宽度
  border-collapse: collapse; // 为表格设置合并边框模型
  border-color: #e8e8e8; // 边框颜色
  
} 
tr,td {
    width: 100px;
 		background-color: #fafafa; // 背景色
}

video

属性指定元素的内容应该如何去适应指定容器的高度与宽度

object-fit:

fill：默认，不保证保持原有的比例，内容拉伸填充整个内容容器

contain：保持原有尺寸比例。内容被缩放

cover：保持原有尺寸比例。但部分内容可能被剪切

none：保留原有元素内容的长度和宽度，也就是说内容不会被重置

scale-down：保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

/* 全屏按钮 */
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
/* 播放按钮 */
video::-webkit-media-controls-play-button {
    display: none;
}
/* 进度条 */
video::-webkit-media-controls-timeline {
    display: none;
}
观看的当前时间
video::-webkit-media-controls-current-time-display{
    display: none;           
}
/* 剩余时间 */
video::-webkit-media-controls-time-remaining-display {
    display: none;           
}
/* 音量按钮 */
video::-webkit-media-controls-mute-button {
    display: none;           
}
video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;           
}
/* 音量的控制条 */
video::-webkit-media-controls-volume-slider {
    display: none;           
}
/* 所有控件 */
video::-webkit-media-controls-enclosure{
    display: none;
}

元素

元素的点击穿透

pointer-events: none; 让 html 元素可被穿透

空元素样式

可以使用 :empty 选择器来设置完全没有子元素或文本的元素的样式：

<div class="wrapper">
  <div class="box"></div>
  <div class="box">白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
</div>

.wrapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  display: inline-block;
  background: #999;
  border: 1px solid #585858;
  height: 200px;
  width: 200px;
  margin-right: 15px;
}

.box:empty {
  background: #fff;
}

选择器

使用 :not 选择器

除了最后一个元素外，所有元素都需要一些样式，使用 not 选择器非常容易做到。

如下图所示：最后一个元素没有底边。

li:not(:last-child) {
  border-bottom: 1px solid #ebedf0;
}

绘制

绘制三角形

.box {
  padding: 15px;
  background-color: #f5f6f9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.triangle {
  display: inline-block;
  margin-right: 10px;
  /* Base Style */
  border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
  border-top-color: #0097a7;
}
/*上*/
.triangle.top {
  border-bottom-color: #b2ebf2;
}
/*左*/
.triangle.left {
  border-right-color: #00bcd4;
}
/*右*/
.triangle.right {
  border-left-color: #009688;
}

绘制小箭头

.box {
  padding: 15px;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow {
  display: inline-block;
  margin-right: 10px;
  width: 0;
  height: 0;
  /* Base Style */
  border: 16px solid;
  border-color: transparent #cddc39 transparent transparent;
  position: relative;
}
.arrow::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -16px;
  border: 16px solid;
  border-color: transparent #fff transparent transparent;
}
/*下*/
.arrow.bottom {
  transform: rotate(270deg);
}
/*上*/
.arrow.top {
  transform: rotate(90deg);
}
/*左*/
.arrow.left {
  transform: rotate(180deg);
}
/*右*/
.arrow.right {
  transform: rotate(0deg);
}

绘制模态框

可以使用 CSS 中的 :target 伪元素来创建一个模态框。

<div class="wrapper">
    <a href="#demo-modal">Open Modal</a>
</div>

<div id="demo-modal" class="modal">
    <div class="modal__content">
        <h1>CSS Modal</h1>
        <p>hello world</p>
        <a href="#" class="modal__close">&times;</a>
    </div>
</div>

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #834d9b, #d04ed6);
}

.wrapper a {
  display: inline-block;
  text-decoration: none;
  padding: 15px;
  background-color: #fff;
  border-radius: 3px;
  text-transform: uppercase;
  color: #585858;
  font-family: 'Roboto', sans-serif;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
}

.modal:target {
  visibility: visible;
  opacity: 1;
}

.modal__content {
  border-radius: 4px;
  position: relative;
  width: 500px;
  max-width: 90%;
  background: #fff;
  padding: 1em 2em;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #585858;
  text-decoration: none;
}

动态工具提示

可以使用 CSS 函数 attr() 来创建动态的纯 CSS 工具提示。

<h1>
  HTML/CSS tooltip
</h1>
<p>
  Hover <span class="tooltip" data-tooltip="Tooltip Content">Here</span> to see the tooltip.
</p>
<p>
  You can also hover <span class="tooltip" data-tooltip="This is another Tooltip Content">here</span> to see another example.
</p>

.tooltip {
  position: relative;
  border-bottom: 1px dotted black;
}

.tooltip:before {
  content: attr(data-tooltip); 
  position: absolute;
  width: 100px;
  background-color: #062B45;
  color: #fff;
  text-align: center;
  padding: 10px;
  line-height: 1.2;
  border-radius: 6px;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  font-size: 0.75em;
  visibility: hidden;
}

.tooltip:after {
  content: "";
  position: absolute;
  bottom: 75%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  opacity: 0;
  transition: opacity .6s;
  border-color: #062B45 transparent transparent transparent;
  visibility: hidden;
}

.tooltip:hover:before, 
.tooltip:hover:after {
  opacity: 1;
  visibility: visible;
}

CSS 的常用样式汇总

动画 animation

背景 background

边框 border

圆形渐变边框

文本

文本换行与文本溢出

文本换行

文本溢出

单行文本溢出显示省略号

多行文本溢出显示省略号

文本排列

文本排列

指定文本方向/书写方向

文本不可被选中

文字倾斜

字词间距

识别空格与换行

文本的修饰

文本对齐

文本阴影

文字渐变

打字效果

模糊文本

输入框

删除 type="number" 末尾的箭头

outline:none 删除输入状态线

修改 input placeholder 样式

使用 caret-color 来修改光标的颜色

阻止自动填入

多行文本

图片

解决 img 5px 间距的问题

滚动条

滚动条样式

平滑滚动

阴影

设置阴影

圆角

字体

2D 转换

3D 转换

过度

元素可编辑

单选框与复选框的样式

table

video

元素

元素的点击穿透

空元素样式

选择器

使用 :not 选择器

绘制

绘制三角形

绘制小箭头

绘制模态框

动态工具提示