border-bottom属性详解(border-bottom是什么意思)

border-bottom属性详解

通过设置border的颜色，显示其间一边，躲藏其他三边，来获取到三角形。
用到了css3特点transparent：被延伸到任何一个有color值的特点上。在这里可理解为设置成透明。具体自行百度。
css款式加动画：
.triangle{
position:relative;
}
.triangle:after/*after伪类，在triangle类后边增加一个三角形*/
{
content:””;
width:0;
height:0;
border-width:20px;
border-color:#ccctransparenttransparenttransparent;
border-style:solid;
/*font-size:0;
overflow:hidden;
line-height:0;
position:absolute;*//*如果三角形显示成梯形，就增加注释掉的三个款式*/
top:45%;
transition:all.2s;/*增加过渡动画*/
}
.triangle:hover::after{
position:absolute;
top:5px;/*根据状况定义*/
}
@keyframesrotate1{
from{transform:rotate(0deg);}
to{transform:rotate(180deg);}

border-bottom是什么意思

border-bottom（指定下边线的款式、宽度及色彩）
border-bottom:值；
border-bottom-style:值;
border-bottom-color:值;
border-bottom-width:值;
如：
border-bottom:solid1px#ffff00;
border-bottom-style:outset;
border-bottom-color:#0000ff;
border-bottom-width:15px;
border-bottom特点用于指定下边线的款式、宽度及色彩，值之间用半角空格间隔，没有先后顺序。
关于border-bottom特点的款式的值，详细可参照边线的款式。边线的宽度的值，详细可参照边线的宽度。
当别离指定下边线的款式、宽度、色彩时运用以下特点：
border-bottom-color:下边线的色彩
border-bottom-style:下边线的款式
border-bottom-width:下边线的宽度
border-bottom的值及其阐明
特点值阐明
border-bottomsolid下边线为实线
其他的值还有：groove、dotted等，详细请参照边线款式。
1px下边线的宽度
运用数值能够表明边线的恣意宽度，数值单位除了px，还有em、ex，详细请参照数值+单位
运用关键词指定
thin(细)、medium(一般)、thick(粗)
#ff0000下边线的色彩
除了运用色彩代码表明详细色彩之外，边线还能够指定为透明即：transparent
实例
css文件
.sample1,.sample2,.sample3{
margin:0.5em;
padding:2px;
}
.sample1{border-bottom:solid1px#ffff00;}
.sample2{border-bottom:groove10px#00ff00;}
.sample3{border-bottom-style:ridge;
border-bottom-color:#0000ff;
border-bottom-width:15px;
}
链接了上述css文件的html文件
border-bottom特点（http://wwww.manongjc.com）
sample1：下边线solid1px#ffff00
sample2：下边线groove10px#00ff00
sample3：别离指定下边线的款式、宽度、色彩