{"json_modified": "2015-10-13T05:22:17.124037", "slug": "Web/CSS/box-decoration-break", "tags": ["CSS", "Reference", "CSS Fragmentation", "CSS Property", "Experimental"], "locale": "ja", "title": "box-decoration-break", "translations": [{"title": "box-decoration-break", "url": "/en-US/docs/Web/CSS/box-decoration-break", "tags": ["CSS", "Reference", "CSS Fragmentation", "CSS Property", "Experimental"], "summary": "The <strong><code>box-decoration-break</code></strong> CSS property specifies how the <a href=\"/en-US/docs/Web/CSS/background\" title=\"The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.\"><code>background</code></a>, <a href=\"/en-US/docs/Web/CSS/padding\" title=\"The padding property sets the padding space on all sides of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.\"><code>padding</code></a>, <a href=\"/en-US/docs/Web/CSS/border\" title=\"The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color.\"><code>border</code></a>, <a href=\"/en-US/docs/Web/CSS/border-image\" title=\"The border-image CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases. The border-image is used instead of the border styles given by the border-style properties.\"><code>border-image</code></a>, <a href=\"/en-US/docs/Web/CSS/box-shadow\" title=\"The box-shadow property describes one or more shadow effects as a comma-separated list.\"><code>box-shadow</code></a>, <a href=\"/en-US/docs/Web/CSS/margin\" title=\"The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left.\"><code>margin</code></a> and <a href=\"/en-US/docs/Web/CSS/clip\" title=\"The clip CSS property defines what portion of an element is visible. The clip property applies only to absolutely positioned elements, that is elements with position:absolute or position:fixed.\"><code>clip</code></a> of an element is applied when the box for the element is fragmented.\u00a0 Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed.\u00a0 Each piece of the rendering for the element is called a fragment.", "localization_tags": [], "locale": "en-US", "last_edit": "2015-09-22T09:17:12", "review_tags": []}, {"title": "box-decoration-break", "url": "/fr/docs/Web/CSS/box-decoration-break", "tags": ["CSS", "Reference", "CSS Fragmentation", "CSS Property", "Experimental"], "summary": "The <strong><code>box-decoration-break</code></strong> CSS property specifies how the <a href=\"/fr/docs/Web/CSS/background\" title=\"La propri&#xE9;t&#xE9; CSS background est un raccourci pour d&#xE9;finir les valeurs des propri&#xE9;t&#xE9;s d'arri&#xE8;re-plan dans une seule et unique r&#xE8;gle CSS. La propri&#xE9;t&#xE9; background peut &#xEA;tre utilis&#xE9;e pour d&#xE9;finir les valeurs d'une ou de plusieurs des propri&#xE9;t&#xE9;s suivantes&#xA0;:&#xA0; background-color, background-image, background-position, background-repeat, background-size et background-attachment.\"><code>background</code></a>, <a href=\"/fr/docs/Web/CSS/padding\" title=\"La propri&#xE9;t&#xE9; CSS padding d&#xE9;finit la marge int&#xE9;rieure d'un bloc pour tous les c&#xF4;t&#xE9;s. La zone concern&#xE9;e est l'espace entre le contenu et la bordure d'un bloc. C'est un raccourci pour &#xE9;viter de r&#xE9;gler chaque c&#xF4;t&#xE9; s&#xE9;par&#xE9;ment avec les autres propri&#xE9;t&#xE9;s de padding (padding-top, padding-right, padding-bottom et padding-left).\"><code>padding</code></a>, <a href=\"/fr/docs/Web/CSS/border\" title=\"La propri&#xE9;t&#xE9; CSS border est un raccourci pour d&#xE9;finir les valeurs des propri&#xE9;t&#xE9;s de toutes les bordures dans une seule et unique r&#xE8;gle CSS. border peut &#xEA;tre utilis&#xE9;e pour d&#xE9;finir les valeurs des propri&#xE9;t&#xE9;s longues suivantes&#xA0;: border-width, border-style, border-color.\"><code>border</code></a>, <a href=\"/fr/docs/Web/CSS/border-image\" title=\"La propri&#xE9;t&#xE9; CSS border-image permet de d&#xE9;clarer une image sur les bords d'un &#xE9;l&#xE9;ment. Cette propri&#xE9;t&#xE9; permet d'&#xE9;laborer des widgets complexes de mani&#xE8;re beaucoup plus simple, en supprimant le fait de devoir d&#xE9;clarer neuf bo&#xEE;tes diff&#xE9;rentes pour int&#xE9;grer des designs particuliers pour chaque coin et chaque bordure.\"><code>border-image</code></a>, <a href=\"/fr/docs/Web/CSS/box-shadow\" title=\"La propri&#xE9;t&#xE9; CSS box-shadow accepte un ou plusieurs effets d'ombre d&#xE9;finis sous la forme d'une liste s&#xE9;par&#xE9;e par des virgules. Elle permet de projeter l'ombre de presque n'importe quel &#xE9;l&#xE9;ment. Si une bordure arrondie est d&#xE9;finie &#xE0; l'aide de border-radius sur l'&#xE9;l&#xE9;ment auquel s'applique l'ombre, l'ombre ainsi cr&#xE9;&#xE9;e aura les m&#xEA;mes bords arrondis. Le niveau sur l'axe z d'ombres multiples est le m&#xEA;me que les ombres de texte multiples (la premi&#xE8;re ombre sp&#xE9;cifi&#xE9;e est sur le dessus).\"><code>box-shadow</code></a>, <a href=\"/fr/docs/Web/CSS/margin\" title=\"La propri&#xE9;t&#xE9; CSS margin d&#xE9;finit la marge ext&#xE9;rieure d'un &#xE9;l&#xE9;ment pour les quatre c&#xF4;t&#xE9;s. C'est un raccourci pour &#xE9;viter de r&#xE9;gler chaque c&#xF4;t&#xE9; s&#xE9;par&#xE9;ment avec les autres propri&#xE9;t&#xE9;s de marge (margin-top, margin-right, margin-bottom et margin-left).\"><code>margin</code></a> and <a href=\"/fr/docs/Web/CSS/clip\" title=\"La propri&#xE9;t&#xE9; CSS clip d&#xE9;finit quelle portion d'un &#xE9;l&#xE9;ment est visible.\"><code>clip</code></a> of an element is applied when the box for the element is fragmented.\u00a0 Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed.\u00a0 Each piece of the rendering for the element is called a fragment.", "localization_tags": ["inprogress"], "locale": "fr", "last_edit": "2015-10-13T05:20:19", "review_tags": []}], "modified": "2015-10-13T05:22:16", "label": "box-decoration-break", "localization_tags": ["inprogress"], "url": "/ja/docs/Web/CSS/box-decoration-break", "last_edit": "2015-10-13T05:22:11", "summary": "The <strong><code>box-decoration-break</code></strong> CSS property specifies how the <a href=\"/ja/docs/Web/CSS/background\" title=\"background CSS &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306F;&#x500B;&#x3005;&#x306E;&#x80CC;&#x666F;&#x95A2;&#x9023;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306E;&#x5024;&#x3092;&#x3001;&#x30B9;&#x30BF;&#x30A4;&#x30EB;&#x30B7;&#x30FC;&#x30C8;&#x306E;&#x5358;&#x4E00;&#x306E;&#x5834;&#x6240;&#x3067;&#x8A2D;&#x5B9A;&#x3059;&#x308B;&#x30B7;&#x30E7;&#x30FC;&#x30C8;&#x30CF;&#x30F3;&#x30C9;&#x30FB;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x3067;&#x3059;&#x3002;background &#x306F;&#x6B21;&#x306E;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306E;&#x3046;&#x3061;&#x4E00;&#x3064;&#x4EE5;&#x4E0A;&#x306B;&#x5BFE;&#x3059;&#x308B;&#x5024;&#x3092;&#x8A2D;&#x5B9A;&#x3059;&#x308B;&#x306E;&#x306B;&#x4F7F;&#x3046;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;: background-clip&#x3001;background-color&#x3001;background-image&#x3001;background-origin&#x3001;background-position&#x3001;background-repeat&#x3001;background-size&#x3001;&#x304A;&#x3088;&#x3073; background-attachment&#x3002;\"><code>background</code></a>, <a href=\"/ja/docs/Web/CSS/padding\" title=\"CSS &#x306E; padding &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306F;&#x3001;&#x8981;&#x7D20;&#x306E; 4 &#x8FBA;&#x5168;&#x3066;&#x306B;&#x5FC5;&#x8981;&#x306A;&#x30D1;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x9818;&#x57DF;&#x3092;&#x8A2D;&#x5B9A;&#x3057;&#x307E;&#x3059;&#x3002;&#x30D1;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x9818;&#x57DF;&#x3068;&#x306F;&#x3001;&#x8981;&#x7D20;&#x306E;&#x5185;&#x5BB9;&#x3068;&#x5883;&#x754C;&#x3068;&#x306E;&#x9593;&#x306E;&#xFF08;&#x67A0;&#x5185;&#xFF09;&#x4F59;&#x767D;&#x306E;&#x4E8B;&#x3067;&#x3059;&#x3002;&#x8CA0;&#x306E;&#x5024;&#x306F;&#x8A31;&#x53EF;&#x3055;&#x308C;&#x3066;&#x3044;&#x307E;&#x305B;&#x3093;&#x3002;\"><code>padding</code></a>, <a href=\"/ja/docs/Web/CSS/border\" title=\"border &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306F;&#x3001;&#x30B9;&#x30BF;&#x30A4;&#x30EB;&#x30B7;&#x30FC;&#x30C8;&#x5185;&#x306E; 1 &#x30F6;&#x6240;&#x3067;&#x5883;&#x754C;&#x7DDA;&#x5404;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x5024;&#x3092;&#x8A2D;&#x5B9A;&#x3059;&#x308B;&#x7C21;&#x7565;&#x5316;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x3067;&#x3059;&#x3002;border &#x306F;&#x3001;border-width&#x3001;border-style&#x3001;border-color &#x306E;&#x5185;&#x3001;1 &#x3064;&#x307E;&#x305F;&#x306F;&#x8907;&#x6570;&#x306E;&#x5024;&#x3092;&#x8A2D;&#x5B9A;&#x3059;&#x308B;&#x305F;&#x3081;&#x306B;&#x4F7F;&#x7528;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;\"><code>border</code></a>, <a href=\"/ja/docs/Web/CSS/border-image\" title=\"CSS &#x306E; border-image &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x3092;&#x4F7F;&#x3063;&#x3066;&#x3001;&#x8981;&#x7D20;&#x306E;&#x30DC;&#x30FC;&#x30C0;&#x30FC;&#x306B;&#x753B;&#x50CF;&#x3092;&#x63CF;&#x304F;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;&#x8907;&#x96D1;&#x306A;&#x898B;&#x305F;&#x76EE;&#x306E;&#x30A6;&#x30A3;&#x30B8;&#x30A7;&#x30C3;&#x30C8;&#x3092;&#x4EE5;&#x524D;&#x3088;&#x308A;&#x7C21;&#x5358;&#x306B;&#x63CF;&#x304F;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x308B;&#x3088;&#x3046;&#x306B;&#x306A;&#x308A;&#x3001;&#x5834;&#x5408;&#x306B;&#x3088;&#x3063;&#x3066;&#x306F; 9 &#x3064;&#x306E;&#x7BB1;&#x3092;&#x6E96;&#x5099;&#x3059;&#x308B;&#x5FC5;&#x8981;&#x3082;&#x306A;&#x304F;&#x306A;&#x308A;&#x307E;&#x3057;&#x305F;&#x3002;\"><code>border-image</code></a>, <a href=\"/ja/docs/Web/CSS/box-shadow\" title=\"box-shadow &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306F;&#x8981;&#x7D20;&#x306B;&#x30C9;&#x30ED;&#x30C3;&#x30D7;&#x30B7;&#x30E3;&#x30C9;&#x30A6;&#x52B9;&#x679C;&#x3092;&#x4E0E;&#x3048;&#x307E;&#x3059;&#x3002;&#x5F71;&#x306F;&#x30AB;&#x30F3;&#x30DE;&#x3067;&#x533A;&#x5207;&#x308B;&#x3053;&#x3068;&#x3067;&#x3001;&#x8907;&#x6570;&#x6307;&#x5B9A;&#x3067;&#x304D;&#x307E;&#x3059;&#x3002;border-radius &#x304C;&#x6307;&#x5B9A;&#x3055;&#x308C;&#x305F;&#x30DC;&#x30C3;&#x30AF;&#x30B9;&#x306B;&#x9069;&#x7528;&#x3055;&#x308C;&#x305F;&#x5834;&#x5408;&#x3001;&#x5F71;&#x3082;&#x305D;&#x306E;&#x4E38;&#x307F;&#x3092;&#x53CD;&#x6620;&#x3057;&#x307E;&#x3059;&#x3002;&#x8907;&#x6570;&#x306E;&#x5F71;&#x304C;&#x6307;&#x5B9A;&#x3055;&#x308C;&#x305F;&#x5834;&#x5408;&#x3001;&#x305D;&#x306E;&#x91CD;&#x306D;&#x9806;&#x306F; text-shadow &#x3068;&#x540C;&#x69D8;&#x3001;&#x6700;&#x521D;&#x306B;&#x6307;&#x5B9A;&#x3055;&#x308C;&#x305F;&#x3082;&#x306E;&#x304C;&#x6700;&#x3082;&#x624B;&#x524D;&#x306B;&#x63CF;&#x753B;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;\"><code>box-shadow</code></a>, <a href=\"/ja/docs/Web/CSS/margin\" title=\"margin CSS&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306F;&#x3001;&#x56DB;&#x65B9;&#x5168;&#x3066;&#x306E;&#x4F59;&#x767D;&#x3092;&#x8A2D;&#x5B9A;&#x3057;&#x307E;&#x3059;&#x3002;margin &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306F;&#x3001;&#x5358;&#x4E00;&#x65B9;&#x5411;&#x306E; margin &#x3092;&#x8A2D;&#x5B9A;&#x3059;&#x308B;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3; ( margin-top / margin-right / margin-bottom / margin-left ) &#x3092;&#x540C;&#x6642;&#x306B;&#x5168;&#x65B9;&#x5411;&#x306B;&#x5BFE;&#x3057;&#x3066;&#x6307;&#x5B9A;&#x3059;&#x308B;&#x70BA;&#x306E;&#x30B7;&#x30E7;&#x30FC;&#x30C8;&#x30CF;&#x30F3;&#x30C9;&#x30FB;&#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x3067;&#x3059;&#x3002;&#10;  &#x8CA0;&#x306E;&#x5024;&#x3092;&#x6307;&#x5B9A;&#x3059;&#x308B;&#x4E8B;&#x3082;&#x51FA;&#x6765;&#x307E;&#x3059;&#x3002;\"><code>margin</code></a> and <a href=\"/ja/docs/Web/CSS/clip\" title=\"CSS &#x306E; clip &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306F;&#x3001;&#x8981;&#x7D20;&#x306E;&#x3069;&#x306E;&#x90E8;&#x5206;&#x304C;&#x53EF;&#x8996;&#x3067;&#x3042;&#x308B;&#x304B;&#x3092;&#x5B9A;&#x7FA9;&#x3057;&#x307E;&#x3059;&#x3002;clip &#x30D7;&#x30ED;&#x30D1;&#x30C6;&#x30A3;&#x306F; position:absolute&#x3068;position:relative &#x3092;&#x6301;&#x3063;&#x305F;&#x8981;&#x7D20;&#x306B;&#x3060;&#x3051;&#x9069;&#x7528;&#x3055;&#x308C;&#x307E;&#x3059;&#x3002;\"><code>clip</code></a> of an element is applied when the box for the element is fragmented.\u00a0 Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed.\u00a0 Each piece of the rendering for the element is called a fragment.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Summary", "title": "Summary"}, {"id": "Syntax", "title": "Syntax"}, {"id": "Values", "title": "Values"}, {"id": "Formal_syntax", "title": "Formal syntax"}, {"id": "Examples", "title": "Examples"}, {"id": "Inline_box_fragments", "title": "Inline box fragments"}, {"id": "Block_box_fragments", "title": "Block box fragments"}, {"id": "Specifications", "title": "Specifications"}, {"id": "Browser_compatibility", "title": "Browser compatibility"}, {"id": "See_also", "title": "See also"}], "id": 164075, "review_tags": []}