Web标准基础教程：CSS简写指南（2）
来源：前端观察 发布时间：2010-04-02 12:47:00
标签：CSS简写,缩写,web标准,教程,CSS优化
边框(border)
border是个比较灵活的属性，它有border-width、border-style、border-color三个子属性。
| border-width:数字+单位; border-style: none || hidden || dashed || dotted || double || groove || inset || outset || ridge || solid ; border-color: 颜色 ; |
它可以按照width、style和color的顺序简写：
| border:5px solid #369; |
有的时候，border可以写的更简单些，有些值可以省掉，但是请注意哪些是必须的，你也可以测试一下：
| border:groove red; //大家猜猜这个边框的宽度是多少？ border:solid; //这会是什么样子？ border:5px; //这样可以吗？ border:5px red; //这样可以吗？？ border:red; //这样可以吗？？？ |
通过上面的代码可以了解到，border默认的宽度是3px，默认的色彩是black——黑色。border的缩写中border- style是必须的。
同时，还可以对每条边采用缩写：
| border-top:4px solid #333; border-right:3px solid #666; border-bottom:3px solid #666; border-left:4px solid #333; |
还可以对每个属性采用缩写：
| border-width：1px 2px 3px; //最多可用四个值，缩写规则类似盒子大小的缩写，下同 border-style：solid dashed dotted groove; border-color:red blue white black; |
outline
outline类似border，不同的是border会影响盒模型，而outline不会。
| outline-width:数字+单位; outline-style: none || dashed || dotted || double || groove || inset || outset || ridge || solid ; outline-color: 颜色 ; |
可以缩写为：
| outline:1px solid red; |
同样，outline的简写中，outline-style也是必须的，另外两个值则可选，默认值和border相同。
0
投稿猜你喜欢
九宫格是一种比较古老的设计，它最基本的表现其实就像是一个三行三列的表格。其实它最初是在window的c/s结构中用得比较多，比如我们经常看到- 程序编制 随着WEB的发展，与浏览者的交互越来越受到网站制作者的重视。现在的主页跟最初的静态主
- 1.已知有一个XML文件（bookstore.xml）如下： <?xml version="1.0" e
- 通常人们使用以下两种方法来执行SQL语句： Set Rs=Conn.Execute(SqlStr) 和&nbs
- 一般来说，我们判断 iframe 是否加载完成其实与 判断 JavaScript 文件是否加载完成 采用的方法很类似：var&nb
- 1、善用拖放技术 我们在使用Dreamweaver编辑网页的时候，经常需要插入一些图象什么的，假设要插入的图象很多，按照常规方法来操作就显得
- Index.asp：程序代码<html><head><meta http-equiv="Conten
- 网页的圆角处理，其实最开始的九宫格的表格处理是挺方便的，只是现在都不用表格布局了，自然就被非法取缔了。呵呵。微软的有VML画圆角，由于只是它
- 网页兼容测试，除了做不同浏览器的兼容测试，还要观察网页在不同分辨率下的表现情况。在页面中使用了CSS绝对定位，发现在宽屏下错位。随后测试非1
- 作者：Roland Smart原文链接：http://www.adaptivepath.com/ideas/newsletter/archi
- 一、数组的创建方式一var a = new Array(); a[0]="wo"
- 代码如下:<％ set rs=server.createobject("adodb.recordset&
- 指定的代码页特性无效。 codepage属性：是指出网页的代码页 如果制作的网页脚本与WEB服务端的默认代码页不同，则必须指明代码页： 代码
- 摘要: 本文由简到繁地介绍了以jQuery作为蓝本的js框架开发步聚, 希望借助本文大家对jQuery这样的框架内部有一个大致的认识。推荐：
- 今天有朋友问我关于用JAVASCRIPT来进行页面各表单之间的数据传递的问题，我以前也写过，不过从来没有注意，今天总结了一下，希望能够给大家
- 近来，随着XHTML（可扩展HTML）标准的出现，<script/>标签也经历了一些改变。该标签不再用language特性，而用
- 如果是在Oracle10g之前，删除一个表空间中的数据文件后，其文件在数据库数据字典中会仍然存在，除非你删除表空间，否则文件信息不会清除。但
- LearningjQuery.com 博客帖子列表的左边有一个很酷的日期，如图：从图中我们看到，“2009”垂直排列在右侧。用Firebug
- 弄个随机数的东西，直接从网上找了一个现成的，简单看了两眼，感觉算法应该是对的，但今天测试下来，是不对的；网上大多数人用的写法是这样的：fun
- JScript 具有全范围的运算符,包括算术、逻辑、位、赋值以及其他某些运算符。算术运算符描述 符号 负值 - 递增 ++ 递减 ? 乘法
