CSS 常用属性记录

背景模糊
圆角
边界
box-sizing

文本左右对齐
动画
1. 动画函数
Flex

背景模糊

1
2
3

background-color: rgba(r, g, b, a) // 需要半透明才能模糊
backdrop-filter: saturate(180%) blur(20px)
-webkit-backdrop-filter: saturate(180%) blur(20px)

圆角

1	border-radius: 3px

边界

1	border: 1px solid color

box-sizing

box-sizing: content-box|border-box|inherit;

值 | 描述

|—

content-box | 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box | 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit | 规定应从父元素继承 box-sizing 属性的值。

文本左右对齐

1	text-align: justify

动画

1	transition: property .2s func delay

如果所有属性都使用动画则property用all

动画函数

linear规定以相同速度开始至结束的过渡效果（ cubic-bezier(0,0,1,1)）
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
ease-in规定以慢速开始的过渡效果（ cubic-bezier(0.42,0,1,1)）
ease-out规定以慢速结束的过渡效果（cubic-bezier(0,0,0.58,1)）
ease-in-out规定以慢速开始和结束的过渡效果（cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n)使用函数自定义动画。4个值的取值在0~1之间。

Flex

display: flex;
display: inline-flex;
display: -webkit-flex; /* Safari */

/* 项目排列方向*/
flex-direction: row（左到右）| row-reverse | column | column-reverse;

/* 项目换行方式*/
flex-wrap: nowrap | wrap | wrap-reverse;

/* 简写 */
flex-flow: <flex-direction> || <flex-wrap>;

 /* 项目对齐方式 */
justify-content: flex-start | flex-end | center | space-between（常用） | space-around;

/* 一根轴线里的项目对齐方式 */
align-items: stretch（拉伸）| flex-start | flex-end | center | baseline;

/* 多根轴线 */
align-content: stretch（拉伸）| flex-start | flex-end | center | space-between | space-around;

技术 / 前端

2018-06-08

曹耘豪的博客