css 设置边框

css 设置边框

CSS 设置边框主要通过border简写属性或单独的样式、宽度、颜色属性来实现。

简写属性
使用border可以一次性定义边框的宽度、样式和颜色,顺序任意。

/* 语法:border: 宽度 样式 颜色; */div{border:2px solid red;}

单独属性
分别控制边框的三个核心特征:

  • 样式 (border-style):定义边框类型,常用值包括solid实线、dashed虚线、dotted点状线和double双线。这是唯一必需的属性,值为none时不会显示边框。
  • 宽度 (border-width):定义边框粗细,可使用像素px等单位,或thinmediumthick关键字。
  • 颜色 (border-color):定义边框颜色,支持颜色名称、十六进制或 RGB 值。

单边设置
若只需设置某一边的边框,可使用border-topborder-rightborder-bottomborder-left

圆角效果
使用border-radius属性可以创建圆角,值为长度单位或百分比。

/* 语法:border-radius: 水平半径 / 垂直半径; */div{border-radius:10px;/* 四个角均为10px圆角 */}