7.css易忘知识点（html锚点链接）

html锚点链接：

1.在链接文本href属性= #名字 的形式；如：<a href="#two">第二季</a>

2.找到目标标签，里面添加一个id属性=刚才的名字；如：<h3 id="two">第二季介绍</h3>

3.下载链接：href属性为压缩包地址 <a href="img.zip">下载文件</a>

1.input去除蓝线边框 ：outline:none;

2.textarea防止拖拽文本域 ： resize:none;

3.cursor鼠标禁止 ：cursor:not-allowed;

4.vertical-align针对行内元素，行内块元素设置，经常用于设置 图片 / 表单元素 和 文字垂直对齐 ： vertical-align：baseline/middle/top/bottom;

5.解决图片底部默认空白缝隙问题 ：1：将图片转换为块级元素 display:block;

                                                           2:给图片添加vertical-align:middle/baseline/top/bottom;

6.行内块的巧妙应用：a链接转化为行内块元素，设置宽高，给它的父盒子设置text-align:center;即可垂直居中。

7.商品原价删除线：text-decoration:line-through;

8.文字围绕图片：给图片添加浮动，文字在p标签内，浮动的盒子压住p标签，但是不会压住文字；

9.伪元素::before，::after 是行内元素

10.文字阴影：text-shadow: 1px 1px rgba(0, 0, 0, 0.2);

11.盒子阴影：box-shadow:水平 垂直 blur spread rgba;

12.背景颜色线性渐变：必须添加-webkit-兼容

  background:-weblit-linear-gradient(起始方向，颜色1，颜色2);起始方向可以是组合 

left top；从左上角到右下角

  background: -webkit-linear-gradient(red ,blue);省略方位名词，默认从上到下；

  background: -webkit-linear-gradient(left,red ,blue);

  background: -webkit-linear-gradient(left top,red ,blue);

13.用伪元素做箭头

.more {
  position: absolute;
  top: 11px;
  right: 5px;
  background: -webkit-linear-gradient(left, #ff506c, #ff6bc6);
  border-radius: 15px;
  padding: 3px 20px 3px 10px;
  color: #fff;
}
.more::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}