Question

我知道如何在表格单元格或div边界上设置带有 double 样式的边框。

但是如何（从Microsoft Word中提取）：

它有一个厚而薄的边框。我们可以使用HTML / CSS轻松完成吗？

谢谢。

更新

以下是一些示例HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta content="en-gb" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>

<body>

<div style="border-bottom:1px black double">
    SAMPLE TEXT</div>

</body>

</html>

它将生成一条双线，但两条线的厚度都相同相同。

在Microsoft Word示例中，它有两行，但其中一行较粗。看到？我们可以用CSS / HTML做到这一点吗？

Answer 1

如果您想在图片中创建类似双线的内容，可以在文字周围创建一个额外的容器：

<div class="outer">
  <span class="inner">
    Text
  </span>
</div>

然后你可以设置这样的样式：

.outer {
  border-bottom: 1px solid #000;
  padding-bottom: 2px;
}
.inner {
  border-bottom: 4px solid #000;
}

表格单元格边框有多个厚度（或div边界）？

1 个答案: