clip 属性
用于剪裁绝对定位元素。
.class { ?????position:absolute; ?????clip:rect(0px,60px,200px,0px); ?}scroll-behavior: smooth;
作用在容器元素上，可以让容器（非鼠标手势触发）的滚动变得平滑。利用这个css属性可以一步将原来纯css标签直接切换，变成平滑过渡切换效果。
代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>纯CSS 利用label 和input 实现选项卡</title> ???<style> ???.tab label { ?????padding: 10px; ?????border: 1px solid #ccc; ?????margin-right: -1px; ?????text-align: center; ?????float: left; ?????overflow: hidden; ???} ???/* 清除浮动 */ ???.tab::after { ?????content: ""; ?????display: table; ?????clear: both; ???} ???.box { ?????height: 200px; ?????border: 1px solid #ccc; ?????scroll-behavior: smooth; ?/* 缓冲效果 */ ?????overflow: hidden; ?????margin-top: 10px; ???} ???.item { ?????height: 100%; ?????position: relative; ?????overflow: hidden; ???} ???.item input { ?????position: absolute; ?????top: 0; ?????height: 100%; ?????width: 1px; ?????border: 0; ?????padding: 0; ?????margin: 0; ?????clip: rect(0 0 0 0); ???} ?</style></head><body> ???<h1>tab</h1> ???<div class="tab"> ???????<label for="tab1">tab1</label> ???????<label for="tab2">tab2</label> ???????<label for="tab3">tab3</label> ???</div> ???<div class="box"> ???????<div class="item"> ???????????<!-- 点击label时，for对应的input会获得焦点, 并且出现在容器中的可视位置 --> ???????????<!-- 为禁止手机端自带键盘弹出，需要给input加上“readonly”属性 --> ???????????<input type="text" id="tab1" readonly> ???????????<p>选项卡1内容</p> ???????</div> ???????<div class="item"> ???????????<input type="text" id="tab2" readonly> ???????????<p>选项卡2内容</p> ???????</div> ???????<div class="item"> ???????????<input type="text" id="tab3" readonly> ???????????<p>选项卡3内容</p> ???????</div> ???</div> ???<footer> ???????bottom ???</footer></body></html>纯 CSS 利用 label + input 实现选项卡
原文地址：https://www.cnblogs.com/cckui/p/9968246.html