From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/border-image-width/index.html | 168 +++++++++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 files/ru/web/css/border-image-width/index.html (limited to 'files/ru/web/css/border-image-width') diff --git a/files/ru/web/css/border-image-width/index.html b/files/ru/web/css/border-image-width/index.html new file mode 100644 index 0000000000..4f5afbb25d --- /dev/null +++ b/files/ru/web/css/border-image-width/index.html @@ -0,0 +1,168 @@ +--- +title: border-image-width +slug: Web/CSS/border-image-width +translation_of: Web/CSS/border-image-width +--- +
{{CSSRef}}
+ +

Описание

+ +

he border-image-width CSS property defines the width of the border image by defining inward offsets from the border edges. If the border-image-width is greater than the {{cssxref("border-width")}}, then the border image extends beyond the padding (and/or content) edge.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* border-image-width: all */
+border-image-width: 3;
+
+/* border-image-width: vertical horizontal */
+border-image-width: 2em 3em;
+
+/* border-image-width: top horizontal bottom */
+border-image-width: 5% 15% 10%;
+
+/* border-image-width: top right bottom left */
+border-image-width: 5% 2em 10% auto;
+
+/* Global values */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+
+ +

где:

+ +
+
width
+
Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax.
+
vertical
+
Is a value denoting the width of the image used as a border to apply to all vertical edges, that is the top and bottom edges. It is used only in the two-value syntax.
+
horizontal
+
Is a value denoting the width of the image used as a border to apply to all horizontal edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.
+
top
+
Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the three- and four-value syntaxes.
+
bottom
+
Is a value denoting the width of the image used as a border to apply to the bottom edge. It is used only in the three- and four-value syntaxes.
+
right
+
Is a value denoting the width of the image used as a border to apply to the right edge. It is used only in the four-value syntax.
+
left
+
Is a value denoting the width of the image used as a border to apply to the left edge. It is used only in the four-value syntax.
+
inherit
+
Is a keyword indicating that all four values are inherited from their parent's element calculated value.
+
+ +

Значения

+ +
+
<length>
+
Represents the width of the border. It can be an absolute or relative length. This length must not be negative.
+
<percentage>
+
Represents the width of the border as a percentage of the element. The percentage must not be negative.
+
<number>
+
Represents a multiple of the computed value of the element's {{cssxref("border-width")}} property to be used as the border width. The number must not be negative.
+
auto
+
Causes the border image width to equal the intrinsic width or height (whichever is applicable) of the corresponding {{cssxref("border-image-slice")}}. If the image does not have the required intrinsic dimension then the corresponding computed border-width is used instead.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML Content

+ +
<!DOCTYPE html>
+
+<html>
+   <head></head>
+   <body>
+      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+      no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+   </body>
+</html>
+
+ +

CSS Content

+ +
p {
+   border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+   border-image-slice: 30;
+   border-image-width: 20px;
+   border-image-repeat: round;
+   padding: 40px;
+}
+ +

{{ EmbedLiveSample('Examples', '480', '320', '', 'Web/CSS/border-image-width') }}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-image-width', 'border-image-width')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support15.0{{CompatGeckoDesktop("13.0")}}11156
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
-- cgit v1.2.3-54-g00ecf