文章目录

• 一、边框单独指定语法
• 二、代码示例
• • 1、边框单独指定代码示例
  • 2、设置表单边框代码示例

一、边框单独指定语法

盒子的 边框 Border , 由 四个方向 的边框组成 , 左上右下 四个 方向 上的 边框 可以单独指定样式 ,

如 : 上边框指定 4 像素 的 红色 实线 , 下边框 指定 2 像素 的 灰色 虚线 ;

边框单独指定 语法 :

• 上边框 :

  • 上边框样式 : 通过 border-top-style 属性设置 ;
  • 上边框宽度 : 通过 border-top-width 属性设置 ;
  • 上边框颜色 : 通过 border-top-color 属性设置 ;
  • 总体写法 : 通过 border-top 属性设置 ;

• 下边框 :

  • 下边框样式 : 通过 border-bottom-style 属性设置 ;
  • 下边框宽度 : 通过 border-bottom-width 属性设置 ;
  • 下边框颜色 : 通过 border-bottom-color 属性设置 ;
  • 总体写法 : 通过 border-bottom属性设置 ;

• 左边框 :

  • 左边框样式 : 通过 border-left-style 属性设置 ;
  • 左边框宽度 : 通过 border-left-width 属性设置 ;
  • 左边框颜色 : 通过 border-left-color 属性设置 ;
  • 总体写法 : 通过 border-left 属性设置 ;

• 右边框 :

  • 右边框样式 : 通过 border-right-style 属性设置 ;
  • 右边框宽度 : 通过 border-right-width 属性设置 ;
  • 右边框颜色 : 通过 border-right-color 属性设置 ;
  • 总体写法 : 通过 border-right属性设置 ;

建议使用 每个边框 的 总体写法 ;

二、代码示例

1、边框单独指定代码示例

代码示例 :

博客下载学习社区

显示效果 :

2、设置表单边框代码示例

input 表单 输入框 默认效果如下 :

上述表单的 四个 边框 , 可以单独设置 , 可以将 上左右 三个方向的边框取消 , 将下边框的样式设置成 2 像素的红色实线 ;

		#id2 {border-top: none;border-left: none;border-right: none;border-bottom: 2px solid red;}

设置后 , 效果如下 :

还有一种更简单的写法 , 就是 先将 表单的 四个方向的边框取消 , 然后单独设置 底部边框样式 :

		#id3 {border: none;border-bottom: 2px solid red;}

设置的样式如下 :

代码示例 :

博客下载学习社区
用户名 : 
密 码 : 
邮 箱 : 

显示效果 :