css里外边框与内边框_基本CSS边框

css里外边框与内边框

Every HTML element can be provided with a basic border via CSS, using one of 10 styles: none, hidden, solid, dashed, dotted, groove, ridge,  double, inset and outset. There are also three CSS3 border styles – wave, dot-dash, and dot-dot-dash – that are not yet supported in any browser.

可以通过CSS使用以下10种样式之一为每个HTML元素提供基本边框： none ， hidden ， solid ， dashed ， dotted ， groove ， ridge ， double inset ， inset和outset 。 还有3种CSS3边框样式( wave ， dot-dash和dot-dot-dash在任何浏览器中均不支持。

The thickness of CSS borders is commonly defined in pixels, due to the fact that they are usually set to a “hairline” width in most site designs. Technically, border-width can be defined with any CSS measurement system supported by the browser, with the exception of percentages. The hue of a border can also be defined using any CSS color system, allowing for the possibility of semi-transparent borders.

CSS边框的厚度通常以像素为单位定义，因为大多数站点设计中通常将CSS边框的宽度设置为“细线”宽度。 从技术上讲，可以使用浏览器支持的任何CSS测量系统来定义border-width (百分比除外)。 边框的色相也可以使用任何CSS颜色系统定义，从而允许使用半透明边框。

The most common way of defining borders is as a shortcut of space-separated values:

定义边界的最常见方法是将空格分隔的值作为快捷方式：

border:  style thickness color;

In the examples below I’ve added a small around of border-radius to show how the styles appear in a curve.

在下面的示例中，我在border-radius周围添加了一小部分，以显示样式在曲线中的显示方式。

border: 4px solid #222

边框：4px实线＃222

border: 4px dashed #222

边框：4px虚线＃222

border: 4px dotted #222

边框：点缀4px＃222

border: 4px groove #777

边框：4px凹槽＃777

border: 4px ridge #777

边框：4px脊＃777

border: 4px double #222

边框：4px双＃222

border: 4px inset #777

边框：4px嵌入＃777

border: 4px outset #777

边框：开始时为4px＃777

You’ll notice that double is particularly sensitive to thickness, distributing the amount given in the shortcut between the inner and outer edges and the space between them. ridge and groove are similarly sensitive to color, using derivatives of the hue set in the shortcut to tone the inner and outer edges. For that reason, using “pure” colors: white, black, some primary hues – is not suggested, as doing so diminishes the browser’s ability to create a decent visual effect. inset and outset are similarly limited, and look “hokey” unless applied subtly.

您会注意到， double对厚度特别敏感，它会将快捷方式中给定的数量分配在内外边缘之间以及它们之间的空间中。 ridge和groove对颜色也同样敏感，使用快捷方式中设置的色相的派生色调内外边缘。 因此，不建议使用“纯”颜色：白色，黑色和一些主要色相，因为这样做会降低浏览器创建不错的视觉效果的能力。 inset和outset受到类似的限制，除非巧妙地应用，否则看起来像“ hokey”。

Borders can be applied to each side of an element separately using border-left, border-bottom, etc, using the same shortcut syntax. This can be broken down further: border-right-color and border-left-width, etc.

可以使用border-left ， border-bottom等使用相同的快捷方式语法分别将border-left应用于元素的每一侧。 这可以进一步细分： border-right-color和border-left-width等。

To give one example where this level of detail might be used in a page, creating a Polaroid frame for a photograph with borders as shown at the top of this article (in which the thickness of the bottom edge is different from the other three sides) might best be served by using CSS like the following:

举一个例子，可以在页面中使用这种详细程度，为带有边框的照片创建宝丽来相框，如本文顶部所示(底部边缘的厚度与其他三个侧面的厚度不同)最好通过使用CSS来实现，如下所示：

img#polaroid {
	border: 25px solid #e8e8d3;
	border-bottom-width: 50px;
}

Broadly speaking, SVG has far greater control over border styles, but I will need to leave that for another article.

从广义上讲， SVG对边框样式有更大的控制权，但我需要在另一篇文章中进行介绍。

翻译自: https://thenewcode.com/695/Basic-CSS-Borders

css里外边框与内边框