CSS solid 属性

制作过网页的人都有为画线而烦恼的经历，先来认识一下“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属性的灵活应用，可以产生许多特殊效果，方法与上面介绍的相同。

例子：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一列固定宽度——AA25.CN</title>
<style type="text/css">
<!--
#layout {
 border: 2px solid #A9C9E2;
 
 height: 200px;
 width: 300px;
}
-->
</style>
</head>
<body>
<div id="layout">一列固定宽度(AA25.CN)</div>
</body>
</html>

运行后效果如下图：

solid 属性" height=289 alt="CSS solid 属性" src="http://static4.photo.sina.com.cn/middle/6713401ct85fa7e3eda83&690" width=406 real_src="http://static4.photo.sina.com.cn/middle/6713401ct85fa7e3eda83&690"<

CSS sliod属性的更多相关文章

  1. CSS will-change 属性

    介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...

  2. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  3. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  4. css z-index属性使用过程中遇到的问题

    z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...

  5. 【转】CSS z-index 属性的使用方法和层级树的概念

    文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...

  6. css之属性部分

    这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. ...

  7. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  8. CSS3 border-radius 属性和CSS outline 属性

    CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...

  9. Normalize.css：优化重置CSS默认属性

    Normalize.css:优化重置CSS默认属性 官方网站:http://necolas.github.io/normalize.css/ 项目仓库:https://github.com/necol ...

随机推荐

  1. checkbox选择多数据传入后台时，怎样解析数据

    <input type="checkbox" name="test" value="值1" />显示的内容<input t ...

  2. 15、手把手教你Extjs5（十五）各种Grid列的自定义渲染

    Grid各列已经能够展示出来了.列的类型包括字符型,整型,浮点型,货币型,百分比型,日期型和布尔型,我自定义了各种类型的渲染样式: 1.整型:标题栏居中,数值靠右显示,正数颜色为蓝色,负数颜色为红色, ...

  3. mysql数据库中间件研究

    随着互联网的发展,数据量的不断增大. 单台实例已经远远无法满足业务的需要. 对数据库分库分表的需求不断的增加随之而来的就是数据库中间件的开发. 一. 单台实例主要面临下面几个问题: 1.  数据量太大 ...

  4. Android之布局大全

    Android布局方式可以归类为ViewGroup的5个类别,即ViewGroup的5个直接子类.其它的一些布局都扩展自这5个类. 上结构图: 转自:http://www.cnblogs.com/de ...

  5. Spring学习---JPA学习笔记

    用了一段时间的Spring,到现在也只是处于会用的状态,对于深入一点的东西都不太了解.所以决定开始深入学习Spring. 本文主要记录JPA学习.在学习JPA之前,需要了解一些ORM的概念. ORM概 ...

  6. SSH报错分析

    排错设计思路 1.配置文件的端口号修改 2.禁用root 3./etc/hosts.allow /etc/hosts.deny 4.iptables 5.密钥文件及目录的权限修改 1. 报错的原因:是 ...

  7. css（四）-- 盒子模型和定位

    盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框,盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离. 盒子模型主要是用于操作内边距(padding)与外边距(mar ...

  8. 【Xilinx-Petalinux学习】-05-OpenCV程序测试

    占位, 通过上一次编译的opencv库,运行程序,实现图像处理

  9. IOS开发－ObjC－Category的使用

    在IOS移动App开发中,经常会出现以下情况:定义好了一个类,但后来需求升级或改变之后需要对这个类增加功能,这样的话往往需要修改类的结构,这样就会导致不能预期的问题产生,所以Obj-C提供了一种叫做C ...

  10. Nodejs之模板ejs

    ejs使用说明及介绍. 1.创建ejs项目 express -e test  //创建模板为ejs的项目,默认为jade. 2.使用 app.js中添加 var ejs = require('ejs' ...