如果设置1个值，表示4个圆角都使用这个值。

border-radius:40px;

如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。

border-radius: 10px 50px;

如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。

border-radius: 10px 50px 40px;

如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

border-radius: 10px 20px 30px 40px;

2.单独设置一个角的写法

border-top-left-radius: 20px; //设置左上角

border-top-right-radius: 20px; //设置右上角

border-bottom-left-radius: 20px; //设置左下角

border-bottom-right-radius: 20px; //设置左下角


设置圆：

.circle{

        width: 150px;/*宽高保持一致*/

        height: 150px;

        line-height: 150px; /*当高度与行高保持一致时为垂直居中*/

        border-radius: 50%;

        background: orange;

        margin: 50px;

        text-align: center;

        color: #fff;

    }

<div class="circle">圆形</div>


4、div动态加载html，使用jquery的load()方法

$("#content").load("user_info.html")


5、fixed的css属性

.pub{

    height: 80px;

    width: 80px;

    position: fixed;

    right: 80px;

    top: 20px;

    border-radius: 50%;

    background: orange;

    text-align: center;

}

right=0，top=0（表示右上角）

right=0，bottom=0（表示右下角）

left=0，top=0（表示左上角）

left=0，bottom=0（表示左下角）


6、块内元素居中（text-align），行内元素居中（margin：auto 0）

7、jquery 获取data-/* 属性值

<li id="getId" data-id="122" data-vice-id="11">获取id</li>

1、getAttribute()方法

const getId = document.getElementById(‘getId’);

// //getAttribute()取值属性

console.log(getId.getAttribute("data-id"));//122

console.log(getId.getAttribute("data-vice-id"));//11

// //setAttribute()赋值属性

getId.setAttribute("data-id","48");

2、dataset()方法

//data-前缀属性可以在JS中通过dataset取值，更加方便

console.log(getId.dataset.id);//112

//data-vice-id连接取值使用驼峰命名法取值

console.log(getId.dataset.viceId);//11

//赋值

getId.dataset.id = "113";//113

getId.dataset.viceId–;//10

//新增data属性

getId.dataset.id2 = "100";//100

//删除，设置成null，或者delete

getId.dataset.id2 = null;//null

delete getId.dataset.id2;//undefind

3、jquery data()方法

var id = $("#getId").data("id"); //122

var viceId = $("#getId").data("vice-id"); //11

//赋值

$("#getId").data("id","100");//100

4、jquery attr()方法

var id = $("#getId").attr("data-id"); //122

var viceId = $("#getId").attr("data-vice-id"); //11

//赋值

$("#getId").attr("data-id","100");//100 



8、以下总结了一些常用的前端刷新页面的方法<a>

### 性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）  

2.如何优化webpack构建的性能  

3.移动端的性能优化  

4.Vue的SPA 如何优化加载速度  

5.移动端300ms延迟  

6.页面的重构

**所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://ali1024.coding.net/public/P7/Web/git)**

![](https://s2.51cto.com/images/20210924/1632458635102361.jpg)

![](https://s2.51cto.com/images/20210924/1632458636185619.jpg)