随笔分类 -  css

vue组件利用css var(--变量)实现动态修改样式
摘要：1、简介：var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法非常适用。 2、在css中定义变量用法： <style> :root { --main-bg-color: coral; } #div1 { background-color: var(--main-bg-color 阅读全文
posted @ 2022-08-11 14:40 zigood 阅读(7533) 评论(0) 推荐(0)
用CSS实现高斯模糊背景效果
摘要：高斯模糊是一种常见的效果（俗称毛玻璃效果），在CSS中使用filter、backdrop-filter属性均可实现。 这里主要介绍简单的方式：backdrop-filter: blur(); 简介： backdrop-filter 是使透过该层的底部元素模糊化 backdrop-filter属性可以 阅读全文
posted @ 2021-12-28 14:41 zigood 阅读(3414) 评论(0) 推荐(0)
CSS 选择器 选择前几个元素
摘要：方法：使用伪类选择器处理 1、选择第n个，n代表数字 :nth-child(n){ } 2、选择列表中的偶数的标签 :nth-child(2n){} :nth-child(even){ } 3、选择列表中的奇数的标签 :nth-child(2n - 1){ } :nth-child(odd){ } 阅读全文
posted @ 2021-12-08 10:29 zigood 阅读(3088) 评论(0) 推荐(0)
在backgoundImage上面设置透明度而不影响元素其他显示效果
摘要：描述： 在backgoundImage上面设置透明度而不影响元素其他显示效果，类似于在背景图片上设置遮罩层的效果 方案： 一、加一层遮罩元素，如div，定位到上层；二、多用::before伪元素，操作同一 三、选用其它样式属性，如box-shadow 前两个是基本操作，就是分开设置图片和遮罩层，然后 阅读全文
posted @ 2021-07-29 10:51 zigood 阅读(283) 评论(0) 推荐(0)
CSS中选择器符号使用
摘要：1. 空格 —— “后代选择器” 元素里面所有的p元素 div p { ... } 2. > —— “子选择器” 元素里面所有的子代（不含孙代及以后）限定元素 div > p { ... } 3. ~ —— “后继选择器” 元素往后的所有同级的限定元素 .test~p { ... } 4. + —— 阅读全文
posted @ 2021-07-21 14:03 zigood 阅读(213) 评论(0) 推荐(0)
CSS中可继承的样式
摘要：继承：是指子节点默认使用父节点的样式属性 继承的属性很少，有颜色，文字，字体间距行高对齐方式，和列表的样式等可以继承。 所有元素可继承：visibility和cursor。 内联元素可继承：letter-spacing（字符间距）、word-spacing（增加或减少单词间的空白（即字间隔））、wh 阅读全文
posted @ 2021-04-29 10:18 zigood 阅读(754) 评论(0) 推荐(0)
CSS中BFC机制 在项目中的运用
摘要：BFC(Block formatting context)直译为"块级格式化上下文"。 它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 在解释什么是BFC之前，我们需要先知道Box、Formatti 阅读全文
posted @ 2021-04-23 14:07 zigood 阅读(109) 评论(0) 推荐(0)