PostCSS学习笔记
简介
由于CSS语言本身的表达能力较差，Web开发人员常常使用SASS、LESS之类的CSS预处理器语言来编写样式，然后再编译为普通的CSS代码。
PostCSS是一个类似的、较晚出现的CSS处理器，它基于JavaScript语言编写。PostCSS使用插件式…
阅读全文
2 years ago
0
CSS Modules学习笔记
CSS Modules
简介
CSS Modules是一个开源项目，它是一个简单的CSS模块化规范，主要完成两件事情：
- 样式类名、动画名的作用域支持。这可以避免命名冲突
- 模块化支持，允许CSS文件之间的依赖关系
与Less、SASS、PostCSS不同，CM并不尝试把CSS变得像一门编程…
阅读全文
2 years ago
0
CSS3学习笔记
常用CSS3样式
文字
线性渐变
只有基于Webkit的浏览器才支持此特性，Firefox不支持：
|
1 2 3 4 5 |
selector { background: -webkit-linear-gradient(#3ADB69, #059CF7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } |
背景
限制背景图片大小
注意：不能和背景颜色一起使用，但是可以和渐变背景一起使用：
|
1 2 3 4 5 6 7 8 9 |
selector { /* 不能和background-color配合 */ background: -webkit-linear-gradient(0deg, #3ADB69, #059CF7, #3ADB69); background: -o-linear-gradient(0deg, #3ADB69, #059CF7, #3ADB69); background: -moz-linear-gradient(0deg, #3ADB69, #059CF7, #3ADB69); background: linear-gradient(0deg, #3ADB69, #059CF7, #3ADB69); background-repeat: no-repeat; background-size: 3px 100%; /* 背景宽度3像素，高度100% */ } |
线性渐变
CSS格式说明：
从左向右的渐变：
你可以为direction指定任意的渐变角度：
设置占位符样式
要设置表单元素placeholder的样式，需要为不同浏览器设置伪元素/类的样式：
CSS选择器
我们知道CSS由一…
阅读全文
7 years ago
0