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. iOS 为label添加删除线

    UILabel *testLabel = [[ UILabel alloc] initWithFrame:CGRectMake(, , , )]; testLabel.numberOfLines = ...

  2. rapidjson 使用教程

    在cocos2d-x引入了rapidjson,它处理速度比其他的json库快,反正不管了,我们这边只是学习下如何使用.rapidjson官方网址: https://code.google.com/p/ ...

  3. ZOJ 3331 Process the Tasks

    双塔DP. #include<cstdio> #include<cstring> #include<queue> #include<string> #i ...

  4. 【转】国外程序员整理的 C++ 资源大全

    内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和函数等. C++ Standard Library:是一系列类 ...

  5. js实现的文章输入检查与测速。

    在群里聊天,一个群友求助.说要实现 文章对比输入,出错了标红,正确的标绿. 同时还需要统计正确率. 我一开始以为很容易,结果搞了半天.最后折腾出来了. 这里的思路如下:利用js的数组.将文章和输入的内 ...

  6. DataTabel DataSet 对象 转换成json

    public class DataTableConvertJson    { #region dataTable转换成Json格式        /// <summary>         ...

  7. SpannableString富文本

    忍不住想吐槽这个类,这个类是要给文本设置不同的颜色.字体样式 例子:一句话中只有某几个文字想要设置成不同的颜色 起初写了一个函数setColorStyle(), public SpannableStr ...

  8. MySQL5.6-Tomcat7环境变量的配置

    一.MySQL环境变量配置(zip安装):系统-高级系统设置--环境变量--path添加D:\Mysql\bin 找到mysql解压目录下的my-default.ini文件修改 basedir = D ...

  9. QGis（三）查询矢量图层的要素属性字段值（转载）

    QGis(三)查询矢量图层的要素属性字段值 https://github.com/gwaldron/osgearth/issues/489 当加载一个矢量图层后,如果要查看要素的属性字段值,则需要实现 ...

  10. centos 6.5中安装hadoop2.2

    1.配置集群机器之间ssh免密码登录 (1) ssh-keygen -t dsa -P '' -f ~/.ssh/id_dsa 将id_dsa.pub 公钥 加入授权的key中去 这条命令的功能是把公 ...