diff options
Diffstat (limited to 'files/ru/web/css/border-width/index.html')
| -rw-r--r-- | files/ru/web/css/border-width/index.html | 193 |
1 files changed, 193 insertions, 0 deletions
diff --git a/files/ru/web/css/border-width/index.html b/files/ru/web/css/border-width/index.html new file mode 100644 index 0000000000..658ac21870 --- /dev/null +++ b/files/ru/web/css/border-width/index.html @@ -0,0 +1,193 @@ +--- +title: border-width +slug: Web/CSS/border-width +translation_of: Web/CSS/border-width +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary">Summary</h2> + +<p>CSS свойство {{cssxref("border-width")}}<span style="line-height: 1.5;"> определяет ширину рамки элемента. Но обычно ее задают не отдельно, а в составе свойства {{cssxref("border")}}.</span></p> + +<p>{{cssinfo}}</p> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Общий синтаксис</a>: {{csssyntax("border-width")}} +</pre> + +<pre>border-width: <em>ширина</em> <em> /* Одно значение */</em> +border-width: <em>вертикальная горизотальная</em> <em> /* Два значения */</em> +border-width: <em>верх</em> <em>горизонтальная </em><em>основание</em><em> </em><em> /* Три значения */</em> +border-width: <em>верх</em> <em>право</em> <em>основание</em> <em>лево </em><em> /* Четыре значения */</em> + +border-width: inherit /* Родительское значение */ +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><br-width></code></dt> + <dd>Is either a non-negative explicit {{cssxref("<length>")}} value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values: + <table class="standard-table"> + <tbody> + <tr> + <td style="vertical-align: middle;"><code>thin</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">A thin border</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>medium</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">A medium border</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>thick</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">A thick border</td> + </tr> + </tbody> + </table> + The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the <code>thin ≤ medium ≤ thick</code> inequality and that the values are constant on a single document.</dd> +</dl> + +<p><code>inherit</code></p> + +<dl> + <dd>Is a keyword indicating that all four values are inherited from their parent's element calculated value.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="A_mix_of_values_and_lengths" name="A_mix_of_values_and_lengths">A mix of values and lengths</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p id="sval"> + one value: 6px wide border on all 4 sides</p> +<p id="bival"> + two different values: 2px wide top and bottom border, 10px wide right and left border</p> +<p id="treval"> + three different values: 0.3em top, 9px bottom, and zero width right and left</p> +<p id="fourval"> + four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">#sval { + border: ridge #ccc; + border-width: 6px; +} +#bival { + border: solid red; + border-width: 2px 10px; +} +#treval { + border: dotted orange; + border-width: 0.3em 0 9px; +} +#fourval { + border: solid lightgreen; + border-width: thin medium thick 1em; +} +p { + width: auto; + margin: 0.25em; + padding: 0.25em; +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('A_mix_of_values_and_lengths', 300, 180) }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No direct change, the {{cssxref("<length>")}} CSS data type extension has an effect on this property.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Added the constraint that values' meaning must be constant inside a document.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-width', 'border-width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.0</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>6.0</td> + <td>11</td> + <td>3.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The border-related shorthand properties: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}</li> + <li>The border-width-related properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}</li> +</ul> |