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. TFS-Git官方教程

    VS2015:官网教程 VS2013:  GIT教程

  2. Java Base64、AES、SHA1、MD5加密算法（转载）

    package com.example.decript; import java.io.UnsupportedEncodingException; import java.security.Inval ...

  3. js 截取字符串里的ip

    var ip_reg = /([\d\.]*)/ig; ip = ip_reg.exec(str); return ip; ip_reg会截取 '(' 开始的字符串,中间包含数字和 '.' .

  4. LPC1788的内部EEPROM使用

    Lpc1788内置有eeprom 使用代码 #ifndef __E2PRONINCHIP_H_ #define __E2PROMINCHIP_H #include "common.h&quo ...

  5. POJ 3991 Seinfeld

    首先进行一次括号匹配,把正确匹配的全部删去. 删去之后剩下的状态肯定是 L个连续右括号+R个连续左括号. 如果L是偶数,答案是L/2+R/2: 否则答案是 (L-1)/2+(R-1)/2+2: #in ...

  6. Maven的安装环境配置

    一.Maven的安装 二.Maven的配置 Settings.xml可以用来定义本地仓库.远程仓库.联网代理 Settings.xml文件可以存在两个地方: 1.多用户情况 conf目录下 2.单用户 ...

  7. Unity3D ——强大的跨平台3D游戏开发工具（二）

    第二章 Unity3D的简单预览 每个Unity3D版本都会自带一个Demo源文件.在3.0的正式版中,自带的Demo就是网上展示的那款强大的射击游戏.在一般情况下,您只要第一次 打开Unity3D ...

  8. 包含中文字符的NSString 转换为NSURL

    转包含中文字符的NSString 转换为NSURL NSString中如果包括中文字符的话转换为NSURL得到的值为nil,在网上搜了下,用stringByAddingPercentEscapesUs ...

  9. Vue 响应式总结

    有些时候,不得不想添加.修改数组和对象的值,但是直接添加.修改后getter.setter又失去了. 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项 ...

  10. 如何使用php session

    学会php session可以在很多地方使用,比如做一个后台登录的功能,要让程序记住用户的session,其实很简单,看了下面的文章你就明白了.   PHP session用法其实很简单它可以把用户提 ...