当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程:学习border-style属性

CSS样式表
Web设计中的黄金分割分析
简单的CSS 下拉导航菜单实现代码
Float 菜单水平居中简单方法
网页设计中常用的19个Web安全字体
网页设计中的中国传统色彩速查表 颜色值
css 清除浮动的新方法
CSS 字体单位em简介
CSS下10个节约开发时间的技巧
css 等宽导航栏设计技巧
CSS reflow实例教程
IE6下Select元素被div等元素覆盖的解决办法
需要知道的CSS3动画技术
一个很有用的Firefox和IE插件
IE6,IE7下实现white-space:pre-wrap
CSS 圆角框进行JS封装版
基于链接关系的微格式 使用rel属性
css 微格式 XFN规范
网页简历结构和语义信息 hResume微格式
hCalendar微格式 关于事件和基于时间或地点的活
CSS下!important属性

CSS样式表 中的 CSS教程:学习border-style属性


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 50 ::
收藏到网摘: n/a

border-style -- 定义边框的样式
取值:<border-style>{1,4} | inherit
<border-style>{1,4}: 边框样式
inherit: 继承
初始值: none
继承性: 否
适用于: 所有元素
border:边框,style:样式
border-style和border-width的赋值方式是一样的,可以分别赋1,2,3或4个边的样式.

border-style的取值
none: 无样式
hidden: 除了同表格的边框发生冲突的时候,其它同none
dotted: 点划线
dashed: 虚线
solid: 实线
double: 双线,两条线加上中间的空白等于border-width的取值
groove: 槽状
ridge: 脊状,和groove相反
inset: 凹陷
outset:凸出,和inset相反
软晨学习网提示: 由于border-style的初始值为none,所以除非设置了边框样式,否则边框将无法看见.

示例
p#fourborders
{
 border-style:dotted dashed solid double;
}
如果定义四个值,那么这四个值就分别是上,右,下,左边框(从上边框开始,以顺时针的顺序遍历).定义梦之都段落的上边框为点划线,右边框为虚线,下边框为实线,左边框为双线.

p#threeborders
{
 border-style:groove ridge outset;
}
如果只定义三个值,中间的值代表左和右边框.定义梦之都段落的上边框为槽状,下边框为凸出,左,右边框为脊状.

p#twoborders
{
 border-style:none dashed;
}
如果只定义两个值,前面的值代表上下边框,后面的值代表左右边框.定义梦之都段落的上,下边框为无样式,左,右边框为虚线.

p#oneborders
{
 border-style:dotted;
}
如果只定义一个值,这个值就代表四个边的.定义梦之都段落的边框为点划线.