qwguo

是 CSS 中的一个属性，用于设置文本、内联元素、表格单元格和表格列的书写方向、文本排列以及块流方向。以下是对。

一款强大且兼容性极好的拖拽排序库, 兼容「IE7+」, 并且支持 「vanilla JavaScript / Angular / React」等框架.

鼠标光标样式设置

计数器基本使用不同样式的序列样式，和嵌套计数器。counter()，counter-increment，counter-reset，counter-set

content使用详解

上篇文章我们介绍了 clip-path 的基本概述和一些主要参数，这次我们来详细介绍一些各个参数的详细用法函数是clip-path的一种类型，它允许你定义一个圆形裁剪区域。circle()pxempositionleftcenterrighttopbottom以下是一些使用circle()在这个例子中，.element的可见区域是一个半径为 100px 的圆形，位于元素的中心。在这个例子中，我们明确指定了圆形的位置为(50% 50%)，这实际上与默认位置相同（即元素的中心）。

作用clip属性用于定义一个裁剪区域，该区域外的元素内容将不可见。适用元素clip属性只对绝对定位（）或固定定位（）的元素有效，并且元素不能设置，如果设置clip将不起作用(但是经过我的测试并没出现这个问题属性值：接受四个值，分别表示裁剪区域的左上角、右上角、右下角和左下角的位置，通常使用的形式。top:定义第一个裁切点开始坐标，也就是从元素左上角什么位置开始right：定义第二个裁切点坐标，也就是说横向裁切从元素什么位置结束，次之如果设置的小于top裁切的长方形没有宽度所以将不生效bottom。

box-shadow是 CSS 中的一个属性，用于在元素框的外部添加阴影效果。通过调整阴影的偏移量、模糊度、扩展距离和颜色，可以创建出各种独特的视觉效果。box-shadow是一个功能强大的 CSS 属性，通过调整其各个参数，可以轻松创建出各种独特的阴影效果。在网页设计中灵活运用阴影效果，可以使页面更加生动、立体和吸引人。**性能考量：**复杂的阴影效果，尤其是高模糊度，可能影响页面渲染性能，特别是对于动画或在性能较低的设备上。适度使用以保持性能。

等属性来设置表格的样式，并使用。伪类来交替改变行的背景色。在这个示例中，我们使用了。

是一个 CSS 属性，它用于定义输入光标（caret）的颜色。这里的“插入光标”（insertion caret）指的是在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。当值为一个具体的颜色值时，可以使用所有 CSS 支持的颜色表示方式，如 RGB、十六进制、命名颜色等。在这个例子中，可编辑区域内的文字颜色被设置为蓝色，而光标的颜色被设置为黄色。在这个例子中，输入框内的文字颜色被设置为蓝色，而光标的颜色被设置为红色。属性的元素）的插入光标（caret）的颜色。

是一个在 CSS 中创建元素倒影效果的非标准属性。尽管它在过去的一些 WebKit 浏览器中（如旧版的 Safari 和 Chrome）得到了支持，但由于它并未成为 CSS 标准的一部分，因此在现代浏览器中的兼容性较差。以下是对。

默认情况下，当行内元素跨越多行时，其背景、边框等样式会在每行的开始和结束处被裁剪，这可能导致视觉效果的不连续。然而，使用box-decoration-break属性，可以改变这种默认行为，确保在跨行、跨列或跨页时，元素的样式能够保持连续性和一致性。通过使用该属性，可以确保元素的样式在跨行、跨列或跨页时保持连续性和一致性，从而创建更具吸引力和一致性的视觉效果。另外，在某些浏览器中（如Chrome），可能需要添加浏览器前缀（如。）中，特别是在它们跨越多行、多列或跨页（如打印时）时的渲染方式。

上一篇文章我们介绍了的用法，其中都比较简单好理解，这边文章我们重点学一下属性，它用于定义边框图像如何被切割并应用到元素的边框上。这个属性允许你指定边框图像的四个边缘（顶部、右侧、底部、左侧）的向内偏移量，从而将边框图像切割成九个区域：四个角、四条边和一个中间部分。如下图所示：我们结合上边的图片来详细学习一下。

在CSS中，是一个强大的属性，它允许你使用图片来定义元素的边框，替代传统的纯色、虚线或实线边框。下面我们对属性进行详细学习：: 必需。指定作为边框图片的图像的路径。: 可选。定义图片如何被分割成九个部分来创建边框效果。可以是数值、百分比或填充关键词（fill），默认是100%。: 可选。设置边框图像的宽度，覆盖由产生的宽度。: 可选。设置边框图像超出边框盒的量。: 可选。定义图片如何在边框上重复。可能的值包括 , , , 和 。2. 简写形式常见简写形式为：如果只提供一个数值或百分比，它

是 CSS 逻辑属性的重要组成部分，用于在书写模式无关的情况下设置元素的内联方向边框。掌握并运用这些逻辑属性有助于创建出更灵活、适应性更强的网页布局和样式，特别是在响应式设计和多语言支持场景中。

这个属性是简写属性，可以同时设置 border-block-width、border-block-style 和 border-block-color。其中，border-block-start 用于设置元素的开始边界样式，而 border-block-end 用于设置元素的结束边界样式。在 CSS Grid 或 Flexbox 布局中，它尤其有用，因为它可以让你同时控制元素的顶部和底部边框，或者左侧和右侧边框，而无需分别指定。但在实际应用中需关注浏览器兼容性，并合理结合传统边框属性进行样式设定。

的逻辑组合，允许你同时设置元素的最小和最大高度。这些属性旨在让布局不再依赖于传统的物理方向（如上下左右），而是基于逻辑方向（如开始、结束、之前、之后）。这有助于在水平和垂直方向都能更好地控制布局，特别是在多语言环境中，其中文本可能从右到左或从下到上流动。因此，在使用此属性时，建议查阅最新的 CSS 规范并测试不同浏览器的兼容性。属性一起使用，以控制元素的盒模型（包括内容、内边距和边框）如何计算其总大小。是 CSS 中的一个属性，它用于设置元素的块级尺寸（即元素的高度）。

是一个 CSS 属性，用于控制元素的背面是否可见。它主要用于在进行3D转换时控制元素的背面可见性。当一个元素被旋转或进行其他3D变换时，通常浏览器默认会进行背面剪裁（backface culling），使得元素的背面不可见，以提高性能和减少不必要的渲染。然而，有时我们可能希望元素的背面在旋转过程中仍然可见，这时就可以使用。需要注意的是，不同的浏览器可能对这个属性的支持程度不同。的背面则被设置为可见。当这两个元素进行3D旋转时，的背面被设置为不可见，而。的背面将不会显示，而。的背面则会正常显示。

是一个强大的 CSS 属性，通过它可以为页面背景添加各种图形效果。然而，在使用时需要注意其性能影响和浏览器兼容性，并根据实际需求进行适当的应用和优化。通过不断学习和实践，我们可以更好地掌握这一属性，并将其应用于实际项目中，创造出更加美观和引人入胜的界面效果。它允许我们改变元素背后内容的视觉效果，从而创造出新颖、引人注目的界面设计。通过应用不同的滤镜函数，我们可以为页面背景添加模糊、亮度调整、颜色变换等效果。元素背后的内容将被应用模糊效果，同时元素的背景被设置为半透明的白色。

指定@keyframe动画的名称。/* 应用动画到元素 */

在 CSS 中是一个特殊的属性值，它允许我们重置元素或元素父级的所有属性到其初始值、继承的值或取消设置的值。这一属性非常有用，特别是在需要快速重置多个属性的情况下，它避免了逐一设置每个属性的繁琐过程。属性时，先仔细考虑其影响，并与其他样式管理工具（如 CSS Modules、BEM 等）结合使用，以确保样式的可维护性和一致性。属性提供了便利的重置功能，但在使用时也需要谨慎。过度使用可能会导致样式失去控制，特别是在大型项目中。

npm（Node Package Manager）是Node.js的包管理器，用于安装和管理Node.js的依赖库。

的宽度会随其父容器变化，而高度则会自动调整以保持1:1的比例。如果图片本身的宽高比不是1:1，超出容器的部分将被裁剪掉。是CSS的一个属性，用于设置元素的期望宽高比。它设置确保元素保持特定的比例，不受其内容或容器大小的影响。）分隔的两个数字，表示宽度与高度的比例。设置元素的宽高比为16:9。

accent-color修改input默认控件的颜色

css 属性选择器总结

第三：在输入框中输入“net”会自动检索到 “Redesign of the filter bar in the Network Panel”今天在使用谷歌浏览器进行调试的时候，打开调试工具网络选项发现过滤不同模式的选项卡不见了，转而变成一个下拉式选项，如下图。最后把该选项取消勾选，然后"f12"重新打开调试工具。就会变成选项卡形式的过滤了。第二：切换到实验选项卡。

我们现在在做vue，react等项目的时候，由于是单页面的纯前端项目，他们的入口文件往往都是静态的html单一文件。这里需要注意的是，取消缓存可能会增加服务器的负载，因为每次请求都需要从服务器重新获取内容。因此，在决定取消缓存时，请确保权衡利弊，并考虑使用适当的缓存策略来优化性能和用户体验。

css3 中的 element:nth-child(n)选择起详细用法

此选择器和nth-child(n)类似都是选择其父元素的第 n 个子元素，唯一的区别在于它是从父元素的子元素末尾开始往前数，一直到第一个子元素。

当我们在开发vue、react等项目的时候经常会用npm run *命令，那么当我们执行这个命令的时候具体都做了些什么呢？接下来我们就来详细探索一下。

文件，但是在没有装插件的Google浏览器中却无法浏览，这个时候我们就需要用到google的插件来解析，可以使用下边的方法进行引入，前提是可以访问Google网站。我们在做项目的时候有时候会遇到这样得需求，在页面中插入一个。上边的代码是引入google的插件，然后进行解析。格式的文档，在比较主流的浏览器中，我们可以使用。上边的代码可以在你安装了。解析插件的浏览器中嵌入。

截取指定位数小数

h5中类似小程序的onShow和onHide方法

说到跨域我们需要先了一些概念同源策略定义：同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。而浏览器也是建立在这样的同源策略基础上的它是浏览器最核心最主要的功能之一。同源定义：两个url地址如果 协议、主机、端口号三个都完全相同就属于同源，就可以正常的进行数据的交互给定一个地址：http://www.localhost:8080/abc/index.html，下列列出与之同源和非同源的例子

js在之前的版本中是不支持模块的概念的，一般我们在开发中为了我们的的项目能够多人协作开发，并且每个人定义的变量不会被他人所覆盖，我们会通过一些方式进行控制把我们的代码写到一个自执行的函数中，然后在函数中定义我们的变量名和方法名，然后我们把这些方法和变量存到一个对象中，最后通过一个对象名把它挂载到window对象上，供外界使用。这种情况虽然解决了大部分的命名冲突问题，但是还会有冲突的出现，他也没有真正的实现模块化。后来一些js社区出现了一些模块化的解决方案，require.js、sea.jsES.

vue中组件之间相互通讯传值的方式我们在使用vue进行项目开发的时候为了更好地管理项目，我们会把每个功能封装成一个个的组件，在使用的时候直接引入并且调用组件来实现代码的复用。我们在封装组件的时候经常会留有一些预留的接口，供使用的时候调用和传入不同的数据，这个时候我们就涉及到了组件之前的相互传值的问题。我这里总结了在vue中组件之前相互传值的方法：1、子组件和父组件通讯，通过调用父组件给组件自定义属性值来实现<!--parent.vue--><template> &

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...

js生成随数

我们在开发中经常会处理数组，特别是后端传给我们的扁平化数组，然后将它处理为多维结构的数组将扁平化数组转换成树形结构数组的n中方法原始数据var arr = [ { id: 1, pid: 0, text: '一级1' }, { id: 2, pid: 0, text: '一级2' }, { id: 3, pid: 1, text: '二级1-1' }, { id: 4, pid: 1, text: '二级1-2' } { id: 5, pid: 2, text: '二级2-1'.

防抖函数的定义通过延迟执行的方式，降低某种执行特别频繁事件造成的浏览器性能问题或者是过多请求服务器行为；一个需要频繁触发的函数需要在规定时间内，只让最后一次生效，前面的不生效使用场景防抖函数一般用在onScroll，onResize，onmousemove等操作很频繁的事件第一种：// 当用户输入文字后请求后端接口返回数据/** 基础代码*/// 获取dom元素var inputEle = document.getElementById('inputEle');// 定义一个