css常用的代码（实用）

1、实现隐藏滚动条同时又可以滚动

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
 
.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

2.利用css去掉滚动条，但还有滚动效果

/* 前面为容器名称 */
div::-webkit-scrollbar {     
	display: none
}

2、创建渐变背景

.element {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

3、悬停效果（Hover）

.element:hover {
  opacity: 0.8;
}

4、改变链接的样式：

a {
  text-decoration: none;
  color: blue;
}
a:hover {
  text-decoration: underline;
}

5、css 绘制三角形

div {
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent red;
}

实现带边框的三角形：

<div id="blue"><div>
 
#blue {
    position:relative;
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent blue;
}
#blue:after {
    content: "";
    position: absolute;
    top: 1px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent yellow;
}

注: 如果想绘制右直角三角，则将左 border 设置为 0；如果想绘制左直角三角，将右 border 设置为 0 即可（其它情况同理）。

6、Table表格边框合并

table,tr,td{
	border: 1px solid #666;
}
table{
	border-collapse: collapse;
}