表格单元格边框有多个厚度(或div边界)?

时间:2016-03-17 12:49:40

标签: html css

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

但是如何(从Microsoft Word中提取):

Extract from 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做到这一点吗?

1 个答案:

答案 0 :(得分: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;
}