CSS3学习笔记(3)-CSS3边框

p{
font-size: 15px;
}
.alexrootdiv>div{
background: #eeeeee; border: 1px solid #aaa; width: 99%; padding: 5px; margin: 1em 0 1em 0;
}
.alexrootdiv>div>p:first-of-type,.alextitlep{
font-size: 18px; font-weight: bold; color: red;
}
.alexrootdiv span{
color:blue;font-weight:bold;
}
.alexrootdiv table{
margin-top:10px;border-collapse:collapse;border:1px solid #aaa;width:100%;
}
.alexrootdiv table th{
vertical-align:baseline;padding:5px 15px 5px 6px;background-color:#d5d5d5;border:1px solid #aaa;text-align:left;
}
.alexrootdiv table td{
vertical-align:text-top;padding:6px 15px 6px 6px;background-color:#efefef;border:1px solid #aaa;
}
.attentationp{
font-size: 15px; text-indent: 2em; background: #ee0; color: red; font-weight: bold;
}
.borderstylediv{
width:12vw;text-align:center;
}
-->

了解完CSS的盒子模型之后,接下来学习的是边框格式设置部分的内容。关于边框,我们可以设置的包括:边框粗细(border-width)、边框颜色(border-color)、边框类型(border-style)、图片边框(border-image)、圆角边框(border-radius)。边框类型以下我只列出一个可用列表,需要重点注意的是图片边框与圆角边框两项设置。

border-style:边框类型

属性值 描述 示例
none 定义无边框  
hidden 功能与none相同。只是在应用于表格时存在差异,使用hidden可以解决表中边框的冲突  
dotted  点状边框
1px dotted
dashed  虚线边框
1px dashed
solid  实线边框
1px solid
double  双线,双线的宽度等于 border-width 的值。
3px double
groove 3D 凹槽边框,效果取决于 border-color 的值,且border-width不能过小,否则看不到效果。
8px groove #ff0
ridge 3D 垄状边框,效果取决于 border-color 的值,且border-width不能过小,否则看不到效果。
8px ridge #0ff
inset 3D inset 边框,其效果取决于 border-color 的值,且border-width不能过小,否则看不到效果。
8px inset #f0f
outset 3D outset 边框,其效果取决于 border-color 的值,且border-width不能过小,否则看不到效果。
8px outset #f00
inherit 从父元素继承边框样式。  

border-image:图片边框

图片边框border-image是缩写形式,可以使用该属性以单一行指定图片边框格式。其下还可以设置4个分属性,在指定图片边框格式时,也可以单个的分属性进行设置。

子项 描述 示例
border-image-source 用在边框的图片的路径。 border-image:url(/i/border.png);
border-image-slice 图片边框向内偏移,通过该参数可以实现图片的裁切。  
border-image-width 图片边框的宽度。  
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。  

border-image缩写方式

 div{
border-image:url(/i/border.png) 30 30 stretch;
}

border-image-slice:<number>|<percentage>{1,4}

以上语法格式的意思是:参数可以接受数值<number>及百分比值<percentage>,值可以指定1到4个{1,4}。其参数值的个数所对应的意义请参见之前的博文CSS3学习笔记(2)-CSS盒子模型中TRBL原则的说明;要理解border-image-slice如何设置存在一定的难度,这里我以实际案例来说明设置方式。假若我们有一张300px×240px的图片,我们来看看设置4个参数的意义。

border-image-slice:60px 90px 36px 60px;

以上代码的意思是:对图片切下4刀:第一刀水平切,距离顶部60px(即为T);第二刀竖直切,距离右侧90px(即为R);第三刀水平切,距离底部36px(即为B);第4刀竖直切,距离左侧60px(即为L);我们也可以使用百分比来设置,等价于以下代码:

border-image-slice:25% 30% 15% 20%

以上代码的意思是:对图片切下4刀:第一刀水平切,距离顶部25%(即为T);第二刀竖直切,距离右侧30%(即为R);第三刀水平切,距离底部15%(即为B);第4刀竖直切,距离左侧20%(即为L);

注:切割完毕之后,我们会得到9张小图片,但是实际真真有效的用于设置边框的图片只有4张,分别是TRBL各个方位的中间位置那张图片。

border-image-repeat:stretch|repeat|round {1,2}

当将图片切割完毕后,还需要提供一个图片填充方式,以上border-image-repeat参数格式的意思是:参数值的范围只能是stretch、repeat、round其中之一,且指定时,可以设置单个值,或指定2个值。单个值表示水平与垂直的填充模式一样,指定2个值时,前面一个表示水平填充模式,后面一个表示垂直填充模式。三个参数取值的意义如下所示:

参数值 描述 示例
stretch 拉伸所在切割小图片,以适应当前位置的边框大小。  
repeat 从所在对应边框位置的中间向两端,将小图片重复平铺到边框,小图片大小不变动。  
round 与repeat类似进行平铺,但是会调整小图片大小以行程刚好填充到对应边框位置。  

border-radius:圆角边框

所有的元素都可以设置边框,CSS3还可以设置圆角边框:即可以指定元素矩形框的4个角落为圆角。每一个圆角可以指定2个半径,一个是水平方向的,一个是垂直方向的,我们可以想象一个椭圆,椭圆有水平半径以及垂直半径,我们的圆角边框就是将其水平及垂直切割后,取这个椭圆的1/4边线。以下是圆角边框参数指定的语法格式:

border-radius:{1,4}/{1,4}

以下代码是水平半径与垂直半径相等的示例:

 div{
border-radius:10px;
} img{
border-radius:10px 30px;
} .borderradius{
border-radius:10px 50px 30px;
} #imgradius{
border-radius:60px 40px 30px 20px;
}

以下是指定了不同水平半径跟垂直半径的书写方法:

 table{
border-radius:60px 40px 30px 20px / 30px 20px 10px 5px;
}

内容正在建设中......

上一篇:Nhibernate 4.0 教程入门


下一篇:十天精通CSS3学习笔记 part2