句法 (Syntax)

例 (Example)

This style rule assigns a solid border to the top, a dashed border to the bottom, and a dotted border to the left- and right-hand sides of paragraphs within the element with ID "example":

此样式规则在ID为"example"的元素内的段落的顶部分配一个实线边框，在底部分配一个虚线边框，并在左侧和右侧分配一个虚线边框：

#example p {
border-style: solid dotted dashed;
}

值 (Value)

• none means no border will show, and the computed border-width is zero.

  none表示不显示任何边框，并且计算出的border-width为零。

• hidden has the same meaning as none, except when it refers to table borders in cases where two cells share a border, and the table cells have collapsed borders (border-collapse:collapse;). The value hidden ensures that no border is drawn, since hidden takes precedence over all other border styles. If none had been used for one border in the cell, the border would still be drawn, as the adjacent cell’s border would take precedence. See Table Formatting for more information.

  hidden具有与none相同的含义，除了在两个单元格共享一个边框且表单元格具有折叠边框的情况下引用表格边框时( border-collapse:collapse; )。 hidden值确保不绘制边框，因为hidden优先于所有其他边框样式。 如果none为该单元格中的一个边框使用none边框，则仍将绘制边框，因为相邻单元格的边框将优先。 有关更多信息，请参见表格式 。

• dotted implements the border as a series of dots.

  dotted将边框实现为一系列点。

• dashed implements the border as a series of dashes.

  dashed实现边境一系列破折号。

• solid implements the border as a solid line.

  solid将边框实现为实线。

• double implements the border as two solid lines. The sum of the two border widths and the space between them equals the value that has been set for border-width.

  double将边框实现为两条实线。 两个边框宽度的总和以及它们之间的间隔等于为border-width设置的值。

• groove is a three-dimensional effect that gives the impression that the border is carved into the canvas.

  groove是三维效果，给人的印象是将边框雕刻到画布中。

• ridge is a 3D effect that has the opposite effect of groove, in that the border appears to protrude from the canvas.

  ridge是3D效果，与groove效果相反，因为边框似乎从画布突出。

• inset is a 3D effect that gives the impression that the box is embedded into the canvas. When it’s used on tables to which the separated borders model has been applied, the inset value appears to make the whole box look as though it were embedded into the canvas. When used with the collapsing border model, it’s treated the same as the value ridge.

  inset是3D效果，给人一种将盒子嵌入画布的印象。 当在已应用分隔边框模型的表上使用它时， inset值似乎使整个盒子看起来好像已嵌入画布中。 与折叠边框模型一起使用时，将其与ridge值相同。

• outset is a 3D effect that has the opposite effect of inset in that the border gives the impression that the box protrudes from the canvas. When it’s used on tables to which the separated borders model has been applied, the border makes the whole box look as though it were coming out of the canvas. When it’s used with the collapsing border model, it behaves the same way as groove.

  outset是3D效果，与inset具有相反的效果，因为边框给人的印象是盒子从画布突出。 当在已应用分隔边框模型的表上使用边框时，边框使整个盒子看起来好像是从画布中出来的。 与塌陷的边界模型一起使用时，其行为与groove相同。

Previously, in CSS1, user agents were allowed to interpret all dotted, dashed, double, groove, ridge, inset, and outset styles as solid.

此前，在CSS1，用户代理被允许解释所有dotted ， dashed ， double ， groove ， ridge ， inset ，并outset样式为solid 。