盒子模型——边框

239 阅读2分钟

组成: margin+border+padding+conter(网页元素)

边框(border)

边框类型:border-style: ;

  • solid 实线
  • dotted 点状虚线
  • dashed 虚线
  • dobule 双实线
  • none 没有边框(网页默认)
  • 可以通过border-top/right/bottom/left-style: ;对上/右/下/左分别设置样式 也可以写直接在border-style:;中填写多个值
  • 两个值时 第一个值表示上下 第二个值表示左右
  • 三个值时 第一个值表示上 第二个值表示左右 第三个值表示下
  • 四个值时 第一个值表示上第二个值表示右 第三个值表示下 第四个之表示左 边框颜色(网页默认为黑色):border-color:
  • 同样可以通过border-top/right/bottom/left-color: ;对上/右/下/左分别设置样式 也可以写直接在border-color:;中填写多个值
  • 两个值时 第一个值表示上下 第二个值表示左右
  • 三个值时 第一个值表示上 第二个值表示左右 第三个值表示下
  • 四个值时 第一个值表示上第二个值表示右 第三个值表示下 第四个之表示左 边框粗细(默认为3px):border-width:;
  • thick 粗的边框 默认5px
  • medium 为默认边框 3px
  • thin 最细的边框 默认为1px
  • 像素值
  • 同样可以通过border-top/right/bottom/left-width: ;对上/右/下/左分别设置样式 也可以写直接在border-width:;中填写多个值
  • 两个值时 第一个值表示上下 第二个值表示左右
  • 三个值时 第一个值表示上 第二个值表示左右 第三个值表示下
  • 四个值时 第一个值表示上第二个值表示右 第三个值表示下 第四个之表示左 可以简写 列:border:2px sliod red;(style必须写上 否则无法在网页中显示)