前端工作中常用 CSS 知识点整理1.1文字溢出省略号: 文字单行溢出: 多行文字溢出: 1.2css变量： CSS变量

css引入方式

行内样式

<div style="width: 100px"></div>

内联模式

<div class="header"></div>
.header {width: 100px;}

外联模式

<link rel="stylesheet" href="./base.css">

导入式

// less/scss文件内
@import url("./base.css");

1.0禁用标签

方式一: pointer-events: none 禁止了点击事件, 但是没有样式

方式二: cursor: not-allowed 有个禁止的样式, 事件要自行判断return

1.0:not选择器

排除某个属性选择器

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

1.0复用样式

// 竖线
<span style="margin: 0px 20px;display: inline-block;width: 2px;height: 16px;background: #eee;"></span>

1.0 grid网格布局

网格是一组相交的水平线和垂直线，它定义了网格的列和行。

CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。

定义网格容器

display: grid;

display: inline-grid;

直接设置布局

grid:

'header header header header header header'

'menu main main main right right'

'menu footer footer footer footer footer';

设置列

网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。

grid-template-columns: auto auto auto auto;

grid-template-columns: 1fr 1fr 1fr;

注意: 如果都是弹性的auto 或者 1fr , 要给子元素加样式 overflow: hidden

设置跨列(加到子元素)

指定从哪一列开始显示网格元素。指定网格元素从哪一列结束，或者设置跨越几列。

grid-column: grid-column-start / grid-column-end;

grid-column: 1 / 5; // 在第 1 列开始，在第 5 列前结束

grid-column: 1 / span 5; // 在第 1 列开始，跨5列

设置行

grid-template-rows: 100px 300px;

grid-template-rows: 1fr 168px;

设置跨行(加到子元素)

指定从哪一行开始显示网格元素。指定网格元素从哪一行结束，或者设置跨越几行(span 数字)。

grid-row: grid-row-start / grid-row-end;

grid-row: 1 / span 2; // 在第 1 行开始，跨两行

grid-row: span 2; // 这个属性设置网格项跨越两个行。但是它并没有明确指定结束位置，结束位置会被隐式计算出来。通常情况下，隐式结束位置是开始位置加上跨越的行数。

grid-row: span 2 / span 2; // 这个属性也设置网格项跨越两个行，不同的是它明确指定了开始位置和结束位置都要跨越两个行。使用 / 符号将开始位置和结束位置分隔开来，两边的 span 2 分别表示开始和结束位置都跨越两个行。

设置间距

gap: 0.5rem; // 整体设置间距

grid-gap: 50px 100px; // 只能设置行列之间的间距, 单个值表示行列一样

grid-column-gap: 50px; // 列间距

grid-row-gap: 50px; // 行间距

column-gap: 40px; // 列间距

row-gap: 40px; // 行间距

网格线

设置一个网格元素的网格线从第一列开始，第三列结束

.item1 { grid-column-start: 1; grid-column-end: 3; }

设置一个网格元素的网格线从第一行开始，第三行结束

.item1 { grid-row-start: 1; grid-row-end: 3; }

<div class="grid-container">
  <div class="item1">头部</div>
  <div class="item2">菜单</div>
  <div class="item3">主要内容区域</div>  
  <div class="item4">右侧</div>
  <div class="item5">底部</div>
</div>

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  /* 也可以用 grid-template-areas */
  grid:
  'header header header header header header'
  'menu main main main right right'
  'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}


// 用设置行列的写法
.item1 { grid-column: span 3 / span 3; }
.item2 { grid-row: 2 / span 2; }
.item3 { grid-row: 2;grid-column: 2; }
.item4 { grid-row: 2;grid-column: 3; }
.item5 { grid-column: 2 / span 3; }

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1.5fr;
  grid-template-rows: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

1.0 gap属性

CSS 中的 gap 属性用于设置网格布局（Grid Layout）或弹性盒子布局（Flexbox）中的行与列之间的间距。它可以控制元素之间的空隙大小。

对于网格布局，gap 属性设置的是行与列之间的间距。对于弹性盒子布局，gap 属性设置的是弹性盒子项目之间的间距。

.grid-container { display: grid; gap: 10px; }

.flex-container { display: flex; gap: 20px; }

1.0 position定位位置简写

.element { inset: top right bottom left; }

.element {
  inset: 10px; /* 上右下左都为 10px */
}

