Propriedade border-inline-start do CSS

Página anterior border-inline-end-width
Próxima página border-inline-start-color

定义和用法

border-inline-start 属性是以下属性的简写：

CSS border-inline-start 属性与 CSS 属性 border-bottom、border-left、border-right e}} border-top 非常相似，但 border-inline-start 属性依赖于行内方向。

注意：相关的 CSS 属性 writing-mode、text-orientation e}} direction Define a direção inline. Isso afeta a posição de início e fim de uma linha, bem como border-inline-start O resultado da propriedade. Para páginas em inglês, a direção inline é de esquerda para direita, e a direção de bloco é de cima para baixo.

Exemplo

Exemplo 1

Defina a largura, cor e estilo da borda no início da direção inline：

div {
  border-inline-start: 10px solid pink;
}

Experimente você mesmo

Exemplo 2: Combinando o atributo writing-mode

A posição da borda no início da direção inline é afetada por writing-mode Atributo afetado：

div {
  writing-mode: vertical-rl;
  border-inline-start: 5px solid blue;
}

Experimente você mesmo

Exemplo 3: Combinando o atributo direction

A posição da borda no início da direção inline é afetada por direction Atributo afetado：

div {
  direction: rtl;
  border-inline-start: 5px solid hotpink;
}

Experimente você mesmo

Sintaxe do CSS

border-inline-start: border-inline-start-width border-inline-start-style border-inline-start-color|initial|inherit;

Valor do atributo

Valor	Descrição
border-inline-start-width	Especifique a largura da borda no início da direção inline do elemento. O valor padrão é medium.
border-inline-start-style	Especifique o estilo da borda no início da direção inline do elemento. O valor padrão é none.
border-inline-start-color	Especifique a cor da borda no início da direção inline do elemento. O valor padrão é a cor atual da borda.
initial	Defina essa propriedade para seu valor padrão. Veja também initial。
inherit	Herda essa propriedade do elemento pai. Veja também inherit。

Detalhes técnicos

Valor padrão：	medium none currentcolor
Herança：	Não
Produção de animação：	Suporte. Veja também：Propriedades relacionadas a animação。
Versão：	CSS3
Sintaxe do JavaScript：	object.style.borderInlineStart="pink dotted 5px"