利用边框border属性做的网页小符号
2014-04-24 15:57
393 查看
前两天学习中,发现网站上的一个小符号,以为是插入的img,但找来找去也未发现img的地址。最后问了同学,才得知是用border属性做出来的。
符号如右:
其css代码如下:
这里是利用一个空的div即fuhao,给它定义好位置后,让它高度和宽度都为0,但边框具有宽度。那么这个div里面什么有没有,只剩下边框。
按道理来说应该是这样的:
然后下面的语句给上下边框做了透明transparent处理,右边框做0px处理,就得出了那个符号了。
其实,我也不是很明白,但觉得用边框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来做符号非常有趣,就所见所得,拿来即用吧。
相关文章推荐
- 利用边框border属性做小符号
- css 利用border属性制作箭头 Using Borders to Make Pure CSS Arrows
- CSS3教程:边框属性border的极致应用
- HTML表格标记教程(2):表格的边框属性BORDER
- HTML表格标记教程(40):表头的暗边框色属性BORDERCOLORDARK
- 边框属性border
- css基础-盒子(div)模型、属性、边框线的设置、padding、margin、网站的设置思想(float),图片代替列表符号
- 动态调整对话框属性(去掉标题栏,去掉边框,修改类似成Border:NONE样式)(调用ModifyStyle和ModifyStyleEx,然后调用SetWindowPos重新显示)
- HTML表格标记教程(22):行的亮边框色属性BORDERCOLORLIGHT
- Border-radius属性--设置圆角边框
- Winform无边框窗体(FormBorderStyle属性设为None)自定义移动
- 利用CSS的@font-face属性,在网页中嵌入字体
- border-image属性实现css边框特殊需求
- CSS-12.css边框属性(border)
- MFC如何在父窗口的指定位置创建子窗口,及border边框属性设置
- 边框(border)边距(margin)和间隙(padding)属性的区别
- 网页制作中表格的CellPad、CellSpace和Border属性是什么意思
- CSS中元素的边框border属性
- CSS3之边框属性border
- CSS3利用border-radius实现边框圆角