Web前端最全css盒子模型及其实战案例（下），21年Web前端面经分享

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

===================================================================

今天总结盒子模型剩下的一点内容

🌷圆角边框

---

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border - radius 属性用于设置元素的外边框圆角。

语法：

border - radius : length ;

• 参数值可以为数值或百分比的形式。

• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。

• 如果是个矩形设置为高度的一半就可以做 。

• 该属性是一个简写属性，可以跟四个值，分别代耘上角、右上角、右下角、左下角。

• 分开写： border - top - left - radius 、 border - top - right - radius 、 border- bottom - right - radius 和border - bottom - left - radius。

1、案例

2、原理。

所以正方形想要设置为一个圆，把数值修改为高度或者宽度的一半即可

如果是个矩形设置为高度的一半就可以。

🌷盒子阴影

---

CSS3中新增了盒子阴影，我们可以使用 box - shadow 属性为盒子添加阴影。

语法：

box - shadow : h-shadow v-shadow blur spread color inset ;

| 属性 | 描述 |

| — | — |

| h - shadow | 必需。水平阴影的位置。允许负值。 |

| v - shadow | 必需。垂直阴影的位置。允许负值。 |

| blur | 可选。模糊距离。 |

| spread | 可选。阴影的尺寸。 |

| color | 可选。阴影的颜色。 |

| inset | 可选。将外部阴影（ outset ）改为内部阴影。 |

注意：

1．默认的是外阴影（ outset )，但是不可以写这个单词，否则导致阴影无效。

2．盒子阴影不占用空间，不会影响其他盒子排列。

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容