CSS边框

演讲者：前端开发课程组

内容提纲

  1. CSS边框
  2. 边框属性
  3. 边框实验

CSS边框

设置网页中某元素的边框

选择符{
    /*复合属性*/
    border:1px solid #000;
    /*分别设置边框宽度、样式和颜色*/
    border-width:2px;
    border-style:dashed;
    border-color:#f00;
    /*分别针对上、右、下、左分别设置边框*/
    border-top:1px solid #000;
    border-right:2px solid #f00;
    border-bottom:3px solid #0f0;
    border-left:4px solid #00f;
    /*具体设置边框*/
    border-left-width:2px;
}

边框属性

属性 版本 继承性 描述
border CSS1 无 复合属性。设置对象边框的特性
border-width CSS1 无 设置或检索对象边框宽度
border-style CSS1 无 设置或检索对象边框样式
border-color CSS1 无 设置或检索对象边框颜色
border-top CSS1 无 复合属性。设置对象顶边的特性
border-top-width CSS1 无 设置或检索对象顶边宽度
border-top-style CSS1 无 设置或检索对象顶边样式
border-top-color CSS1 无 设置或检索对象顶边颜色
border-right CSS1 无 复合属性。设置对象右边的特性
border-right-width CSS1 无 设置或检索对象右边宽度
border-right-style CSS1 无 设置或检索对象右边样式
border-right-color CSS1 无 设置或检索对象右边颜色
border-bottom CSS1 无 复合属性。设置对象底边的特性
border-bottom-width CSS1 无 设置或检索对象底边宽度
border-bottom-style CSS1 无 设置或检索对象底边样式
border-bottom-color CSS1 无 设置或检索对象底边颜色
border-left CSS1 无 复合属性。置对象左边的特性
border-left-width CSS1 无 设置或检索对象左边宽度
border-left-style CSS1 无 设置或检索对象左边样式
border-left-color CSS1 无 设置或检索对象左边颜色

边框宽度详解

语法

border-width：<line-width>{1,4}
<line-width> = <length> | thin | medium | thick

注意事项

  1. 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
  2. 如果只提供一个，将用于全部的四边。
  3. 如果提供两个，第一个用于上、下，第二个用于左、右。
  4. 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
  5. 如果border-style设置为none或hidden，border-width的使用值将为0。

边框样式详解

语法

border-style：<line-style>{1,4}
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

注意事项

  1. 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
  2. 如果只提供一个，将用于全部的四边。
  3. 如果提供两个，第一个用于上、下，第二个用于左、右。
  4. 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
  5. 如果border-width等于0，本属性将失去作用。

边框样式图解

前端开发

旨为前端开发工程师的前端开发基础课程