CSS 边框逻辑属性

border-inline 和 border-block

border-block:8px solid orange;

border-inline:8px solid #0f0;

在 <p> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <div> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <table> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-inline

border-inline:8px solid #0f0;

在 <p> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <div> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <table> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-inline:medium dashed #0f0;

在 <p> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <div> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <table> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-inline: 1rem double lime;

在 <p> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <div> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <table> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-block

border-block:8px solid #0f0;

在 <p> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <div> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <table> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-block:medium dashed #0f0;

在 <p> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <div> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <table> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-block: 1rem double lime;

在 <p> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <div> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <table> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-inline 和 border-block 各自的逻辑属性

border-inline-start:solid;
border-inline-end:dashed;
border-inline-color:lime;
border-inline-width:8px 6px;

在 <p> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <div> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <table> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-block-start:solid;
border-block-end:dashed;
border-block-color:lime;
border-block-width:8px 6px;

在 <p> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <div> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <table> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-inline 和 border-block 长手属性

border-inline-start-style:dashed;
border-inline-end-style:dashed;
border-inline-start-color:lime;
border-inline-end-color:lime;
border-inline-start-width:8px;
border-inline-end-width:6px;

与上述相同，但使用 border-block，样式为实线，颜色为橙色。

在 <p> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <div> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

在 <table> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, sunt.

border-radius 逻辑属性

border-start-start-radius: 80px 80px;
border-start-end-radius 50%;
border-end-start-radius: 250px 100px;
border-end-end-radius: 80px 80px;

在 <div> 上。Lorem ipsum dolor sit amet consectetur, adipisicing elit.

caniemail.com, 2022.