CSS3 新特性

发表于 分类于

css3 新特性

  • scroll-behavior
  • clip-path
  • background-clip
  • ::selection
  • ::placeholder

锚点滚动更加丝滑

1
2
3
html {
  scroll-behavior: smooth;
}

剪切可视区域图片

1
2
3
4
5
div {
  clip-path: circle(40%); //圆形显示
  clip-path: ellipse(130px 140px at 10% 20%); // 椭圆
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); // 多边形
}

元素背景延伸到边框

1
2
3
4
5
6
7
8
9
10
div {
  background-clip: border-box;  // 包括边框
  background-clip: padding-box;
  background-clip: content-box;	// 内容
  
  // 试验API，不建议使用
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

选中文本样式

1
2
3
4
::selection {
  background-color: rgba(238, 99, 82,1);
  color: white;
}

自定义输入框placeholder

1
2
3
4
5
6
7
8
9
10
11
input { 
  font-weight: 800;
  color: #d27054;
}

::placeholder {
  opacity: 1;
  font-weight: 300;
  color: #666;
  font-size: 1rem;
}

链接

css 优先级计算