跳到主要内容

边框

border-style​

border-style 的关键词有：

  • none hidden

  • dotted 圆点、dashed 虚线、solid 实线、double 双实线

  • groove 雕刻效果、ridge 浮雕效果

  • inset 内陷、outset 外突

也可以用双值、三值、四值来设置样式。也可以用 border-xxx-style 直接指定。

这里 xxx 可以为 left、right、top、bottom、block-start、block-end、inline-start、inline-end ，下同。

border-color​​

颜色默认为 color 属性值。

除了列举，也可以用 border-xxx-color 指定某边颜色。

border-width​

默认值为 medium ，还有 thin 和 thick 。

除了列举，也可以用 border-xxx-width 指定某边宽度。

border 简写​

​​语法为 border: border-width border-style border-color; 。

.my-element {
  border: 1px solid red;
}

border-radius​

border-radius 为边框半径属性，数值可以是百分号。

除了列举，也可以用 border-xxx-xxx-radius 来指定某角。

每个角也可以指定两个值表示椭圆。在缩写中可以用该语法应用椭圆：

border-radius: ... ... ... / ... ...;

border-image​

设置边框背景图片。

.my-element {
    border-image-source: url(https://xxx.xx/xxx.jpg);
    border-image-slice: 61 58 51 48;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
}

参考​

Borders，Learn CSS - web.dev

border-style - MDN

border-image