CSS3边框-第四课

  • border-style
  • border-width
  • border-color
  • 边框各边
  • 边框简写

下面就一 一 来介绍边框

border-style

CSS 边框样式

border-style 属性指定要显示的边框类型。

允许以下值:

  • dotted – 定义点线边框
  • dashed – 定义虚线边框
  • solid – 定义实线边框
  • double – 定义双边框
  • groove – 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge – 定义 3D 脊线边框。效果取决于 border-color 值
  • inset – 定义 3D inset 边框。效果取决于 border-color 值
  • outset – 定义 3D outset 边框。效果取决于 border-color 值
  • none – 定义无边框
  • hidden – 定义隐藏边框

border-style 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)。

border-width

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小(以 px、pt、cm、em 计),也可以使用以下三个预定义值之一:thin、medium 或 thick:

border-color

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色:

  • name – 指定颜色名,比如 “red”
  • HEX – 指定十六进制值,比如 “#ff0000”
  • RGB – 指定 RGB 值,比如 “rgb(255,0,0)”
  • HSL – 指定 HSL 值,比如 “hsl(0, 100%, 50%)”
  • transparent

CSS 边框各边

它的工作原理是这样的:

如果 border-style 属性设置四个值:

border-style: dotted solid double dashed;

  • 上边框是虚线
  • 右边框是实线
  • 下边框是双线
  • 左边框是虚线

如果 border-style 属性设置三个值:

border-style: dotted solid double;

  • 上边框是虚线
  • 右和左边框是实线
  • 下边框是双线

如果 border-style 属性设置两个值:

border-style: dotted solid;

  • 上和下边框是虚线
  • 右和左边框是实线

如果 border-style 属性设置一个值:

border-style: dotted;

  • 四条边均为虚线

CSS Border – 简写属性

就像您在上一章中所见,处理边框时要考虑许多属性。

为了缩减代码,也可以在一个属性中指定所有单独的边框属性。

border 属性是以下各个边框属性的简写属性:

  • border-width
  • border-style(必需)
  • border-color

实例

p {
  border: 5px solid red;
}

CSS 圆角边框

border-radius 属性用于向元素添加圆角边框:

实例

p {
  border: 2px solid red;
  border-radius: 5px;
}

亲自试一试https://www.w3school.com.cn/tiy/t.asp?f=css_border_roundhttps://www.w3school.com.cn/tiy/t.asp?f=css_border_round

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论