Mfano wa CSS border-style

Ufafanuzi na matumizi

Mfano wa border-style wa kusababisha mifano ya kipimo cha vipendo kwa kila kiwango, au kila kipimo cha vipendo kwa kawaida.

Hakuna kwa sababu thamani hizi ni none, kifupi cha kipimo cha vipendo hivyo kinaweza kuonekana.

Mfano 1

border-style:dotted solid double dashed;
  • Kampi ya juu ni vipendo vya kipimo cha vipendo
  • Kampi ya kulia ni vipendo vya kawaida
  • Kampi ya chini ni vipendo vya kawaida
  • Kampi ya kushoto ni vipendo vya kawaida

Mfano 2

border-style:dotted solid double;
  • Kampi ya juu ni vipendo vya kipimo cha vipendo
  • Kampi ya kulia na kampi ya kushoto ni vipendo vya kawaida
  • Kampi ya chini ni vipendo vya kawaida

Mfano 3

border-style:dotted solid;
  • Kampi ya juu na kampi ya chini ni vipendo vya kipimo cha vipendo
  • Kampi ya kulia na kampi ya kushoto ni vipendo vya kawaida

Mfano 4

border-style:dotted;
  • Tofauti 4 zote ni wameza kwenye kipimo cha vipendo

Tazama pia:

CSS Mafunzo:Vifungo vya CSS

HTML DOM 参考手册：borderStyle 属性

实例

设置 4 个边框的样式：

p
  {
  border-style:solid;
  }

亲自试一试

CSS 语法

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

属性值

值 描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。

描述

最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过，CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗，也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定，创作人员对这个决定没有任何影响。

技术细节

默认值： not specified
继承性： no
版本： CSS1
JavaScript 语法： object.style.borderStyle="dotted double"

更多实例

设置四边框样式
本例演示如何设置四边框样式。
设置每一边的不同边框
本例演示如何在元素的各边设置不同的边框。

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5