CSS基础

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;