前端前端研习社

第3章 CSS3边框-1

2016-12-08  本文已影响12人  白小虫

提到边框,大家首先想到的是CSS的boder属性。不错,border属性是CSS种盒模型基础属性之一。在CSS3中,关于边框的运用会有什么样的不同之处呢?又将如何使用?本章我们带着这些问题开始我们的CSS3边框之旅。

3.1 CSS3边框简介

border属性在CSS1中就已经定义了,使用它可以设置元素的边框风格。

3.1.1 边框的基本属性

CSS1和CSS2中的边框属性确实很简单,其主要包括三个类型值。

  1. border-width:设置元素边框的粗细。
  2. border-color:设置元素边框的颜色。
  3. border-style:设置元素边框的类型。

在实际中可以将上面三个属性合并在一起,其缩写语法如下:

border: border-width border-style border-color;

缩写后的每个属性之间使用空格隔开,而且它们之间没有先后顺序,可这里三个值中唯一需要的值是“border-style”。

3.1.2 边框的类型

属性值 功能描述 示例代码
none 定义无边框 .ele{border:none;}
hidden 与"none"相同,不过应用于表时除外,对于表,hidden用于解决边框冲突 .ele{border:hidden;}
dotted 定义点状边框 .ele{border: 3px dotted red;}
dashed 定义虚线边框 .ele{border: 3px dashed red;}
solid 定义实线边框 .ele{border: 3px solid red;}
double 定义双线。双线的宽度等于border-width的值 .ele{border: 3px double red;}
groove 定义3D凹槽边框,其效果取决于border-color的值 .ele{border: 3px groove red;}
ridge 定义3D垄状边框,其效果取决于border-color的值 .ele{border: 3px ridge red;}
inset 定义3Dinset边框,其效果取决于border-color的值 .ele{border: 3px inset red;}
outset 定义3Doutset边框,其效果取决于border-color的值 .ele{border: 3px outset red;}
inherit 规定应该从父元素继承边框样式。部分浏览器不支持这个属性值 .ele{border: 3px inherit red;}
chrome
chrome
360安全浏览器急速模式
360安全浏览器急速模式
360安全浏览器兼容模式
360安全浏览器兼容模式
firefox
firefox
IE11
IE11
IE10
IE10
IE9
IE9
IE8
IE8
IE7
IE7

上面IE78910均未使用原生IE测试,而是使用了IE11自带的IE78910进行的测试。

上一篇下一篇

猜你喜欢

热点阅读