CSS边框

元素的边框属性:

  • border 简写属性,用于把针对四个边的属性设置在一个声明。
  • border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
    • 常用单位为像素(px)、em
    • thin细的边框。/medium 默认/thick 定义粗的边框。
  • border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
    • none 定义无边框。
    • dotted 定义点状边框
    • dashed 定义虚线
    • solid 定义实线。
    • double 定义双线
    • groove 定义 3D 凹槽边框。
    • ridge 定义 3D 垄状边框。
    • inset 定义 3D inset 边框
    • outset 定义 3D outset 边框。
  • border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
  • border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
  • border-bottom-color 设置元素的下边框的颜色。
  • border-bottom-style 设置元素的下边框的样式。
  • border-bottom-width 设置元素的下边框的宽度。
  • border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
  • border-left-color 设置元素的左边框的颜色。
  • border-left-style 设置元素的左边框的样式。
  • border-left-width 设置元素的左边框的宽度。
  • border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
  • border-right-color 设置元素的右边框的颜色。
  • border-right-style 设置元素的右边框的样式。
  • border-right-width 设置元素的右边框的宽度。
  • border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
  • border-top-color 设置元素的上边框的颜色。
  • border-top-style 设置元素的上边框的样式。
  • border-top-width 设置元素的上边框的宽度。

CSS3新增的边框属性:

  • border-radius 设置所有四个 border-radius 属性的简写属性。
    1. * 同时设定四个角的圆角
    2. ** 分别设定左上 右下、左下 右上圆角
    3. *** 分别设定左上 、左下 右上、右下圆角
    4. **** 分别设定左上 、右上、右下、左下圆角
    • border-top-left-radius 左上角圆角边框
    • border-top-right-radius 右上角圆角边框
    • border-bottom-right-radius 右下角圆角边框
    • border-bottom-left-radius 左下角圆角边框
  • border-image 设置所有 border-image属性的简写属性。
    • border-image 复合属性,设置边框使用图像来填充,可依次设置一下属性:
      • border-image-source 图像来源路径
      • border-image-slice 边框背景图的分割方式
      • border-image-width 边框的宽度。
      • border-image-outset 边框背景图的扩展(边框图像区域超出边框的量。)
      • border-image-repeat 边框图像的平铺方式:stretch拉伸/repeat重复铺满/round重复铺满并对图片进行调整
  • box-shadow 向方框添加一个或多个阴影。
    • none: 无阴影
    • 阴影水平偏移值/阴影垂直偏移值/阴影模糊值/阴影外延值/阴影的颜色/inset内阴影(默认值为outset)
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注