CSS 相关属性
单位
- deg 度。一个完整的圆是
360deg
。例:0deg
,90deg,``14.23deg
。 - grad 百分度。一个完整的圆是
400grad
。例:0grad
,100grad
,38.8grad
。 - rad 弧度。一个完整的圆是 2π 弧度,约等于
6.2832rad
。1rad
是 180/π 度。例:0rad
,1.0708rad
,6.2832rad
。 - turn 圈数。一个完整的圆是
1turn
。例:0turn
,0.25turn
,1.2turn
。
伪类
CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。
- :hover 鼠标划过
- :active 激活状态 鼠标按下
- :checked 单选,多选选中状态
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
等
伪元素
伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。
-
::after
-
::before
-
::cue
-
::first-letter 首字母
-
::first-line 第一行
-
::selection
等
其他零碎
clip-path 规律 第一个点 (x y), (x y), (x y);
clip-path: polygon(50% 0, 100% 50%, 0 100%); // 例如三角
实现五角星
clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);
实现圆形
clip-path: circle(25% at 50% 50%);
实现热门
clip-path: polygon(0px 80px, 25px 60px, 50px 80px, 50px 0px, 0px 0px);
实现心形
clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');
修改input光标颜色
caret-color: red;
caret-color: auto;
caret-color: transparent;
可调整大小块元素
// 配合此属性使用过
overflow: scroll;
// 宽高可调整
resize: both;
// 不可调整
resize: none;
// 水平横向
resize: horizontal;
// 垂直竖向
resize: vertical;
自定义变量
--color: red;
// 使用
p {
color: var(--color);
}
块容器限制内容行数
// 配合其他属性使用
-webkit-line-clamp: 3;
渐变斑马纹
background: repeating-linear-gradient(45deg,
#fff 0%, #fff 10%,
#000 10%, #000 20%);
SCSS 预处理
弹性盒子
// 弹性布局
@mixin flex($t: center) {
display: flex;
align-items: center;
@if $t == center {
justify-content: center;
}
@if $t == left {
justify-content: flex-start;
}
@if $t == right {
justify-content: flex-end;
}
@if $t == lr {
justify-content: space-between;
}
@if $t == alr {
justify-content: space-around;
}
}
使用方式
// 使用方式
p {
/* 默认居中 */
@include flex;
/* 左侧开始 */
@include flex(left);
/* 两侧 */
@include flex(lr);
...
}
单行 多行 文本溢出隐藏
// 溢出省略
@mixin text($n: 1) {
@if $n == 1 {
text-overflow: ellipsis;
white-space: nowrap;
} @else {
display: -webkit-box;
-webkit-line-clamp: $n;
-webkit-box-orient: vertical;
}
overflow: hidden;
}
使用方式
// 默认单行
p {
@include text;
// 最多三行
@include text(3);
...
}