利用边框border的属性做小符号_html/css_WEB-ITnose
程序员文章站
2022-04-23 11:02:34
...
前两天学习中,发现网站上的一个小符号,以为是插入的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来做符号非常有趣,就所见所得,拿来即用吧。
上一篇: yii2 登陆后事件触发
推荐阅读
-
利用getComputedStyle方法获取元素css的属性值_html/css_WEB-ITnose
-
input输入框的border-radius属性在IE8下的完美兼容_html/css_WEB-ITnose
-
input输入框的border-radius属性在IE8下的完美兼容_html/css_WEB-ITnose
-
请问:CSS中border属性的问题_html/css_WEB-ITnose
-
.使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)_html/css_WEB-ITnose
-
CSS:不可思议的border属性_html/css_WEB-ITnose
-
利用getComputedStyle方法获取元素css的属性值_html/css_WEB-ITnose
-
.使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)_html/css_WEB-ITnose
-
CSS:不可思议的border属性_html/css_WEB-ITnose
-
div+css:表格边框间距属性border-spacing_html/css_WEB-ITnose