css上下左右滚动条 |css 修改表格四角为圆形

CSS中提供了四种滚动条样式，分别为：上下滚动条、左右滚动条、嵌套滚动条和自定义滚动条。

上下滚动条

/* 父元素设置高度，超出部分即可出现上下滚动条 */
.parent{
height: 300px;
overflow: auto; /* 出现滚动条 */
}

使用overflow属性设置上下滚动条时，建议同时设置父元素的高度，这样可以控制页面内容在指定区域内显示。

左右滚动条

/* 父元素设置宽度，超出部分即可出现左右滚动条 */
.parent{
width: 300px;
overflow-x: auto; /* x轴方向出现滚动条 */
}

左右滚动条和上下滚动条类似，只需要将overflow属性设置为overflow-x并指定宽度即可。

嵌套滚动条

/* 子元素设置高度，父元素设置最大高度，超出部分即可出现嵌套滚动条 */
.parent{
max-height: 300px;
overflow: auto; /* 出现滚动条 */
}
.child{
height: 600px; /* 子元素高度超出最大高度 */
}

当子元素的高度超过父元素设置的最大高度时，会出现嵌套滚动条。

自定义滚动条

/* 自定义滚动条样式 */
.parent::-webkit-scrollbar {
width: 6px; /* 滚动条宽度 */
}
.parent::-webkit-scrollbar-track {
background-color: #f1f1f1; /* 滚动条背景色 */
}
.parent::-webkit-scrollbar-thumb {
background-color: #888; /* 滚动条颜色 */
border-radius: 6px; /* 滚动条圆角 */
}

通过设置::-webkit-scrollbar的样式，可以自定义滚动条的宽度、背景色、颜色和圆角等属性。