CSS笔记

1. textarea禁止拉伸：resize:none；

2. 禁止显示a、input、button蓝色覆盖层：

-webkit-tap-highlight-color: transparent;
lighting-color: transparent;

3. 清除浮动：

.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	line-height: 0;
	visibility: hidden;
}
.clearfix {
	zoom: 1;
}

4. 单行、2行、3行 ：

/*单行,超过部分用省略号...*/
.singleline {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*双行,超过部分用省略号...*/	
.twoline {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
/*三行,超过部分用省略号...*/
.threeline {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical
}

5. 媒体查询：@media only screen and (min-width: 1401px) {}

6. 文字样式

 text-decoration: none;   // 没样式
 text-decoration: line-through;   //中横线
 text-decoration: underline;  //下划线

7. 字体描边

text-shadow:color||length||length||opacity。
color:指定颜色。
length:第一个length指定阴影在水平方向上的延伸距离，第二个length指定阴影在垂直方向上的延伸距离，可以为负值。
opacity:指定阴影模糊效果的作用距离。
用逗号分隔的4个属性值代表的方向顺序为右下左上。
为了兼容多浏览器而加上前缀-webkit-和-moz-。
filter:滤镜
filter:Glow 添加光辉晕圈效果在元素对象的边外。
filter:Glow（color=颜色值，strength=数值）。
color:指定晕圈发光效果的颜色。
strength:指定晕圈发光的强度范围，参数值从1到255。

8. 渐变背景：

菜鸟教程是最全的
有一点：background: linear-gradient(to right, #feaa00, #f66c1c); //右边那个要加一个 to，to right,从左到右

9. navbar : 选项，并且左右能滑动的,且固定在顶部

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190401133728254.png)

	//vue代码
	<div class="tabbars">
      <div class="tabbar">
        <span
          v-for="(item,index) of titles"
          :key="index"
          @click="choose(index)"
          :class="(statusGroup==index)?'active':''"
        >{{item.name}}</span>
      </div>
    </div>
	//js data
	statusGroup: 0,
    titles: [
      { name: "全部", value: 0 },
      { name: "悬疑恐怖", value: 1 },
      { name: "恐怖", value: 2 },
      { name: "总裁", value: 3 },
      { name: "古言恐怖", value: 4 },
      { name: "恐怖", value: 5 },
      { name: "总裁", value: 6 },
      { name: "古言", value: 7 },
      { name: "恐怖", value: 8 },
      { name: "总裁", value: 9 },
      { name: "古言", value: 10 }
    ],
	css
	.tabbars{
	  position fixed
	  left 0
	  right 0
	  top 0.9rem
	  margin-bottom: 0.2rem;
	}
	.tabbar {
	  height: 1rem;
	  line-height: 1rem;
	  background: #fff;
	  font-size: 0.26rem;
	  color: #666;
	  padding: 0 0.3rem;
	  white-space: nowrap;
	  overflow-x: auto;
	  z-index 998
	}
	
	.tabbar span {
	  display: inline-block;
	  position: relative;
	  height: 1rem;
	  margin: 0 0.3rem;
	  cursor: pointer;
	}
	
	.tabbar span.active {
	  color: #f39800;
	}
	
	.tabbar span.active::after {
	  content: '';
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  width: 0.4rem;
	  height: 0.05rem;
	  margin: auto;
	  background: #f39800;
	  border-radius: 0.3rem;
	}

10. css 滚动条样式更改

/*修改滚动条样式*/
div::-webkit-scrollbar{
  width:10px;
  height:10px;
  /**/
}
div::-webkit-scrollbar-track{
  background: rgb(239, 239, 239);
  border-radius:2px;
}
div::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{
  background: #333;
}
div::-webkit-scrollbar-corner{
  background: #179a16;
}

	参数说明

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

11. 内容文字(不)能被选中

// 不能被选中
-webkit-touch-callout:none; /*系统默认菜单被禁用*/
 -webkit-user-select:none; /*webkit浏览器*/
 -khtml-user-select:none; /*早期浏览器*/
 -moz-user-select:none;/*火狐*/
 -ms-user-select:none; /*IE10*/
 user-select:none; 
 // 可以被选中
  -webkit-user-select:auto; /*webkit浏览器*/
 -khtml-user-select:auto; /*早期浏览器*/
 -moz-user-select:auto;/*火狐*/
 -ms-user-select:auto; /*IE10*/
 user-select:auto;