曹耘豪的博客

CSS 常用属性记录

  1. 背景模糊
  2. 圆角
  3. 边界
  4. box-sizing
  • 值 | 描述
    1. 文本左右对齐
    2. 动画
      1. 动画函数
    3. 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

    动画函数

    Flex

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    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;
      技术 / 前端