标签 css 下的文章 - a博客-个人博客-技术分享

css 属性：inset

作用inset 属性结合了 top, right, bottom, left 四个方向上的值，使得设置元素位置更为简洁和方便。使用inset 属性可以接受一个至四个值，分别代表 top, right, bottom, left 四个方向上的偏移量，顺序为顺时针顺序。例如：.element { inset: 10px; /* 上右下左均偏移 10 像素 */ } .element { inset: 10px 20px; /* 上下偏移 10 像素，左右偏移 20 像素 */ } .element { inset: 10px 20px 30px; /* 上偏移 10 像素，左右偏移 20 像素，下偏移 30 像素 */ } .element { inset: 10px 20px 30px 40px; /* 上偏移 10 働素，右偏移 20 像素，下偏移 30 働素，左偏移 40 働素 */ }注意事项如果只提供一个值，将应用到所有四个方向，相当于 top, right, bottom, left 均设置为这个值。如果提供两个值，第一个值应用于 top 和 bottom

技术 · 02-18

TailwindCss 使用 important 提高权重

在使用 TailwindCss 开发时会在已经封装好的UI组件中进行使用，但是由于权重问题可能会导致添加的 TailwindCss 样式无法生效，这个时候就要对 tailwindcss.config.js 文件进行 important 配置，将我们的样式权重提高。进入 tailwindcss.config.js 文件添加 important: truemodule.exports = { important: true, }就会自动生效在标签中，无须二次引入。<div class="mx-2"></div>但是这种方式有一个弊端，他会将全部样式都添加 important 提高权重，使得想通过 style 进行添加样式时就会出现样式无法显示问题，具体还是我们 style 方式添加的样式权重问题。所以谨慎使用 important 配置，并优先使用 style 方式来解决样式权重问题

技术 · 2023-09-09

button 配合 document.execCommand() 实现文字加粗效果

button 配合 document.execCommand() 实现文字加粗效果。在实现富文本编辑器的点击按钮给文本文字加粗的时候遇到了一个问题，那就是当选中文字是点击加粗按钮会取消文字的选中。想要的效果为：想要实现此效果，只要将按钮换成 button 就可以了。完整代码：<style> * { padding: 0; margin: 0; } html, body { padding: 20px; background-color: #000000; } li { list-style-type: none; } #editor { width: 800px; height: 360px; border-radius: 6px; background-color: #ffffff; border: 1px solid #cccccc;

技术 · 2023-07-25

css 使用 background-attachment 实现滚动页面背景图片固定效果

偶然间看到一个效果，觉得挺有意思就看了下是如何实现的，以下是效果展示。效果地址查看css，其主要是通过 background-attachment 属性来实现滚顶页面背景背景图片固定效果的。实现代码：<div style="height: 600px;"></div> <div style="height: 600px;"></div> <div class="box"></div> <div style="height: 600px;"></div> <div style="height: 600px;"></div> <style> .box { width: 1200px; height: 460px; margin: 0 auto; background-image: url(https://www.nicetheme.cn/wp-

技术 · 2023-07-24

css 使用 background-attachment 实现滚动页面背景图片固定效果

Theme Jasmine by Kent Liao