css 有关边框的属性_边框样式（CSS属性）

落日映苍穹つ 2022-12-03 11:25 184阅读 0赞

css 有关边框的属性

## 句法 **(**Syntax**)** ##

border-style 边框样式 : \{ \{ ： \{ \{ none | 无 | hidden | 隐藏 dotted | 点缀 | dashed | 虚线 | solid | 固体 | double | 双 | groove | 凹槽 | ridge | 脊 inset | 插图 outset \}   一开始 \} 1 to 4 values | 1〜4个值 | inherit \} 继承 \} ; ;

## 描述 **(**Description**)** ##

The shorthand property `border-style` sets the style of the border on all four sides of an element using the values specified. Each border can have its own value—refer to the mnemonic (TRouBLe) in [Shorthand Properties][] for an easy way to remember the shorthand order.

速记属性`border-style`使用指定的值在元素的所有四个侧面上设置`border-style` 。 每个边框都可以有其自己的值-请参阅[速记属性中][Shorthand Properties]的助记符(TRouBLe)，以方便地记住速记顺序。

Borders are placed on top of the element’s background.

边框放置在元素背景的顶部。

## 例 **(**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`边框，则仍将绘制边框，因为相邻单元格的边框将优先。 有关更多信息，请[参见表格式][Table Formatting] 。
 *  `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` 。

> 翻译自: [https://www.sitepoint.com/border-style-css-property/][https_www.sitepoint.com_border-style-css-property]

css 有关边框的属性

[Shorthand Properties]: http://reference.sitepoint.com/css/shorthandproperties
[Table Formatting]: https://www.sitepoint.com/web-foundations/table-formatting/
[https_www.sitepoint.com_border-style-css-property]: https://www.sitepoint.com/border-style-css-property/