CSS常用样式及不常用的隐藏属性

如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力

• 滚动条样式

设置id为box的dom滚动条样式，要求在内容超出的时候显示滚动条，内容不超出的时候隐藏滚动条

CSS样式设置如下:

#box{
  overflow-y:auto;//如果需要一直显示则改为scroll
}

#box::-webkit-scrollbar-track /*滚动条轨道的样式*/
{
  width: 42px;
  background-color: #F5F5F5;
}

#box::-webkit-scrollbar /*滚动条轨道的样式*/
{
  width: 12px;
  background-color: #F5F5F5;
}

#box::-webkit-scrollbar-thumb /*滚动条当前焦点块的样式*/
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: green;
}

• 线性渐变色

/*
重复圆形渐变
*/
#box{ 
  background:-webkit-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
}
/*
重复线形渐变
top 是从上到下、left 是从左到右，
*/
#box{
  -webkit-background-size: 50px 50px;
  background-color: #0ae;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
}