.element {
  inset: 10px 20px; /* 上下为 10px，左右为 20px */
}

.element {
  inset: 10px 20px 30px; /* 上为 10px，左右为 20px，下为 30px */
}

.element {
  inset: 10px 20px 30px 40px; /* 上右下左分别为 10px、20px、30px、40px */
}

1.1文字溢出省略号:

文字单行溢出:

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

多行文字溢出:

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

1.11竖线：

<span style="display: inline-block; width: 2px; height: 16px; background: rgb(238, 238, 238); margin: 0px 20px;"></span>

1.2css变量：

CSS变量又称CSS自定义属性，通过在css中自定义属性--var与函数var()组成，var()用于引用自定义属性。谈到为何会在CSS中使用变量，以下使用一个示例讲述。

:root {
 --c-color: orange;
}
.title {
 background-color: var(--c-color);
}

1.3渐变：

渐变分为线性渐变、径向渐变，这里笔者直接记录的使用方式，也是为了使用的时候更加的直观，这里说下，在使用线性渐变的时候，使用角度以及百分比去控制渐变，会更加的灵活

使用方式:

//渐变(方向)
background: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));

//渐变(角度)
background: linear-gradient(88deg, #4DF7BF 0%, rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191, 0) 100%);

边框渐变:

border有个border-image的属性，类似background也有个background-image一样,通过为其设置渐变颜色后，实现的渐变，后面的数字4为x方向偏移量

使用方式:

.border-grident{
  margin-top: 20px;
  width: 200px;
  height: 200px;
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
}

渐变实现边框三角形

border:5px solid transparent;
border-image: radial-gradient(53% 120%, transparent 0px, transparent 100%, cyan 100%) 5;
background: #246A6A;

封装按钮

<template>
    <div class="button">
        <slot></slot>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    min-width: 30px;
    border: 5px solid transparent;
    border-image: radial-gradient(62% 62%, transparent 0px, transparent 100%, cyan 100%) 5;
    box-sizing: border-box;
    cursor: pointer;
    background: rgba(15, 248, 248, 0.1);
}
</style>

1.4 background-size：cover和contain以及100%

contain:图片放大至满足背景区域的最小边即止，当背景区域与背景图片的宽高比不一致的情况下，背景区域可能会长边下有空白覆盖不全。cover:图片放大至能满足最大变时为止，当背景区域与背景图片的宽高比不一致时，背景图片会在短边下有裁切，显示不全。

百分比:可以设置两个值

