Heim >Web-Frontend >HTML-Tutorial >利用边框border的属性做小符号 - jerrylsxu

利用边框border的属性做小符号 - jerrylsxu

WBOY
WBOYOriginal
2016-05-21 08:42:311319Durchsuche

前两天学习中,发现网站上的一个小符号,以为是插入的img,但找来找去也未发现img的地址。最后问了同学,才得知是用border属性做出来的。

符号如右: 

其css代码如下:

复制代码
.fuhao
{
    position:absolute;
    top:12px;
    left:12px;
    width:0px;
    height:0px;
    overflow:hidden;
    border-width:6px 0px 6px 6px;
    border-color:transparent #A92222;
    border-style:dashed none dashed solid;
}
复制代码

这里是利用一个空的div即fuhao,给它定义好位置后,让它高度和宽度都为0,但边框具有宽度。那么这个div里面什么有没有,只剩下边框。

按道理来说应该是这样的:

然后下面的语句给上下边框做了透明transparent处理,右边框做0px处理,就得出了那个符号了。

其实,我也不是很明白,但觉得用边框border来做符号非常有趣,就所见所得,拿来即用吧。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn