学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>css>>经验笔记>>

css设置div只显示某一边的边框

发布时间:2019-12-06点击:

    一、CSS border-width 属性

    border-width是实现显示边框的重要属性。用法如下:

    border-width:top right bottom left
    参数说明:

    top:上边框属性,可以设置像素,也可以设置样式,意思为上边框的宽度。

    right:右边框属性,可以设置像素,也可以设置样式,意思为上边框的宽度。

    bottom:下边框属性,可以设置像素,也可以设置样式,意思为上边框的宽度。

    left:左边框属性,可以设置像素,也可以设置样式,意思为上边框的宽度。

    其中像素如:10px  20px等

    内置样式有:

    thin:定义细的边框;

    medium:默认值,定义中等边框;

    thick:定义粗的边框;

    inherit:继承父元素的边框宽度。

    二、CSS border-style 属性

    border-style是用来设置边框线样式的,语法如下:

    border-style:样式;
    其中可设置的样式有:

    none      定义无边框。

    hidden     与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。

    dotted      定义点状边框。在大多数浏览器中呈现为实线。

    dashed    定义虚线。在大多数浏览器中呈现为实线。

    solid        定义实线。

    double     定义双线。双线的宽度等于 border-width 的值。

    groove     定义 3D 凹槽边框。其效果取决于 border-color 的值。

    ridge      定义 3D 垄状边框。其效果取决于 border-color 的值。

    inset      定义 3D inset 边框。其效果取决于 border-color 的值。

    outset    定义 3D outset 边框。其效果取决于 border-color 的值。

    inherit     规定应该从父元素继承边框样式。

    三、实例应用

    只要定义边框不为0,即可显示边框(但是需要定义边框线样式),如果想要只显示下边框就相当于把top、right、left设置为0px;下边框不为0即可。

    实例如下:

    <html> <head> <meta charset='utf-8'> <title>标题</title> </head> <body> <style> .show{     border-width: 0 0 1px 0;     border-style: solid;     border-color: black; } </style> <div class='show'>只显示下边框</div> </body> </html>
    显示如下:

    如果想要只显示右边框只需要改border-width属性为 0 1px 0 0即可。

    如有疑问欢迎留言相互交流。

赞一个(0)     踩一个(0)    

相关链接

搜索

昵称:*
邮箱:
电话:
评论: