面试题：CSS中border - width、border - style和border - radius联合应用问题

HTML 代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>
  <div class="square"></div>
</body>

</html>

CSS 代码

.square {
  width: 100px;
  height: 100px;
  border-width: 3px;
  border-style: solid;
  border-radius: 15px;
  background-color: lightblue;
}

属性取值范围及常见值简述

border-width
- 取值范围：可以是长度值（如 px、em、rem 等），也可以是关键字 thin、medium、thick。
- 常见值：
  - 具体长度值：如 1px、2px、3px 等，直接指定边框的宽度。
  - 关键字：
    - thin：通常呈现为较细的边框，具体宽度取决于浏览器和设备，一般小于 medium。
    - medium：默认的中等宽度边框，是大多数浏览器的默认边框宽度表现。
    - thick：呈现为较粗的边框，具体宽度同样取决于浏览器和设备，一般大于 medium。
border-style
- 取值范围：关键字，如 none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset 等。
- 常见值：
  - none：无边框，即不显示边框。
  - hidden：与 none 类似，也是不显示边框，但在表格边框合并时，hidden 优先级更高。
  - dotted：点状边框，由一系列点组成。
  - dashed：虚线边框，由一系列短线段组成。
  - solid：实线边框，是最常用的边框样式，以连续的线条显示。
  - double：双边框，由两条平行的实线边框组成，两条边框之间有一定间隔，间隔宽度取决于 border-width。
border-radius
- 取值范围：可以是长度值（如 px、em、rem 等），也可以是百分比值。
- 常见值：
  - 具体长度值：如 5px、10px、15px 等，指定圆角的半径大小。
  - 百分比值：如 50%，当元素为正方形时，50% 可以使四个角变成圆形；对于长方形元素，会根据元素的宽高按比例计算圆角半径。

面试题：CSS中border - width、border - style和border - radius联合应用问题

知识考点

面试题答案

HTML 代码

CSS 代码

属性取值范围及常见值简述