CSS 的 border 样式

时间：2023-02-18 18:42:14

制作过网页的人都有为画线而烦恼的经历，先来认识一下“Border”（画边框），它是CSS的一个属性，用它可以给能确定范围的HTML标记（如TD、DIV等等）画边框，它可以定义边框线的类型、宽度和颜色，利用这个特性，可以制作一些特殊效果。下面把通过实例来说明其应用技巧。

1、给文本加边框 
CSS 的 border 样式 
上面的示例中，给一段文字加了不同的边框，只是为了说明边框线的颜色、粗细是可变的。 
第一个边框的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 样式 
上面这个例子中的小白线，当然可以用图象来做，但我在这里是用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属性的灵活应用，可以产生许多特殊效果，方法与上面介绍的相同。 
例子：

复制代码

代码如下:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>一列固定宽度——</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>
 
合作模型的填充属性padding对应着4个值，在赋值时按顺时针排列。
如：padding:1px 2px 3px 4px;
表示上填充padding-top为1px;
表示右填充padding-right为2px;
表示下填充padding-bottom为3px;
表示左填充padding-left为4px;
 
这个与 iOS的 上左下右 有区别  

CSS 的 border 样式的更多相关文章

  1. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  2. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  3. CSS&sol;CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  4. &lbrack;原创&rsqb;Lodop打印&comma; 以及Lodop引用css文件控制打印样式的问题&period;

    最近在做Lodop打印功能: 思路是:  用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是:  在打印的JS文件中, 引 ...

  5. &num;8&period;10&period;16总结&num; 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

  6. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  7. 精通CSS&plus;DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  8. &lbrack;总结&rsqb;CSS&sol;CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  9. Css - 选择器和样式

    Css - 选择器和样式 标签选择器 即使用html标签作为选择对象 <style>     div{ background:red; } </style> <div&g ...

随机推荐

  1. framebuff 显示子系统

     #include <unistd.h> #include <stdio.h> #include <fcntl.h> #include <linux/fb.h ...

  2. 利用C&num;轻松创建不规则窗体

    1.准备一个不规则的位图 可以使用任意一种你喜欢的作图工具,制作一个有形状的位图,背景使用一种其他的颜色.这个颜色在编程中用得着,所以最好使用一种容易记忆的颜色.如黄色,文件名为bk.bmp 2.创建 ...

  3. QTableView 添加进度条 添加按钮 TreeWidget 增删改

    http://www.cnblogs.com/li-peng/p/3961386.html http://www.cnblogs.com/li-peng/p/3961843.html http://w ...

  4. 【Map】Double Queue

    Double Queue Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13258   Accepted: 5974 Des ...

  5. cfedu&sol;A&sol;求和

    题目连接 思路: 用数组直接标记2^n,n属于(0~~31);用LL或者INT都可以,不会爆.但是ans要用LL. #include <set> #include <map> ...

  6. 自坑实录 - Asp&period;net MVC中无法使用&commat;Ajax&period;BeginForm问题解决

    创建空的web项目,通过Nuget引用mvc组件来搭建空的MVC项目时, 在视图页面中无法使用@Ajax.BegForm来进行异步提交数据, 而新建默认的MVC模板项目却能够正常使用@Ajax.Beg ...

  7. 【20170920校内模拟赛】小Z爱学习

    所有题目开启-O2优化,开大栈空间,评测机效率为4亿左右. T1 小 Z 学数学(math) Description ​ 要说小 Z 最不擅长的学科,那一定就是数学了.这不,他最近正在学习加法运算.老 ...

  8. 在Linux上使用PGP签名验证文件完整性

    文件在下载及存储过程中可能由于传输错误.硬件故障.文件系统错误等网络.硬件和软件方面的原因导致文件损坏,也可能在传输过程中受到攻击(如"中间人攻击")导致下载的文件被篡改或者下载到 ...

  9. matlab 下标类型

    double int uint time: double = int < uint8 较为神奇. clear clc time=clock; a=zeros(,); : a(i)=; end f ...

  10. 对扫描的pdf文件生成目录

    很多pdf文件是直接扫描生成的,于是它的内容都是一张张的图片,当然就更没有目录索引了. 有的时候想找某些内容,只能一点点的移动滚动条,非常不方便. 那么有什么方法能生成目录呢? 方法一:使用福昕pdf ...

相关文章