第一个设置宽度，第二个设置高度
如果只设置了一个值，那么第二个值默认会被设置为auto

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .bg{
      width: 100%;
      height: 300px;
      background: url('./img/mtk.png');
      /* background-size: contain; */ 
      /* background-size: cover; */
      background-size: 100%;
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div class="bg"></div>
</body>
</html>

结果依次为下图展示:

contain：

cover:

百分比（这里是100%）：

1.5 css伪类三角形:

首先来看下示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css-三角形</title>
  <style>
    .triangle {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orangered skyblue gold yellowgreen;
}
  </style>
</head>
<body>
  <div class="triangle">
  </div>
</body>
</html>

如果想要一个下的三角形，可以让border的上边框可见，其他边框颜色都设置为透明

.down-triangle {
    width: 0;
    height: 0;
    border-top: 50px solid skyblue;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

实现按钮右上角三角

.el-row::before {
    content: "";
    width:0;
    height: 0;
    border:60px solid transparent;
    border-right:60px solid #e3e3e3;
    transform: rotate(135deg);
    position: absolute;
    right: -61px;
    top: -61px;
    cursor: pointer;
  }
 .el-row::after {
    content: "信息化";
    font-size: 12px;
    width: 50px;
    height: 40px;
    color: #7e7e7e;
    transform: rotate(45deg);
    position: absolute;
    right: 13px;
    top: 16px;
    font-weight: bold;
    letter-spacing:2px;
    cursor: pointer;
  }

1.6 媒体查询

页面头部必须有meta关于viewport的声明

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

通常在做响应式布局的时候，以及大屏的时候很常用的，从而实现在不通分辨率下，实现不同的展示效果

/* 超过1920分辨率后显示多列 */
@media screen and (min-width:1920px) {
  .car_box.el-card {
    min-width: 450px !important;
    width: 450px !important;
  }
}

1.7 elementui样式修改的几种方式:

笔者目前技术栈是vue，在修改elementui的样式真的是苦不堪言，style使用css的预处理器(less, sass, scss)的写法如下

// 第一种/deep/
/deep/ .test {
 ***
}

// 第二种::v-deep
::v-deep .test{
 ***
}

// 第三种:deep()
:deep(.test){
 ***
}

1.8 图片平铺

object-fit: cover;
object-fit: contain;

1.9 文字换行

word-wrap: break-word;

2.0 段前空格

white-space: pre-wrap;

2.1 文字竖着排版

tb-rl 默认

vertical-lr 垂直方向,从左向右

vertical-rl 垂直方向,从右向左

1.7 修改默认滚动条

/* 滚动条容器 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background-color: #dedfe1;
    border-radius: 10px;
    -webkit-transition: all .2s ease-in-out;
    &:hover {
        background-color: #c8c9cc;
        cursor: pointer;
    }
}
/* 滚动条按钮 */
::-webkit-scrollbar-button {
    display: none;
}

2.2 样式水平垂直居中

1. text-aling + lin-height

.parent {
    text-align: center;
    height: 20px;
    line-height: 20px;
}
.son {
    display: inline-block;
}

1. margin + padding

.parent {
    padding-top: 25px; /* (父盒子高-子盒子高) / 2 */
}
.son {
    display: block;
    margin: 0 auto;
}

1. postion + transform

.parent {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

1. postion + margin

.parent {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    width: 50px;
    height: 50px;
}

1. postion + margin 适合盒子有宽高

.parent {
    position: relative;
}
.son {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

1. flex

// 方法1
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
// 方法2
 .parent {
    display: flex;
  }
.child {
    margin: auto;
  }

1. table-cell + vertical-align

// 方法1
.parent {
    display：table-cell;
    vertical-align：middle;
}
.son {
    margin：auto;
}
// 方法2
  .parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
.child {
    display: inline-block;
  }

1. grid

// 方法0 超级居中 place-items 是同时设置 align-items 和 justify-items 的快速方法
.parent {
  display: grid;
  place-items: center;
}
// 方法1
.parent {
     display: grid;
}
.child {
     justify-self: center;
     align-self: center;
}
// 方法2
  .parent {
    display: grid;
    /* The following 3 ways of writing are OK */
    /* 1 */
    /* justify-content: center;
    align-content: center; */
/* 2 */
    /* align-items: center;
    justify-items: center; */
/* 3 */
    place-content: center;
  }

2.3 font-size小于12px

font-size: 11px;
-webkit-text-size-adjust: none;

2.4 快速从html生成css树

1.安装CSS Tree

2.框选html标签

3.右键选控制面板(ctrl+shift+p)

4.选择Generate CSS tree

5.删除多余代码

2.5 解决vue 初始化页面闪动问题

// 在css代码加上
[v-cloak] {
    display: none;
}

// 如果还没解决就在根元素加上 
style="display:none;" :style="{display:'block'}"

2.6 避免 FOUC（无样式内容闪烁）

FOUC - FlashOf Unstyled Content 文档样式闪烁
 <style type="text/css" media="all">@import"../fouc.css";</style>
 而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再
去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是
没有样式的，这段时间的长短跟网速，电脑速度都有关系。

 解决方法简单的出奇，只要在 <head> 之间加入一个 <link> 或者 <script> 元素就可以了。

2.7 点击穿透

 img {
       position: absolute;
       left: 0;
       pointer-events: none;
     }

2.8 scss常用语法

1. 嵌套
.page {
  .page-header{
    .header-left {}
  }
  .page-content {}
}

2. 变量
$color:red;

/* 使用 */
.scss_content{
   color:$color;
}

3. 计算
@use "sass:math";
$vw_base: 1920;
$vh_base: 1080;
/* 计算vw */
@function vw($px) {
@return math.div($px,  $vw_base) * 100vw;
}

/* 计算vh */
@function vh($px) {
@return math.div($px,  $vh_base) * 100vh;
}


/* math.div报错的时候用下面的 */
/* 计算vw */
@function vw($px) {
    @return ($px / $vw_base) * 100vw;
}

/* 计算vh */
@function vh($px) {
    @return ($px / $vh_base) * 100vh;
}

/* 使用 */
.head{
  font-size:vh(100);
}

4. 混合
@mixin flex($type) {
    display: flex;

    /* 水平居中 */
    @if $type ==1 {
        justify-content: center;
    }

    /* 垂直居中 */
    @else if($type ==2) {
        align-items: center;
    }

    /* 水平垂直居中 */
    @else if($type ==3) {
        justify-content: center;
        align-items: center;
    }

    /* 水平拉伸垂直居中 */
    @else if($type ==4) {
        justify-content: space-between;
        align-items: center;
    }

    /* 水平拉伸换行 */
    @else if($type ==5) {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    /* 换行 */
    @else if($type ==6) {
        flex-wrap: wrap;
    }
}
/* 使用 */
@include flex(1);

scss 配置:root var 切换主题

1. 声明全局样式

利用:root var 可以被动态修改的特性,把:root 的变量赋值给 scss的变量

src/styles/theme.scss

// base color
:root {
  --white: #FFFFFF;
  --black: #000000;

  --linear-gradient1: linear-gradient(var(--el-color-primary-dark-5), var(--el-color-primary-dark-6));
  --linear-gradient2: radial-gradient(var(--el-color-primary-dark-2), var(--el-color-primary-dark-3),var(--el-color-primary-dark-4), var(--el-color-primary-dark-5));

  --font12: 12px;
  --font14: 14px;
  --font16: 16px;
  --font18: 18px;
  --font20: 20px;

  --themeColor: var(--el-color-primary);
  --logoText: var(--font16);
  --logoColor: var(--white);
  --menuText: var(--font16);
  --menuColor: var(--el-color-info-light-7);
  --menuActiveColor: var(--white);
  --menuBackground: var(--linear-gradient1);
  --sidebarText: var(--font14);
  --sidebarColor: var(--white);
  --sidebarActiveColor: var(--white);
  --sidebarBackground: var(--el-color-primary-dark-5);
  --sidebarActiveBackground: var(--el-color-primary);
  --sidebarHoverBackground: var(--el-color-primary-dark-2);
  // --mainText: var(--font14);
  // --mainColor: var(--white);
  // --mainBackground: var(--white);
  // --screenText: var(--font14);
  --screenColor: var(--white);
  --screenLineColor: var(--el-color-primary-dark-2);
  --screenBackground: var(--linear-gradient2);
}

// scss变量
$themeColor: var(--themeColor); // 主题颜色
$logoText: var(--logoText); // logo文字大小
$logoColor: var(--logoColor); // logo文字颜色
$menuText: var(--menuText); // 顶部菜单文字大小
$menuColor: var(--menuColor); // 顶部菜单文字颜色
$menuActiveColor: var(--menuActiveColor); // 顶部菜单选中文字颜色
$menuBackground: var(--menuBackground); // 顶部菜单背景颜色
$sidebarText: var(--sidebarText); // 侧边栏文字大小
$sidebarColor: var(--sidebarColor); // 侧边栏文字大小
$sidebarActiveColor: var(--sidebarActiveColor); // 侧边栏文字大小
$sidebarBackground: var(--sidebarBackground); // 侧边栏背景颜色
$sidebarActiveBackground: var(--sidebarActiveBackground); // 侧边栏选中背景颜色
$sidebarHoverBackground: var(--sidebarHoverBackground); // 侧边栏悬浮背景颜色
// $mainText: var(--mainText); // 内容文字大小
// $mainColor: var(--mainColor); // 内容文字颜色
// $mainBackground: var(--mainBackground); // 内容背景颜色
// $screenText: var(--screenText); // 大屏文字大小
$screenColor: var(--screenColor); // 大屏文字颜色
$screenLineColor: var(--screenLineColor); // 大屏图表线颜色
$screenBackground: var(--screenBackground); // 大屏背景颜色

2.导出变量供js和模板使用

src/styles/theme.modules.scss


:export {
  themeColor: var(--themeColor);
}

3.动态修改主题的方法

src/utils/theme.js

import variables from "@/assets/styles/variables.module.scss";

// 处理主题样式
export function handleThemeStyle(theme) {
  theme = getColor(theme)
  document.documentElement.style.setProperty("--el-color-primary", theme);
  for (let i = 1; i <= 9; i++) {
    document.documentElement.style.setProperty(
      `--el-color-primary-light-${i}`,
      `${getLightColor(theme, i / 10)}`
    );
  }
  for (let i = 1; i <= 9; i++) {
    document.documentElement.style.setProperty(
      `--el-color-primary-dark-${i}`,
      `${getDarkColor(theme, i / 10)}`
    );
  }
}
/**
 * 获取主题色
 */
const getColor = (color) => {
  if (!color || typeof color !== 'string' || !color.match(/^#[0-9A-Fa-f]{6}$/)) {
    return '#1E90FF'; // 默认颜色
  }
  return color;
}

// hex颜色转rgb颜色
export function hexToRgb(str) {
  str = getColor(str)
  str = str.replace("#", "");
  let hexs = str.match(/../g);
  for (let i = 0; i < 3; i++) {
    hexs[i] = parseInt(hexs[i], 16);
  }
  return hexs;
}

// rgb颜色转Hex颜色
export function rgbToHex(r, g, b) {
  let hexs = [r.toString(16), g.toString(16), b.toString(16)];
  for (let i = 0; i < 3; i++) {
    if (hexs[i].length == 1) {
      hexs[i] = `0${hexs[i]}`;
    }
  }
  return `#${hexs.join("")}`;
}

// 变浅颜色值
export function getLightColor(color, level) {
  let rgb = hexToRgb(color);
  for (let i = 0; i < 3; i++) {
    rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
  }
  return rgbToHex(rgb[0], rgb[1], rgb[2]);
}

// 变深颜色值
export function getDarkColor(color, level) {
  let rgb = hexToRgb(color);
  for (let i = 0; i < 3; i++) {
    rgb[i] = Math.floor(rgb[i] * (1 - level));
  }
  return rgbToHex(rgb[0], rgb[1], rgb[2]);
}

/**
 * 切换主题
 */
export function changeTheme(themeName, color) {
  const themeList = {
    // 只修改主题色
    "theme-color": color,
    // 默认主题
    "theme-dark": '#409EFF',
    // 浅色主题
    "theme-light": '#ff0000',
  };
  const theme = themeList[themeName];
  handleThemeStyle(theme);
}

/**
 * 获取主题色
 */
export const getThemeColor = (color = '--themeColor') => {
  return getComputedStyle(document.documentElement).getPropertyValue(color)
}



// hex颜色转rgb颜色
export function hexToRgba(str: any, alpha = 0.1) {
  str = str.replace("#", "");
  const hexs = str.match(/../g);
  for (let i = 0; i < 3; i++) {
    hexs[i] = parseInt(hexs[i], 16);
  }
  return `rgba(${hexs[0]}, ${hexs[1]}, ${hexs[2]}, ${alpha})`
}

// rgb 转 rgba
export function rgbToRgba(rgbStr: any, alpha = 0.1) {
  // 提取rgb字符串中的数字部分
  const hexs = rgbStr.match(/\d+/g).map(Number);
  return `rgba(${hexs[0]}, ${hexs[1]}, ${hexs[2]}, ${alpha})`;
}

2.9 filter: drop-shadow 图片改颜色组件

<!-- 可改颜色图片容器 -->
<template>
  <div class="img-box" :style="{ width: size + 'px', height: size + 'px' }">
    <img :src="src" alt=""
      :style="{ width: size + 'px', height: size + 'px', filter: `drop-shadow(${size}px 0 ${color})`, transform: `translateX(-${size}px)` }">
  </div>
</template>

<script setup>
import variables from "@/assets/styles/variables.module.scss";

const props = defineProps({
  src: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: variables.themeColor
  },
  size: {
    type: Number,
    default: 18
  }
});
</script>

<style scoped lang="scss">
.img-box {
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}
</style>

3.0 filter 实现网站置灰

// 网站置灰
html {
     filter: grayscale(100%);
}

// 置灰兼容写法
.gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}

接下来我们看看 filter 属性还有哪些实用的属性值

filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url();

（1）blur()：模糊

blur() 函数用于设置元素模糊效果， 它将高斯模糊视觉效果应用于元素。此函数接受一个 CSS 长度值来确定屏幕上有多少像素需要相互融合以生成模糊结果。传递的 CSS 长度值越大，应用到元素的模糊度就越高。如果不提供值，则使用默认值 0。

.image {
  -webkit-filter: blur(0|2px|5px); 
  filter: blur(0|2px|5px);
}

下面是使用三个值时对应的效果：

这个属性可以用来实现常见的毛玻璃效果。

（2）brightness()：亮度

brightness() 函数可用于调整图像的亮度级别，使其看起来更亮或更暗。当值为 0% 时，会产生全黑图像。值为 100% 或 1 会使图像保持其原始亮度级别。大于或小于 100% 或 1 的值决定图像的暗度或亮度。

.image {
  -webkit-filter: brightness(50%|100%|200%); 
  filter: brightness(50%|100%|200%);
}

下面是使用三个值时对应的效果：

（3）contrast()：对比度

contrast() 函数用于调整图像的对比度，也就是调整图像最暗和最亮部分之间的亮度差异。它接受百分比或小数值来确定图像的对比度级别——值为 0 会导致完全灰色的图像。高于 100% 和 1 的值会增加对比度，而低于 100% 的参数会降低图像的对比度。

.image {
  -webkit-filter: contrast(50%|100%|200%); 
  filter: contrast(50%|100%|200%);
}

下面是使用三个值时对应的效果：

（4）opacity()：不透明度

opacity() 函数将透明效果应用于图像。它接受百分比或小数值来决定应用于图像的透明度。0% 或 0 的不透明度将产生完全透明的元素。100% 不透明度将显示不透明。将不透明度设置在 0% 和 100% 之间将使元素或图像部分透明。

.image {
  -webkit-filter: opacity(10%|40%|80%); 
  filter: opacity(10%|40%|80%);
}

下面是使用三个值时对应的效果：

那这个不透明度滤镜和CSS中的 opacity 属性有啥区别的？它们都用于控制元素的透明度。但是 filter 属性会启动硬件加速。浏览器会将计算任务卸载到图形处理单元 (GPU) — 一种旨在加速系统内图形渲染的专用处理器。这会提高浏览器的效率并释放 CPU 来执行其他任务。

（5）sepia() ：棕褐色

sepia() 函数可以为图像添加柔和的褐色色调，使图像看起来更温暖、更复古。它类似于使用灰度滤镜，但色调为褐色。它接受 0 到 1 之间的小数值，或最大为 100% 的百分比值。值为 0 会使图像保持不变。值为 100% 或 1 会将图像完全变为棕褐色，而介于 0% 和 100% 之间的值会使图像的色调介于其原始颜色和完全棕褐色之间。

.image {
  -webkit-filter: sepia(10%|40%|80%); 
  filter: sepia(10%|40%|80%);
}

下面是使用三个值时对应的效果：

（6）drop-shadow()：阴影

drop-shadow() 函数用于增加图像的阴影，和 box-shadow 的作用类似，使图像看起来更加立体。

drop-shadow() 函数接受四个参数：

<offset-x>：长度值，指定元素和投影之间的水平距离。正值将阴影置于元素右侧，负值将阴影置于左侧。
<offset-y>：长度值，指定元素和投影之间的垂直距离。正值将阴影置于元素下方，负值将阴影置于其上方。
<blur-radius>: 阴影的模糊半径指定为 CSS 长度单位。值越大，阴影变得越模糊。如果未指定，则默认为 0，产生清晰且不模糊的阴影。不允许使用负值。
<color>：阴影的颜色。如果未指定，则默认为黑色。

.image-1 {
  filter: drop-shadow(0);
}

.image-2 {
  -webkit-filter: drop-shadow(4px 4px 10px yellow);
  filter: drop-shadow(4px 4px 10px yellow);
}

.image-3 {
  -webkit-filter: drop-shadow(8px 8px 12px yellow);
  filter: drop-shadow(8px 8px 12px yellow);
}

下面是使用三个值时对应的效果：

（7）saturate()：饱和度

saturate() 函数用于改变元素中颜色的饱和度。饱和元素的颜色比较鲜艳；对于曝光不足的图像可以增加饱和度，反之亦然。饱和度可以用百分比表示，0% 表示完全不饱和，100% 表示与原图像一样。

.image {
  -webkit-filter: saturate(10%|150%|350%); 
  filter: saturate(10%|150%|350%);
}

下面是使用三个值时对应的效果：

（8）注意事项

上面介绍的滤镜都是单个使用的，其实 filter 属性支持设置多个滤镜，其语法如下：

.multiple-effects {
    filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
}

CSS 会根据它们出现的顺序将它们应用于元素：

img {
   filter: opacity(50%) drop-shadow(20px 10px 0px black);
}

除此之外，filter 属性还接受以下两个值：

initial：filter 属性的默认值，会解析为 none。
inherit：从元素的直接父级计算的 filter 属性的值。