CSS Border特性solid(实线)应用详细介绍

2021-03-09 17:01 jianzhan
制做过网页页面的人都有为画线而苦恼的亲身经历,先来了解1下“Border”(画边框),它是CSS的1个特性,用它能够给能明确范畴的HTML标识(如TD、DIV这些)画边框,它能够界定边框线的种类、宽度和色调,运用这个特点,能够制做1些独特实际效果。下面把根据案例来讲明其运用技能。

1、给文字加边框
 
上面的示例中,给1段文本加了不一样的边框,只是以便表明边框线的色调、粗细是可变的。
第1个边框的CSS编码是:style="border:thin solid red";
“border”后边的3个主要参数的含意是:边框线的宽度是:thin(细线);边框线的种类:solid(实线);边框线的色调:red(鲜红色)。
边框线的宽度有3个规范值:thin(细线)、medium(中粗线)和thick(粗线),
另外,还可以自定宽度,如:1pt、5px、2cm等。

边框线的种类有9个明确值:none(无垠框线)、 dotted(由点构成的虚线)、 dashed(由短线构成的虚线)、 solid(实线)、 double(双线,双线宽度再加它们之间的空白一部分的宽度就等于border-width界定的宽度)、 groove(三d沟槽状的边框)、 ridge(三d脊状的边框)、 inset(三d嵌入边框,色调较深)、 outset(三d外嵌边框,色调较浅),
留意:假如系统软件不适用这些边框的特性值,那末“dotted”、“dashed”、“double”、“groove”、“ridge”、“inset”和“outset”都会被“solid”替代。
边框线的色调:能够用106进制的色调编码,如#00ffcc。

从上面能够看出,给文字加边框的确很简易,上例中后边那几个边框的设定,我不讲你也搞清楚了吧!在这里告知你1点小窍门,给1段文字加边框,可把CSS加在〈P〉标识里;给几段文字加边框,先把那几段文字用DIV标识括起来,再把CSS加在〈DIV〉标识里;若是要给1写作本加几个不一样的边框,则必须把文字放在报表里,再把CSS各自加到〈TD〉标识里。

2、给导航栏菜单加隔开线
 
上面这个事例中的小白线,自然能够用图像来做,但我在这里是用CSS的“border”的拓展特性画了边框的1条边,这样编码要少的多。画边框的单侧与上例的边框的4条边相近,1个边框的4条边的特性以下:
边框线名字:border-top(上边框线)、border-right(右侧框线)、border-bottom(下边框线)和boder-left(左侧框线);每条边框线的种类、宽度和色调的赋值与“boder”特性同样。如本例中要界定每一个模块格的左侧框线为白色线,线的宽度为“1px”的实线,则CSS编码是这样的:style="border-left: 1px solid #ffffff"。
在独立界定边框线时,若不得出某个值,那末就取其默认设置的原始值。在dreamweaver中界定CSS十分便捷,无需撰写编码;把常见的边框线1次界定好,放出外连式CSS文档中,要用时启用1下就可以了,十分便捷。
3、在1个边框中选用不一样宽度和色调的边框线
在本例中的实际效果,自然能够用上例中的方式来完成,但那样编码过量,可选用另外一种合拼的方式,把4条边的特性值归类放在1起,如本例的编码是这样的:
style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。

从上面能够看出,我把边框线的种类、宽度和色调分类在1起界定了,这里请留意几点:
1、4条边框线的部位次序是:上边框线、右侧框线、下边框线、左侧框线;
2、我在本例中边框线的种类只取了1种实线种类,具体上4条边还可以各自界定不一样的种类;
3、特性值能够界定1个、两个、3个或4个。假如仅界定1个特性值,则其余3个全自动取同样值,如:border-style:solid与border-style:solid solid solid solid的实际效果彻底1样;假如仅得出两个或3个值,那末缺少边的特性值把取与对边同样的值。如:boder-width:thin thick与border-width:thin thick thin thick实际效果同样,border-width:1px 2px 3px与border-width:1px 2px 3px 2px的实际效果同样。

Border特性的灵便运用,能够造成很多独特实际效果,方式与上面详细介绍的同样。
事例:

拷贝编码
编码以下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>1列固定不动宽度——</title>
<style type="text/css">
<!--
#layout {
border: 2px solid #A9C9E2;
background-color: #E8F5FE;
height: 200px;
width: 300px;
}
-->
</style>
</head>
<body>
<div id="layout">hfhfg</div>
</body>
</html>