css小技巧

1、a标签实现自动刷新界面或新窗口打开

如果你点击了相同的界面，你会自动刷新界面，而不会重新打开新的界面，如果你没有打开当前界面，就会跳转到相应的界面。
**具体操作：**在a标签内加入target的属性，将其值设定为href相同的值即可完成该操作！！！！！（牛X啊）

2、聚焦操作但是页面不滚动

点击按钮聚焦，但是页面发生滚动，体验效果不好。
具体操作：在聚焦的方法focus里面加入一段代码：preventScroll:true即可

3、纯css的滚动条

主要利用线性渐变，body元素里面设置

  background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
    z-index: 1;

background-size中calc减去的100vh，是屏幕的高度，使得进度条刚好和右边贴合，加的5px是进度条的高度，预留5px。
在body::after里面写上固定定位，设置其top 等等，如代码所示。

 content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;

4、css全屏背景

设置其背景图，随后添加background-size:cover即可

5、transition的作用

• hover属性，鼠标悬浮在按钮上的时候，会表现的非常生硬我们可以加入transition：all .5s
• 下拉列表的展示，在ul的外层包裹一个类名为ul_wrap，里面设置 transform-origin: 0 0;transition: all .5s;即可实现过渡效果

6、多张背景图的设置

在background里面将图片直接用逗号隔开，按照以下格式书写即可。

    background-size: contain;
    background:url('test.jpg') no-repeat left,url(logo.png) no-repeat right;