> 웹 프론트엔드 > HTML 튜토리얼 > 利用边框border的属性做小符号_html/css_WEB-ITnose

利用边框border的属性做小符号_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:05:40
원래의
1169명이 탐색했습니다.

前两天学习中,发现网站上的一个小符号,以为是插入的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来做符号非常有趣,就所见所得,拿来即用吧。

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