图片-小白之家
图片-小白之家
图片-小白之家
图片-小白之家

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);}
图片[1]-border-bottom属性详解(border-bottom是什么意思)-小白之家,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:别离指定下边线的款式、宽度、色彩

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容

图片-小白之家
图片-小白之家