weixin_64684095的博客

属性可以控制背景图像的大小。设置为`cover`时，背景图像会缩放以完全覆盖元素，可能会裁剪部分图像以保持比例。设置为`contain`时，背景图像会缩放以适应元素，同时保持图像的宽高比例，可能会在元素中留下空白区域。

在上述代码中，使用`ul li:not(:first-child)`选择器选择了`<ul>`元素下除第一个`<li>`子元素之外的所有`<li>`元素，并将它们的文本颜色设置为红色。的组合来选择除第一个子元素之外的所有子元素。在 CSS 中可以使用。

export {

object-fit 属性用于指定可替换元素（如`<img>`、`<video>`等）如何适应其容器。

都是相对单位，可以使用 em 和 rem 来做网页适配。相对当前元素或最近的祖先元素的字体大小。相对于根元素 html 的字体大小。

定义三个元素，文本框，下划线，占位文字。，判断 input 中是否有输入。

设置 3 层元素，最上层元素使用 clip-path 裁剪成圆，hover 改变圆大小，添加过渡效果。

在很多网站，不管页面宽度的变化，都需要里面的图片或者视频，宽高比不变。有两种实现方式。

当监听鼠标事件时，需要了解鼠标属性所代表的位置信息。

文字描边有两种实现方式。

前言：这是一个混合属性，作用是将两个颜色混合生成一个新颜色。可以将视频和文字相融合，产生。

前言：backface-visibility 属性可以使反转 180deg 的元素隐藏，使用这个属性实现。

使用伪元素，给伪元素设置背景色，然后定位，遮盖，旋转。就可以实现旋转边框效果。

如今我们布局大多时候都是用的 flex 布局，但是有时我们也可以使用 margin 小技巧去完成布局。在弹性盒中当我们把 margin 某一个方向上设置为 auto，他的含义是用 margin 吃掉这个方向的剩余空间。

前言：clip-path 可以把一个元素裁剪成任意你想要的形状。，通过改变数值，还可以做出有趣的动画。

前言：首先我们要知道 css 动画只对数值类的 CSS 属性起作用。要实现边框转圈动画效果，实际就是渐变背景的旋转。但是在以前，渐变背景是不支持动画的。现在我们可以利用浏览器新出的。特别强大，允许开发者干扰浏览器渲染过程。允许开发者在样式代码里面，自己定义样式属性。来实现这个动画效果。

当前选中元素及当前选中元素的后代元素有没有聚焦。

当我们网站会加载很多图片的时候，有些图片尺寸很大，加载就会很慢，会导致页面长时间陷入白屏状态，用户体验很不好。所以可以使用渐进式图片，先给用户展示模糊图，这些图尺寸小，加载快，可以快速显现出来。然后再逐步传输大图，大图传输完成之后替换模糊图。这就是渐进式图片。

提供一系列的助记词，用类名来代表样式。相当于用一两行定义一个类名，不能再分解了。这就叫 CSS 原子化。.px-2 {

前言：浏览器上实现 mac docker 效果，实现思路，1. 布局，方框间距用元素代替，因为有放大缩小功能，不用元素的话，不好控制。2. 定义个 css 变量 i，用来代表放大比例。3. 确定每个元素的 i 值，根据鼠标移动，动态生成一个曲线。

前言：使用动画实现更改变量 --p，实现多行文本擦除效果，css 动画逻辑，什么样的动画是生效的，一定是一个数值类的 CSS 属性。--p 只是个变量，不是 CSS 属性，通过 Houdini API 使它变成一个属性。

前言：简单实现水波进度样式，简单好看。

前言：有趣的 3D Hover Effect 效果，通过 js 监听鼠标移动，动态赋值 rotateX，rotatey 的旋转值来实现。

前言：好看的元素倒影，可以通过-webkit-box-reflect 实现。但有兼容问题，必须是 webkit 内核的浏览器，不然没效果。

前言：有这么一个业务，需要边框随着图片宽度的变化而变化，比如一些聊天的气泡框等。实现原理：使用 border-image 属性。

前言：好看的标题动画实现。

前言：无论什么样式的轮播图，核心 JS 实现原理都差不多。所以小伙伴们，还是需要了解一下核心 JS 实验原理的。

实现原理：将 stroke-dasharray 和 stroke-dashoffset 设置为。stroke-dasharray：将描边线变成虚线、其中实线和虚线部分的长度就是它的值。使用 css 中的 stroke 属性，用来描述描边的样式，其中重要的属性。stroke-dashoffset：描边线的偏移量。方法可以获取 path 的长度。设置动画，将描边线的偏移量。理解了这两个属性的原理，才能理解描边动画实现的原理。svg 中 path 的长度，这样初始状态就是。，其中变化的过程就是描边动画。

给文字添加好看的阴影。

通过使用。

什么叫滤镜呢，就是把元素里的。

准备一个元素，将元素左上角，右上角设为圆角。然后要在左右两边拼接弧形，我们可以写两个伪元素那怎么将这两个元素做成弧形呢，可以使用渐变。这下我们有了弧形，那怎么做成效果图的样式呢，最后我们可以使用旋转。

CSS 总的来说就两块，样式计算和视觉格式化模型，而包含块就是视觉格式化模型的重要内容，理解包含块的定义，对于 CSS 布局有更好的帮助。

【代码】前端 CSS 经典：grid 栅格布局。

单行省略，双行省略，通用省略

shape 基础形状：inset 矩形，circle 圆，ellipse 椭圆，polygon 多边形。2.top，right，bottom，left 都是相对于元素的左上角。2.top，right，bottom，left 相对于元素的各边界。1.裁剪只对 fixed 和 absolute 的元素有效。1.裁剪只对 fixed 和 absolute 的元素有效。source SVG 绘制图形: path。inherit：继承父级 clip 属性。rect：规则四边形裁剪。auto：默认，不裁剪。

boxShadow 可以用逗号分割多个阴影设置，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。h-shadow: 必填，水平阴影的位置，允许负值。v-shadow: 必填，垂直阴影的位置，允许负值。inset: 可选，设置后为内侧阴影。spread: 可选，阴影大小。color: 可选，阴影颜色。blur: 可选，模糊程度。

* 定义动画 */0% {100% {/* or */from {to {/* 使用动画 */div {/* 简写 *//* animation：动画名称 动画时长（有这两个即可以完成动画，其它未设置，有默认值） *//* animation：动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画 *//* 详写 *//* 动画名称 *//* 持续时间 *//* 运动曲线 和 transition 的运动曲线一样 *//* 何时开始 */

【代码】前端 CSS 经典：清除浮动。