css background 一半_前端面试：CSS 编程题目总结（一）

前端面试中，会考到一些基础布局的实现方法，比如如何画一个三角形，如何实现一个两栏布局等。

⬜ 矩形

矩形是最简单的了，一个

，设置宽高，加个背景就行了。

div {
       
  width: 100px;
  height: 100px;
  background: #FF9900;
/*   居中 */
  margin: auto; 
}

<div>div>

⚪ 圆

机械行业有个名词叫「圆角」，当圆角半径为上面正方形边长的一半时，也就是说把上面的正方形的四个角「磨圆」了，就成了一个圆。

因此我们只需向前面的 CSS 代码中添加一行 border-radius: 50px; 即可。

div {
       
  width: 100px;
  height: 100px;
  background: #FF9900;
  border-radius: 50px;
/*   居中 */
  margin: auto; 
}

<div>div>