- 博客(95)
- 收藏
- 关注
RSS订阅原创 css 中box-shadow使用总结
box-shadow是 CSS 中的一个属性，用于在元素框的外部添加阴影效果。通过调整阴影的偏移量、模糊度、扩展距离和颜色，可以创建出各种独特的视觉效果。box-shadow是一个功能强大的 CSS 属性，通过调整其各个参数，可以轻松创建出各种独特的阴影效果。在网页设计中灵活运用阴影效果，可以使页面更加生动、立体和吸引人。**性能考量：**复杂的阴影效果，尤其是高模糊度，可能影响页面渲染性能，特别是对于动画或在性能较低的设备上。适度使用以保持性能。
2024-05-21 22:45:11
294
原创 解决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
224
原创 css中用于设置光标颜色的属性
是一个 CSS 属性，它用于定义输入光标（caret）的颜色。这里的“插入光标”（insertion caret）指的是在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。当值为一个具体的颜色值时，可以使用所有 CSS 支持的颜色表示方式，如 RGB、十六进制、命名颜色等。在这个例子中，可编辑区域内的文字颜色被设置为蓝色，而光标的颜色被设置为黄色。在这个例子中，输入框内的文字颜色被设置为蓝色，而光标的颜色被设置为红色。属性的元素）的插入光标（caret）的颜色。
2024-05-13 10:46:20
358
原创 使用css的box-reflect属性制作倒影效果
是一个在 CSS 中创建元素倒影效果的非标准属性。尽管它在过去的一些 WebKit 浏览器中（如旧版的 Safari 和 Chrome）得到了支持，但由于它并未成为 CSS 标准的一部分，因此在现代浏览器中的兼容性较差。以下是对。
2024-05-09 11:02:42
736
原创 box-decoration-break 使用介绍
默认情况下，当行内元素跨越多行时，其背景、边框等样式会在每行的开始和结束处被裁剪，这可能导致视觉效果的不连续。然而，使用box-decoration-break属性，可以改变这种默认行为，确保在跨行、跨列或跨页时，元素的样式能够保持连续性和一致性。通过使用该属性，可以确保元素的样式在跨行、跨列或跨页时保持连续性和一致性，从而创建更具吸引力和一致性的视觉效果。另外，在某些浏览器中（如Chrome），可能需要添加浏览器前缀（如。）中，特别是在它们跨越多行、多列或跨页（如打印时）时的渲染方式。
2024-05-09 02:33:15
407
原创 border-image-slice详细说明
上一篇文章我们介绍了的用法，其中都比较简单好理解，这边文章我们重点学一下属性，它用于定义边框图像如何被切割并应用到元素的边框上。这个属性允许你指定边框图像的四个边缘（顶部、右侧、底部、左侧）的向内偏移量，从而将边框图像切割成九个区域：四个角、四条边和一个中间部分。如下图所示：我们结合上边的图片来详细学习一下。
2024-05-01 03:07:49
335
原创 css 中border-image学习及使用
在CSS中，是一个强大的属性，它允许你使用图片来定义元素的边框，替代传统的纯色、虚线或实线边框。下面我们对属性进行详细学习：: 必需。指定作为边框图片的图像的路径。: 可选。定义图片如何被分割成九个部分来创建边框效果。可以是数值、百分比或填充关键词（fill），默认是100%。: 可选。设置边框图像的宽度，覆盖由产生的宽度。: 可选。设置边框图像超出边框盒的量。: 可选。定义图片如何在边框上重复。可能的值包括 , , , 和 。2. 简写形式常见简写形式为：如果只提供一个数值或百分比，它
2024-04-29 00:43:46
709
原创 css中新型的边框设置属性border-inline
是 CSS 逻辑属性的重要组成部分，用于在书写模式无关的情况下设置元素的内联方向边框。掌握并运用这些逻辑属性有助于创建出更灵活、适应性更强的网页布局和样式，特别是在响应式设计和多语言支持场景中。
2024-04-24 23:50:15
590
原创 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
858
原创 js中用来获取图片的实际尺寸的naturalWidth和 naturalHeight使用记录
是 HTMLImageElement 对象的属性，用于获取或设置图像的原始尺寸。这些属性在处理图像时非常有用，尤其是在需要知道图像的物理尺寸而不仅仅是在页面上呈现的尺寸时。属性，你可以更准确地处理图像数据，尤其是在需要知道图像的物理尺寸时，这些属性提供了重要的信息。
2024-04-22 17:12:32
221
原创 css中设置元素大小的属性block-size
的逻辑组合，允许你同时设置元素的最小和最大高度。这些属性旨在让布局不再依赖于传统的物理方向（如上下左右），而是基于逻辑方向（如开始、结束、之前、之后）。这有助于在水平和垂直方向都能更好地控制布局，特别是在多语言环境中，其中文本可能从右到左或从下到上流动。因此，在使用此属性时，建议查阅最新的 CSS 规范并测试不同浏览器的兼容性。属性一起使用，以控制元素的盒模型（包括内容、内边距和边框）如何计算其总大小。是 CSS 中的一个属性，它用于设置元素的块级尺寸（即元素的高度）。
2024-04-18 20:05:02
540
原创 css中backface-visibility使用
是一个 CSS 属性，用于控制元素的背面是否可见。它主要用于在进行3D转换时控制元素的背面可见性。当一个元素被旋转或进行其他3D变换时，通常浏览器默认会进行背面剪裁（backface culling），使得元素的背面不可见，以提高性能和减少不必要的渲染。然而，有时我们可能希望元素的背面在旋转过程中仍然可见，这时就可以使用。需要注意的是，不同的浏览器可能对这个属性的支持程度不同。的背面则被设置为可见。当这两个元素进行3D旋转时，的背面被设置为不可见，而。的背面将不会显示，而。的背面则会正常显示。
2024-04-17 20:47:11
291
原创 css 中backdrop-filter使用
是一个强大的 CSS 属性，通过它可以为页面背景添加各种图形效果。然而，在使用时需要注意其性能影响和浏览器兼容性，并根据实际需求进行适当的应用和优化。通过不断学习和实践，我们可以更好地掌握这一属性，并将其应用于实际项目中，创造出更加美观和引人入胜的界面效果。它允许我们改变元素背后内容的视觉效果，从而创造出新颖、引人注目的界面设计。通过应用不同的滤镜函数，我们可以为页面背景添加模糊、亮度调整、颜色变换等效果。元素背后的内容将被应用模糊效果，同时元素的背景被设置为半透明的白色。
2024-04-17 09:39:30
724
原创 css中all 的使用记录
在 CSS 中是一个特殊的属性值，它允许我们重置元素或元素父级的所有属性到其初始值、继承的值或取消设置的值。这一属性非常有用，特别是在需要快速重置多个属性的情况下，它避免了逐一设置每个属性的繁琐过程。属性时，先仔细考虑其影响，并与其他样式管理工具（如 CSS Modules、BEM 等）结合使用，以确保样式的可维护性和一致性。属性提供了便利的重置功能，但在使用时也需要谨慎。过度使用可能会导致样式失去控制，特别是在大型项目中。
2024-04-12 23:27:59
495
原创 CSS aspect-ratio属性设置元素宽高比
的宽度会随其父容器变化，而高度则会自动调整以保持1:1的比例。如果图片本身的宽高比不是1:1，超出容器的部分将被裁剪掉。是CSS的一个属性，用于设置元素的期望宽高比。它设置确保元素保持特定的比例，不受其内容或容器大小的影响。）分隔的两个数字，表示宽度与高度的比例。设置元素的宽高比为16:9。
2024-04-10 00:26:28
384
原创 npm run dev命令的执行顺序和原理
当我们在开发vue、react等项目的时候经常会用npm run *命令，那么当我们执行这个命令的时候具体都做了些什么呢？接下来我们就来详细探索一下。
2024-03-17 05:54:05
1373
原创 css选择器nth-last-child(n)的学习理解
此选择器和nth-child(n)类似都是选择其父元素的第 n 个子元素，唯一的区别在于它是从父元素的子元素末尾开始往前数，一直到第一个子元素。
2024-03-14 20:11:27
600
原创 关于设置html不让浏览器进行缓存的问题
我们现在在做vue，react等项目的时候，由于是单页面的纯前端项目，他们的入口文件往往都是静态的html单一文件。这里需要注意的是，取消缓存可能会增加服务器的负载，因为每次请求都需要从服务器重新获取内容。因此，在决定取消缓存时，请确保权衡利弊，并考虑使用适当的缓存策略来优化性能和用户体验。
2024-03-07 13:33:37
1488
原创 关于谷歌新版调试用具(Chrome Dev Tool )，网络选项(chrome-network)默认开启下拉模式的设置
第三：在输入框中输入“net”会自动检索到 “Redesign of the filter bar in the Network Panel”今天在使用谷歌浏览器进行调试的时候，打开调试工具网络选项发现过滤不同模式的选项卡不见了，转而变成一个下拉式选项，如下图。最后把该选项取消勾选，然后"f12"重新打开调试工具。就会变成选项卡形式的过滤了。第二：切换到实验选项卡。
2024-01-31 17:14:37
1464
4
原创 npm运行没反应的问题
我们不管运行npm的什么命令都是一闪然后就没有任何输出，我们在经常切换node版的时候会遇到。文件然后把这个文件删除了，在运行。
2023-06-19 11:28:25
2202
1
原创 让vscode编辑器支持smarty模版的TPL文件
该插件可以是的tpl格式的文件以html的方式显示，但是我在使用中发现安装此插件后电脑的cup会飙到很高，一会就会把vscode跑蹦掉。2、其实我们就不用安装插件，直接在vscode中进行设置就可以，文件->首选项-设置，然后在输入框中输入。然后关闭，就可以让vscode自动支持tpl文件高亮显示。然后在下边增加，在项中输入。
2022-10-11 21:42:11
991
2
原创 页面引入PDF文件
文件，但是在没有装插件的Google浏览器中却无法浏览，这个时候我们就需要用到google的插件来解析，可以使用下边的方法进行引入，前提是可以访问Google网站。我们在做项目的时候有时候会遇到这样得需求，在页面中插入一个。上边的代码是引入google的插件，然后进行解析。格式的文档，在比较主流的浏览器中，我们可以使用。上边的代码可以在你安装了。解析插件的浏览器中嵌入。
2022-10-11 21:27:11
872
原创 记录百度小程序开发者工具登录问题
在开发百度小程序的时候，用到API的时候需要登录百度app才能使用，一开始我一直是在手机上调是，后来在小程序论坛搜索找到了在开发者工具登录百度app的方法：需要在模拟器框中点击小人头，然后弹出一个扫二维码登录app的窗口，然后使用百度app扫码就可以登录了，登录后可以在开发者工具中调用一些API，这样就不用每次打包都在真机上调试。...
2022-06-13 18:44:46
265
原创 关于webstorm增加自定义代码的方法
WebStorm是前端必备的编辑器之一，功能强大好用。我们在使用WebStorm进行项目开发的时候经常会写注释，这个时候我们为了提高效率可以给工具自定义一些代码模版来让我们通过按某些端代码快速生成我们预先设置好的代码模版。具体设置步骤是：打开设置，window快捷键Ctrl+Alt+s，mac快捷键command+,打开设置窗口。在该窗口中找到Editor->Live Templates,然后在打开该项的右边找到要添加的那种文件的项：对应汉化软件然后进行添加自定义模版上边的
2022-04-18 00:14:26
2135
1
原创 js中的跨域解决方案
说到跨域我们需要先了一些概念同源策略定义：同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。而浏览器也是建立在这样的同源策略基础上的它是浏览器最核心最主要的功能之一。同源定义：两个url地址如果 协议、主机、端口号三个都完全相同就属于同源，就可以正常的进行数据的交互给定一个地址：http://www.localhost:8080/abc/index.html，下列列出与之同源和非同源的例子
2022-04-02 03:09:35
406
原创 js异步加载
问题分析在开发网站页面的时候经常会加载js文件，但是我们在加载js的时候会遇到js非常大或者执行事件长的情况下会出现页面短时间内白屏的现象。这是因为web页面是按照顺序执行的然后代码一边下载浏览器一边处理，当遇到标签浏览器会先停下来去加载相应的css文件，然后加载出来，遇到<script></script>标签会看有没有src属性，如果有就下载相应的js文件然后执行js，等js执行完毕后在继续向下执行。在这种顺序执行的情况下就会出现第一段话我们说的问题。解决方案：我们可以把
2022-03-25 00:44:00
976
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人