当前位置:首页 > 技术知识 > 正文内容

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

maynowei7个月前 (09-11)技术知识77

在网页设计中经常用到css来设计各种边框样式以及颜色等,有时候需要一个div只显示一个边框,那么你可能会用到下面的一些方法。

一、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即可。

相关文章

Axure RP设计伸缩导航、遮罩弹窗、返回顶部的方法

以下几小教程使用的是Axure的动态面板来实现,内容简单,适合菜鸟查阅,老鸟可飘过,顺便帮忙点个赞哈/偷笑。一.伸缩/隐藏导航栏例如:鼠标移动到一级导航上,二级导航会下拉方式显示1.打开Axure,拖...

大势所趋:Swift受欢迎度即将赶超Objective C

Swift是Apple在WWDC2014所发布的一门编程语言,用来撰写OS X和iOS应用程序。不到两年时间,在iOS开发者中Swift语言便凭借着简洁的语法和优秀的特性打动了开发者,之前用于iOS和...

微软宣布SQL Server 2016,2005版将结束支持

IT之家讯 在芝加哥Ignite大会上,微软宣布了SQL Server 2016,并将于今年夏季发布公开预览版。SQL Server是由微软开发的关系型数据库管理系统,用于软件应用请求数据的存储和管理...

Android让视图折叠(安卓叠加视图设置)

Android UI Libs之ExpandableLayout1. 说明ExpandableLayout,顾名思义,可扩展的布局,是一个可以帮助我们实现折叠功能的第三方库,折叠时,只显示头部,打开时...

如何优雅地使用嵌入式事件标志组?

事件标志组嵌入式事件标志组是一种在嵌入式系统中广泛使用的同步机制,主要用于实现多任务间的同步与通信。事件标志组是一组事件标志位的集合,每个位代表一个事件是否发生。它允许任务等待特定的事件发生,当事件发...

C语言进阶教程:线程同步:互斥锁、条件变量与信号量

在多线程编程中,线程同步是确保数据一致性和程序正确性的关键。当多个线程需要访问共享资源时,如果缺乏适当的同步机制,就可能导致竞态条件(Race Condition)、死锁(Deadlock)等问题。本...