随笔分类 - CSS属性特殊点
通过特效加深对CSS的巩固, 总结知识点
摘要：1 关于var()函数使用注意点: 这个函数的作用获取自定义属性的值 关于自定义属性: 1 出现位置 要么在 <style> body{ --self-property: 1; } </style> 要么在 <div style="--self-property: 1"></div> 总之必须要在s
阅读全文
摘要：filter: hue-rotate(90deg)
阅读全文
摘要：1 使用场景: 定义一个元素的可见区域: 对于一个元素, 我们有时候只是想要展示部分区域而不是展示整个区域 这时候clip-path就派上用场了. 2 属性值: (1) 几何框盒: margin-box：使用 margin box 作为引用框。 border-box：使用 border box 作为
阅读全文
摘要：1 属性使用目的: 指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框 概念普及: 可替换元素 ::: 就是会被替换的元素 比如一个典型的可替换元素img： <img src=xxx.jpg> 我们并没有在img标签中写入任何内容，那它的内容从哪里来的呢？ 是浏览器去下载src属性给到的图
阅读全文
摘要：众所周知的是, 这两个属性都是用来改变元素的展示效果的属性, 但是其自身的展示效果会不会影响到其它的元素呢 1 关于transform: 经过测试, 这个变换, 不管是其包含的哪一种变换, 都只是简单的改变其在浏览器中的展示效果, 并不影响其实际(也就是原本)占用的空间位置和空间大小(即所占用的文档
阅读全文
摘要：box-reflect：包括3个值。 1. direction 定义方向，取值包括 above 、 below 、 left 、 right。 above： 指定倒影在对象的上边 below： 指定倒影在对象的下边 left： 指定倒影在对象的左边 right： 指定倒影在对象的右边 2. offs
阅读全文
摘要：视口单位(Viewport units) 什么是视口？ 在PC端，视口指的是在PC端，指的是浏览器的可视区域； 而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 视口单位中的“视口”，PC端
阅读全文
