码迷,mamicode.com
首页 > Web开发 > 详细

边界直列开始 | border-inline-start (Logical Properties) - CSS 中文开发手册 - Break易站

时间:2020-07-04 10:25:58      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:chrome   length   tps   ati   mob   rom   form   yellow   tle   

  • ??CSS 中文开发手册

    边界直列开始 | border-inline-start (Logical Properties) - CSS 中文开发手册

    这是一项实验技术

    由于该技术的规格不稳定,请查看兼容性表以了解各种浏览器的使用情况。还请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

    该border-inline-start CSS 属性是在样式表一个单一的地方设置单独的逻辑直列开始 border 属性值的速记属性。

    border-inline-start: 1px;
    border-inline-start: 2px dotted;
    border-inline-start: medium dashed green;

    border-inline-start可用于对一个或多个的设置的值border-inline-start-width,border-inline-start-style和border-inline-start-color。它映射的物理边界取决于元素的写入模式,方向性和文本方向。它对应于border-top,border-right,border-bottom,或border-left属性根据为定义的值writing-mode,direction和text-orientation。

    相关属性是border-block-start,border-block-end和border-inline-end,它们定义了元素的其他边界。

    初始值

    作为简写的每个属性:border-width:作为简写的每个属性:border-top-width:中等border-right-width:中等border-bottom-width:中等border-left-width:中等border-style:作为速记的每个属性:border-top-style:none border-right-style:none border-bottom-style:none border-left-style:none color:从一个浏览器到另一个浏览器

    适用于

    所有元素

    继承

    媒体

    视觉

    计算值

    作为简写的每个属性:border-width:作为简写的每个属性:border-bottom-width:绝对长度,如果border-bottom-style为none或hidden border-left-width则为0:绝对长度,如果border-left-style是none或hidden border,则为0 border-right-width:绝对长度,如果border-right-style为none或hidden,则为0 border-top-width:绝对长度,如果是border-top,则为0 -style是none或hidden border-style:作为速记的每个属性:border-bottom-style:指定的border-left-style:指定的border-right-style:指定的border-top-style:as指定的颜色:如果该值是半透明的,则计算的值将是rgba()对应的值。如果不是,它将是rgb()对应的一个。透明关键字映射到rgba(0,0,0,0)。

    动画类型

    离散的

    规范的顺序

    形式语法定义的独特非模糊顺序

    border-width:作为速记的每个属性:

    -  [`border-top-width`](border-top-width): `medium` 
    -  [`border-right-width`](border-right-width): `medium` 
    -  [`border-bottom-width`](border-bottom-width): `medium` 
    -  [`border-left-width`](border-left-width): `medium` 

    border-style:作为速记的每个属性:

    -  [`border-top-style`](border-top-style): `none` 
    -  [`border-right-style`](border-right-style): `none` 
    -  [`border-bottom-style`](border-bottom-style): `none` 
    -  [`border-left-style`](border-left-style): `none` 

    color:因浏览器而异

    Applies to all elements   [Inherited](inheritance) no   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

    border-width:作为速记的每个属性:

    -  [`border-bottom-width`](border-bottom-width): the absolute length or `0` if [`border-bottom-style`](border-bottom-style) is `none` or `hidden` 
    -  [`border-left-width`](border-left-width): the absolute length or `0` if [`border-left-style`](border-left-style) is `none` or `hidden` 
    -  [`border-right-width`](border-right-width): the absolute length or `0` if [`border-right-style`](border-right-style) is `none` or `hidden` 
    -  [`border-top-width`](border-top-width): the absolute length or `0` if [`border-top-style`](border-top-style) is `none` or `hidden` 

    border-style:作为速记的每个属性:

    -  [`border-bottom-style`](border-bottom-style): as specified
    -  [`border-left-style`](border-left-style): as specified
    -  [`border-right-style`](border-right-style): as specified
    -  [`border-top-style`](border-top-style): as specified

    color:如果该值是半透明的,则计算出的值将是rgba()相应的值。如果不是,那将是rgb()相应的一个。该transparent关键字映射到rgba(0,0,0,0)。

    Animation type discrete   Canonical order the unique non-ambiguous order defined by the formal grammar  

    语法

    在border-inline-start与一个或多个以下的规定,以任何顺序:

    <‘border-width‘>边框的宽度。看border-width。

    <‘border-style‘>边框的线条样式。看border-style。

    <‘color‘>边框的颜色。看color。

    形式语法

    <‘border-width‘> || <‘border-style‘> || <‘color‘>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>

    例子

    HTML 内容

    <div>
      <p class="exampleText">Example text</p>
    </div>

    CSS 内容

    div {
      background-color: yellow;
      width: 120px;
      height: 120px;
    }
    
    .exampleText {
      writing-mode: vertical-rl;
      border-inline-start: 5px dashed blue;
    }

    规范

    Specification

    Status

    Comment

    CSS Logical Properties Level 1The definition of ‘border-inline-start‘ in that specification.

    Editor‘s Draft

    Initial definition

    浏览器兼容性

    Feature

    Chrome

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari (WebKit)

    Basic support

    No support

    41.0 (41.0)1

    No support

    No support

    No support

    Feature

    Android

    Firefox Mobile (Gecko)

    IE Phone

    Opera Mobile

    Safari Mobile

    Basic support

    No support

    41.0 (41.0)1

    No support

    No support

    No support

  • ??CSS 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32385.html

    边界直列开始 | border-inline-start (Logical Properties) - CSS 中文开发手册 - Break易站

    标签:chrome   length   tps   ati   mob   rom   form   yellow   tle   

    原文地址:https://www.cnblogs.com/breakyizhan/p/13233974.html

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!