【CSS学习】CSS 边框
2015-08-01 14:51
603 查看
CSS 边框属性
CSS边框属性允许你指定一个元素边框的样式和颜色。边框样式
边框样式属性指定要显示什么样的边界。Remark border-style属性用来定义边框的样式
border-style 值:
none: 默认无边框dotted: dotted:定义一个点线框
dashed: 定义一个虚线框
solid: 定义实线边界
double: 定义两个边界。 两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界。效果取决于边界的颜色值
ridge: 定义3D脊边界。效果取决于边界的颜色值
inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
outset: 定义一个3D突出边框。 效果取决于边界的颜色值
<!DOCTYPE html> <html> <head> <style> p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-style:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;} </style> </head> <body> <p class="none">No border.</p> <p class="dotted">A dotted border.</p> <p class="dashed">A dashed border.</p> <p class="solid">A solid border.</p> <p class="double">A double border.</p> <p class="groove">A groove border.</p> <p class="ridge">A ridge border.</p> <p class="inset">An inset border.</p> <p class="outset">An outset border.</p> <p class="hidden">A hidden border.</p> </body> </html>
边框宽度
您可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em;或者使用 3 个关键字之一,它们分别是 thin 、medium(默认值) 和 thick。
注意:CSS 没有定义 3 个关键字的具体宽度,所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px,而另一个用户代理则分别设置为 3px、2px 和 1px。
p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }
边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色:name - 指定颜色的名称,如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”
您还可以设置边框的颜色为”transparent”。
注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。
p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; }
边框-单独设置各边
在CSS中,可以指定不同的侧面不同的边框:p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }
上面的例子也可以设置一个单一属性:
border-style:dotted solid;
border-style属性可以有1-4个值:
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid
border-style:dotted;
四面边框是 dotted
上面的例子用了border-style。然而,它也可以和border-width 、 border-color一起使用。
边框-简写属性
上面的例子用了很多属性来设置边框。T你也可以在一个属性中设置边框。
你可以在”border”属性中设置:
border-width
border-style (required)
border-color
border:5px solid red;
更多实例请详见W3C菜鸟教程内容:http://www.runoob.com/css/css-border.html
相关文章推荐
- CSS 整理(2)
- html/css的网页制作
- BootStray CSS代码
- CSS从大图中抠取小图完整教程(background-position应用)
- css 8.1
- css 关于"浮动边距加倍"及其解决方法-------解决方案是在这个div里面加上display:inline;
- css 7.30
- CSS 整理(1)
- JSP样式表加载不上的问题
- 【CSS学习】CSS 框模型(Box Model)
- 【CSS学习】CSS 表格
- CSS+DIV:实现炫酷网页样式与布局
- Css样式表 (常用基础)
- Web 设计师不可错过的 25+ CSS 工具
- CSS布局——元素浮动与定位篇
- CSS基础2
- CSS页面布局篇
- div+css position定位浅析
- CSS嵌套导航栏
- CSS盒模型理解