- 博客(104)
- 收藏
- 关注
RSS订阅原创 分享几个拖拽组件
一款强大且兼容性极好的拖拽排序库, 兼容「IE7+」, 并且支持 「vanilla JavaScript / Angular / React」等框架.
2024-06-25 21:04:37
1381
原创 CSS中使用应用在伪元素中的计数器属性counter-increment
计数器基本使用不同样式的序列样式，和嵌套计数器。counter()，counter-increment，counter-reset，counter-set
2024-06-21 23:54:07
1136
原创 clip-path参数的详细介绍
上篇文章我们介绍了 clip-path 的基本概述和一些主要参数，这次我们来详细介绍一些各个参数的详细用法函数是clip-path的一种类型，它允许你定义一个圆形裁剪区域。circle()pxempositionleftcenterrighttopbottom以下是一些使用circle()在这个例子中，.element的可见区域是一个半径为 100px 的圆形，位于元素的中心。在这个例子中，我们明确指定了圆形的位置为(50% 50%)，这实际上与默认位置相同（即元素的中心）。
2024-06-04 01:10:06
1086
原创 css 中clip 属性和替代方案 clip-path属性使用
作用clip属性用于定义一个裁剪区域，该区域外的元素内容将不可见。适用元素clip属性只对绝对定位（）或固定定位（）的元素有效，并且元素不能设置，如果设置clip将不起作用(但是经过我的测试并没出现这个问题属性值：接受四个值，分别表示裁剪区域的左上角、右上角、右下角和左下角的位置，通常使用的形式。top:定义第一个裁切点开始坐标，也就是从元素左上角什么位置开始right：定义第二个裁切点坐标，也就是说横向裁切从元素什么位置结束，次之如果设置的小于top裁切的长方形没有宽度所以将不生效bottom。
2024-06-02 01:03:39
2175
原创 css 中box-shadow使用总结
box-shadow是 CSS 中的一个属性，用于在元素框的外部添加阴影效果。通过调整阴影的偏移量、模糊度、扩展距离和颜色，可以创建出各种独特的视觉效果。box-shadow是一个功能强大的 CSS 属性，通过调整其各个参数，可以轻松创建出各种独特的阴影效果。在网页设计中灵活运用阴影效果，可以使页面更加生动、立体和吸引人。**性能考量：**复杂的阴影效果，尤其是高模糊度，可能影响页面渲染性能，特别是对于动画或在性能较低的设备上。适度使用以保持性能。
2024-05-21 22:45:11
881
原创 解决uniapp中的web-view页面进入时全屏问题
但是在 app调试或真机上，无论如何，web-view都占满全屏，怎么调样式都没用，都无效。上边方法是用过js的方式把web-view元素动态添加到页面中，并且给他设置宽高，和间距。在h5 浏览器下显示正常，我通过样式控制，上面是web-view，下面是菜单栏。即使把 web-view的style设为display:none，也不隐藏。上面的代码打包成ios的app的时候。会占据全屏，导致其他元素无法显示。开发应用的时候，我们使用。
2024-05-16 23:47:56
5266
1
原创 css中用于设置光标颜色的属性
是一个 CSS 属性，它用于定义输入光标（caret）的颜色。这里的“插入光标”（insertion caret）指的是在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。当值为一个具体的颜色值时，可以使用所有 CSS 支持的颜色表示方式，如 RGB、十六进制、命名颜色等。在这个例子中，可编辑区域内的文字颜色被设置为蓝色，而光标的颜色被设置为黄色。在这个例子中，输入框内的文字颜色被设置为蓝色，而光标的颜色被设置为红色。属性的元素）的插入光标（caret）的颜色。
2024-05-13 10:46:20
1199
原创 使用css的box-reflect属性制作倒影效果
是一个在 CSS 中创建元素倒影效果的非标准属性。尽管它在过去的一些 WebKit 浏览器中（如旧版的 Safari 和 Chrome）得到了支持，但由于它并未成为 CSS 标准的一部分，因此在现代浏览器中的兼容性较差。以下是对。
2024-05-09 11:02:42
1249
原创 box-decoration-break 使用介绍
默认情况下，当行内元素跨越多行时，其背景、边框等样式会在每行的开始和结束处被裁剪，这可能导致视觉效果的不连续。然而，使用box-decoration-break属性，可以改变这种默认行为，确保在跨行、跨列或跨页时，元素的样式能够保持连续性和一致性。通过使用该属性，可以确保元素的样式在跨行、跨列或跨页时保持连续性和一致性，从而创建更具吸引力和一致性的视觉效果。另外，在某些浏览器中（如Chrome），可能需要添加浏览器前缀（如。）中，特别是在它们跨越多行、多列或跨页（如打印时）时的渲染方式。
2024-05-09 02:33:15
585
原创 border-image-slice详细说明
上一篇文章我们介绍了的用法，其中都比较简单好理解，这边文章我们重点学一下属性，它用于定义边框图像如何被切割并应用到元素的边框上。这个属性允许你指定边框图像的四个边缘（顶部、右侧、底部、左侧）的向内偏移量，从而将边框图像切割成九个区域：四个角、四条边和一个中间部分。如下图所示：我们结合上边的图片来详细学习一下。
2024-05-01 03:07:49
1746
原创 css 中border-image学习及使用
在CSS中，是一个强大的属性，它允许你使用图片来定义元素的边框，替代传统的纯色、虚线或实线边框。下面我们对属性进行详细学习：: 必需。指定作为边框图片的图像的路径。: 可选。定义图片如何被分割成九个部分来创建边框效果。可以是数值、百分比或填充关键词（fill），默认是100%。: 可选。设置边框图像的宽度，覆盖由产生的宽度。: 可选。设置边框图像超出边框盒的量。: 可选。定义图片如何在边框上重复。可能的值包括 , , , 和 。2. 简写形式常见简写形式为：如果只提供一个数值或百分比，它
2024-04-29 00:43:46
1263
原创 css中新型的边框设置属性border-inline
是 CSS 逻辑属性的重要组成部分，用于在书写模式无关的情况下设置元素的内联方向边框。掌握并运用这些逻辑属性有助于创建出更灵活、适应性更强的网页布局和样式，特别是在响应式设计和多语言支持场景中。
2024-04-24 23:50:15
938
原创 css中新型的边框设置属性border-block
这个属性是简写属性，可以同时设置 border-block-width、border-block-style 和 border-block-color。其中，border-block-start 用于设置元素的开始边界样式，而 border-block-end 用于设置元素的结束边界样式。在 CSS Grid 或 Flexbox 布局中，它尤其有用，因为它可以让你同时控制元素的顶部和底部边框，或者左侧和右侧边框，而无需分别指定。但在实际应用中需关注浏览器兼容性，并合理结合传统边框属性进行样式设定。
2024-04-24 17:10:44
1242
原创 js中用来获取图片的实际尺寸的naturalWidth和 naturalHeight使用记录
是 HTMLImageElement 对象的属性，用于获取或设置图像的原始尺寸。这些属性在处理图像时非常有用，尤其是在需要知道图像的物理尺寸而不仅仅是在页面上呈现的尺寸时。属性，你可以更准确地处理图像数据，尤其是在需要知道图像的物理尺寸时，这些属性提供了重要的信息。
2024-04-22 17:12:32
1212
原创 css中设置元素大小的属性block-size
的逻辑组合，允许你同时设置元素的最小和最大高度。这些属性旨在让布局不再依赖于传统的物理方向（如上下左右），而是基于逻辑方向（如开始、结束、之前、之后）。这有助于在水平和垂直方向都能更好地控制布局，特别是在多语言环境中，其中文本可能从右到左或从下到上流动。因此，在使用此属性时，建议查阅最新的 CSS 规范并测试不同浏览器的兼容性。属性一起使用，以控制元素的盒模型（包括内容、内边距和边框）如何计算其总大小。是 CSS 中的一个属性，它用于设置元素的块级尺寸（即元素的高度）。
2024-04-18 20:05:02
872
原创 css中backface-visibility使用
是一个 CSS 属性，用于控制元素的背面是否可见。它主要用于在进行3D转换时控制元素的背面可见性。当一个元素被旋转或进行其他3D变换时，通常浏览器默认会进行背面剪裁（backface culling），使得元素的背面不可见，以提高性能和减少不必要的渲染。然而，有时我们可能希望元素的背面在旋转过程中仍然可见，这时就可以使用。需要注意的是，不同的浏览器可能对这个属性的支持程度不同。的背面则被设置为可见。当这两个元素进行3D旋转时，的背面被设置为不可见，而。的背面将不会显示，而。的背面则会正常显示。
2024-04-17 20:47:11
730
原创 css 中backdrop-filter使用
是一个强大的 CSS 属性，通过它可以为页面背景添加各种图形效果。然而，在使用时需要注意其性能影响和浏览器兼容性，并根据实际需求进行适当的应用和优化。通过不断学习和实践，我们可以更好地掌握这一属性，并将其应用于实际项目中，创造出更加美观和引人入胜的界面效果。它允许我们改变元素背后内容的视觉效果，从而创造出新颖、引人注目的界面设计。通过应用不同的滤镜函数，我们可以为页面背景添加模糊、亮度调整、颜色变换等效果。元素背后的内容将被应用模糊效果，同时元素的背景被设置为半透明的白色。
2024-04-17 09:39:30
1618
原创 css中all 的使用记录
在 CSS 中是一个特殊的属性值，它允许我们重置元素或元素父级的所有属性到其初始值、继承的值或取消设置的值。这一属性非常有用，特别是在需要快速重置多个属性的情况下，它避免了逐一设置每个属性的繁琐过程。属性时，先仔细考虑其影响，并与其他样式管理工具（如 CSS Modules、BEM 等）结合使用，以确保样式的可维护性和一致性。属性提供了便利的重置功能，但在使用时也需要谨慎。过度使用可能会导致样式失去控制，特别是在大型项目中。
2024-04-12 23:27:59
806
原创 CSS aspect-ratio属性设置元素宽高比
的宽度会随其父容器变化，而高度则会自动调整以保持1:1的比例。如果图片本身的宽高比不是1:1，超出容器的部分将被裁剪掉。是CSS的一个属性，用于设置元素的期望宽高比。它设置确保元素保持特定的比例，不受其内容或容器大小的影响。）分隔的两个数字，表示宽度与高度的比例。设置元素的宽高比为16:9。
2024-04-10 00:26:28
770
原创 npm run dev命令的执行顺序和原理
当我们在开发vue、react等项目的时候经常会用npm run *命令，那么当我们执行这个命令的时候具体都做了些什么呢？接下来我们就来详细探索一下。
2024-03-17 05:54:05
3407
原创 css选择器nth-last-child(n)的学习理解
此选择器和nth-child(n)类似都是选择其父元素的第 n 个子元素，唯一的区别在于它是从父元素的子元素末尾开始往前数，一直到第一个子元素。
2024-03-14 20:11:27
1182
原创 关于设置html不让浏览器进行缓存的问题
我们现在在做vue，react等项目的时候，由于是单页面的纯前端项目，他们的入口文件往往都是静态的html单一文件。这里需要注意的是，取消缓存可能会增加服务器的负载，因为每次请求都需要从服务器重新获取内容。因此，在决定取消缓存时，请确保权衡利弊，并考虑使用适当的缓存策略来优化性能和用户体验。
2024-03-07 13:33:37
4590
原创 关于谷歌新版调试用具(Chrome Dev Tool )，网络选项(chrome-network)默认开启下拉模式的设置
第三：在输入框中输入“net”会自动检索到 “Redesign of the filter bar in the Network Panel”今天在使用谷歌浏览器进行调试的时候，打开调试工具网络选项发现过滤不同模式的选项卡不见了，转而变成一个下拉式选项，如下图。最后把该选项取消勾选，然后"f12"重新打开调试工具。就会变成选项卡形式的过滤了。第二：切换到实验选项卡。
2024-01-31 17:14:37
2340
4
原创 npm运行没反应的问题
我们不管运行npm的什么命令都是一闪然后就没有任何输出，我们在经常切换node版的时候会遇到。文件然后把这个文件删除了，在运行。
2023-06-19 11:28:25
2631
2
让window支持zip命令，并且在终端可以使用zip进行压缩文件
2024-06-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人