Atributo border-inline-style CSS

Página anterior border-inline-start-width
Página siguiente border-inline-width

Definición y uso

border-inline-style La propiedad configura el estilo del borde del elemento en la dirección del flujo en línea.

border-inline-style El valor de la propiedad se puede configurar de diferentes maneras:

Si border-inline-style La propiedad tiene dos valores:

div {

El estilo del borde en el inicio del flujo en línea es línea continua (solid)
El estilo del borde en el final del flujo en línea es línea punteada (dotted)

Si border-inline-style La propiedad tiene un valor:

writing-mode

El estilo del borde en el inicio y final de la línea en línea es línea punteada (dotted)

CSS de border-inline-style La propiedad es similar a border-bottom-style、border-left-style、border-right-style y border-top-style Las propiedades son muy similares, pero border-inline-style La propiedad depende de la dirección del flujo en línea.

Nota:las propiedades CSS relacionadas border-inline-style: dashed dotted;、text-orientation y Ejemplo 3: Combinación con el atributo direction Define la dirección del flujo en línea. Esto afecta la posición de inicio y finalización de la línea, así como border-inline-style El resultado de las propiedades. Para las páginas en inglés, la dirección del flujo en línea es de izquierda a derecha, y la dirección del bloque es hacia abajo.

实例

Instancia

Ejemplo

Ejemplo 1
  Establecer el estilo de borde en la dirección en línea：
direction: rtl;
#example1 {
  border-inline-style: solid;
direction: rtl;

border-inline-style: solid dotted;

#example2 {

border-inline-style: dotted; border-inline-style: dashed dotted; La posición del borde en los puntos de inicio y final de la dirección en línea se ve afectada por

direction
  Ejemplo 2: Combinación con el atributo writing-mode
  writing-mode
direction: rtl;

border-inline-style: solid dotted;

writing-mode: vertical-rl;

border-inline-style: dotted; Ejemplo 3: Combinación con el atributo direction La posición del borde en los puntos de inicio y final de la dirección en línea se ve afectada por

direction
  Afectación del atributo：
  div {
direction: rtl;

border-inline-style: solid dotted;

}

Pruebe usted mismo

Sintaxis de CSS

border-inline-style: none\|hidden\|dotted\|dashed\|solid\|double\|groove\|ridge\|inset\|outset\|initial\|inherit;	Valor del atributo
none	Valor
Descripción	Valor predeterminado. Especifique bordes sin borde.
hidden	Igual que none, pero difiere en la resolución de conflictos de borde en elementos de tabla.
dashed	Especifique el borde de línea punteada.
solid	Especifique el borde de línea sólida.
double	Especifique el borde de línea doble.
groove	Especifique el borde en relieve 3D. El efecto depende del valor de border-color。
ridge	Especifique el borde elevado 3D. El efecto depende del valor de border-color。
inset	Especifique el borde adentro 3D. El efecto depende del valor de border-color。
outset	Especifique el borde afuera 3D. El efecto depende del valor de border-color。
initial	Establezca este atributo en su valor predeterminado. Vea initial。
inherit	Hereda este atributo de su elemento padre. Vea inherit。

Detalles técnicos

Valor predeterminado：	none
Herencia：	No
Producción de animación：	No se admite. Consulte：Atributos relacionados con la animación。
Versión：	CSS3
Sintaxis de JavaScript：	object.style.borderInlineStyle="dotted"