首页技术文章正文

border-style属性设置边框样式【案例演示】

更新时间:2022-08-09 来源:黑马程序员 浏览量:

IT培训班

在CSS属性中,border-style属性用于设置边框样式。其基本语法格式如下:

border-style: 上边 [右边下边 左边];

在设置边框样式时既可以对四边分别设置,也可以综合设置四边的样式。border-style的常用属性值有4个,分别用于定义不同的显示样式,具体介绍如下。

•solid:边框为单实线。

•dashed:边框为虚线。

•dotted:边框为点线。

•double:边框为双实线。

使用border-style属性综合设置四边样式时,必须按上右下左的顺时针顺序,省略时采用值复制的原则,即一个值为四边,两个值为上下和左右,三个值为上、左右、下,四个值为上、右、下、左。

例如,<p>只有上边为虚线(dashed),其他三边为单实线(solid),可以使用(border-style)综合属性分别设置各边样式:

{borer-style: dashed solid solid solid;}    /*四个值为上、右、下、左*/

也可以简写为

P{borer-style: dashed solid solid;}       /*三个值为上、左右、下・/

以下所示即为不同边框样式的盒子:

   文本的边框样式为单实线


   文本的边框样式是上下为点线、左右边框为单实线


   文本的边框样式是上为点线、左右下边框为单实线


   文本的边框样式是上下为点线、左右边框为单实线

分享到:
在线咨询 我要报名