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. 源码解析-knockout源码准备

    准备包括心理和资源两方面. 心理 我看过一句话说,当你用一个框架时,不要忙着看一遍使用教程就开始写项目,先去看看框架原理. 这句话我深以为然.现今前端快速发展,很多前端攻城狮都很茫然:框架更新太快了, ...

  2. C++通过Callback向C#传递数据，注意问题

    转载:出处 现在比较流行C#与C++融合:C#做GUI,开发效率高,C++做运算,运行效率高,二者兼得. 但是C++与C#必然存在数据交互,C#与C++dll的数据交互从来都是一个让人头疼的问题. 从 ...

  3. 【转】git命令

    Git使用 1. git pull    更新服务器代码到本地a). git pull origin master是将origin这个版本库的代码更新到本地的master主分支 2. git push ...

  4. UIAlertController高级之嵌入其他控件 分类： ios技术 2015-02-02 11:58 96人阅读 评论(0) 收藏

    在编码过程中,我们经常遇到需要这样一个效果,就是弹出框的嵌套; 举个最简单的例子,比如你要选择时间,必然需要一个时间选择器DatePicker.但是这个选择器又是在你点击某按钮时弹出,弹出方式最常见的 ...

  5. leetcode--001 max point on a line

    package leetcode; import java.util.HashMap; class Point{ int x; int y; Point(){ x=0; y=0; } Point(in ...

  6. webstrom 编码

    设置文件保存格式: webstrom的右下角选择你需要的编码

  7. java实现——035第一个只出现一次的字符

    import java.util.Hashtable; public class T035 { public static void main(String[] args) { FirstNotRep ...

  8. FlexGrid简单demo

    1.首先加入以下代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...

  9. mysql 5.5中文乱码问题

    一.登录MySQL查看用SHOW VARIABLES LIKE ‘character%’;下字符集,显示如下:+--------------------------+----------------- ...

  10. Android开发：View的几种布局及实践

    引言 View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Table Layout).网格视图(Grid View).标签布 ...