巧用CSS的Border属性

原创 2004年11月04日 10:17:00

作者:冯永曜 来源:黄山村夫

制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助。我们先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD、DIV等等)画边框,它可以定义边框线的类型、宽度和颜色,利用这个特性,可以制作一些特殊效果。下面将通过实例来说明其应用技巧。

  1、给文本加边框
   上面的示例中,给一段文字加了不同的边框,只是为了说明边框线的颜色、粗细是可变的。第一个边框的CSS代码是:style="border:thin solid red";“border”后面的三个参数的含义是:边框线的宽度是:thin(细线);边框线的类型:solid(实线);边框线的颜色:red(红色)。我们定义边框,实际上就是设定这三个参数值。
   边框线的宽度有三个标准值:thin(细线)、medium(中粗线)和thick(粗线),此外,也可以自定义宽度,如:1pt、5px、2cm等。
   边框线的类型有九个确定值:none(无边框线)、 dotted(由点组成的虚线)、 dashed(由短线组成的虚线)、 solid(实线)、 double(双线,双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度)、 groove(3D沟槽状的边框)、 ridge(3D脊状的边框)、 inset(3D内嵌边框,颜色较深)、 outset(3D外嵌边框,颜色较浅),注意:如果系统不支持这些边框的属性值,那么“dotted”、“dashed”、“double”、“groove”、“ridge”、“inset”和“outset”都会被“solid”代替。
   边框线的颜色:可以用十六进制的颜色代码,如#00ffcc。
   从上面可以看出,给文本加边框确实很简单,上例中后面那几个边框的设置,我不讲你也明白了吧!在这里告诉你一点小技巧,给一段文本加边框,可把CSS加在〈P〉标记里;给几段文本加边框,先把那几段文本用DIV标记括起来,再把CSS加在〈DIV〉标记里;若是要给一行文本加几个不同的边框,则需要把文本放在表格里,再把CSS分别加到〈TD〉标记里。  2、给导航菜单加分隔线
   上面这个例子中的小白线,当然可以用图象来做,但我在这里是用CSS的“border”的扩展属性画了边框的一条边,这样代码要少的多。画边框的单边与上例的边框的四条边类似,一个边框的四条边的属性如下:
   边框线名称:border-top(上边框线)、border-right(右边框线)、border-bottom(下边框线)和boder-left(左边框线);每条边框线的类型、宽度和颜色的取值与“boder”属性相同。如本例中要定义每个单元格的左边框线为白色线,线的宽度为“1px”的实线,则CSS代码是这样的:style="border-left: 1px solid #ffffff"。
   在单独定义边框线时,若不给出某个值,那么就取其默认的初始值。在dreamweaver中定义CSS非常方便,不用编写代码;把常用的边框线一次定义好,放在外连式CSS文件中,要用时调用一下就行了,非常方便。  3、在一个边框中采用不同宽度和颜色的边框线


   在本例中的效果,当然可以用上例中的方法来实现,但那样代码过多,可采用另一种合并的方法,把四条边的属性值分类放在一起,如本例的代码是这样的:
   style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。
   从上面可以看出,我把边框线的类型、宽度和颜色归类在一起定义了,这里请注意几点:
   一、四条边框线的位置顺序是:上边框线、右边框线、下边框线、左边框线;
   二、我在本例中边框线的类型只取了一种实线类型,实际上四条边也可以分别定义不同的类型;
   三、属性值可以定义一个、两个、三个或者四个。如果仅定义一个属性值,则其余三个自动取相同值,如:border-style:solid与border-style:solid solid solid solid的效果完全一样;如果仅给出两个或三个值,那么缺失边的属性值将取与对边相同的值。如:boder-width:thin thick与border-width:thin thick thin thick效果相同,border-width:1px 2px 3px与border-width:1px 2px 3px 2px的效果相同。
   Border属性的灵活应用,可以产生许多特殊效果,方法与上面介绍的相同,不再一一举例了。

 
 

版权声明:本文为博主原创文章,未经博主允许不得转载。

微信小程序css篇----边框(Border)

一.边框:border 设置对象边框的特性。 1.语法:border:length   style  color  2.style:none ,hidden,dotted,dashed,solid,d...
  • qq_32067045
  • qq_32067045
  • 2016年12月30日 11:22
  • 21506

小程序中圆角边框的设置

与CSS一样,小程序中的圆角可以通过border-radius来设置。 以input为例,想要设置圆角边框,只需加上如下样式: border-radius: 5px即可实现如下效果: 不同的是...
  • BeiLinYu
  • BeiLinYu
  • 2017年01月09日 17:59
  • 12524

微信小程序学习笔记——CSS点滴记录

border对元素设置边框,写法如下:border: 1px solid #0ff;设置border的顺序为border-width、,border-style和border-color,width直...
  • mixin716
  • mixin716
  • 2016年11月22日 17:44
  • 6758

微信小程序css篇----外边距(margin)和内边距(padding)

说到边距,那这个基本上跟android里的概念差不多,先来看一个图吧,(虽然标注的丑了点,不过那不是重点) 一.margin:外边距;设置对象四边的外延边距。 margin: 20rpx 10r...
  • qq_32067045
  • qq_32067045
  • 2016年12月29日 23:16
  • 10510

CSS学习笔记(2)背景/边框/外延/填充

参考文献: 《HTML, CSS, JavaScript 整合详解》 王津涛 编著,机械工业出版社 1.     CSS背景属性,包括背景颜色、背景图片、背景图片重复等 ...
  • LostPub
  • LostPub
  • 2012年01月15日 22:44
  • 2450

微信小程序wxss border及border-radius属性

border-radius: none | length{1,4} [/ length{1,4}  其中每一个值可以为 数值或百分比的形式。  length/length 第一个lenght表示水平方...
  • UFO00001
  • UFO00001
  • 2017年06月01日 16:45
  • 2940

巧用CSS的Border属性

。 作者:冯永曜 来源:黄山村夫制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助。我们先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML...
  • 21aspnet
  • 21aspnet
  • 2004年11月04日 10:17
  • 2324

微信小程序开发手记之三:backgroud和border属性

先来看一段样式,在wxss中page{ background-color: cadetblue; background-image: url(../../../image/weixin...
  • u013673799
  • u013673799
  • 2017年04月14日 14:08
  • 645

CSS的border属性的值的书写顺序

CSS的border属性的定义: Value:   [ || || ] | inherit Initial:   see individual...
  • yunying_si
  • yunying_si
  • 2014年03月28日 13:30
  • 1873

CSS--两种盒子模型以及border属性

盒模型(box model) 概述: margin(-TopRightBottomLeft), padding(-TRBL),border(TRBL+style|color|width), box...
  • cat_foursi
  • cat_foursi
  • 2017年05月04日 22:05
  • 1879
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:巧用CSS的Border属性
举报原因:
原因补充:

(最多只允许输入30个字)