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

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

时间: 2024-08-25 04:16:47

利用边框border的属性做小符号的相关文章

蓝懿IOS利用所学的控件做小游戏

今天总体上收获很多感觉,开始学习时间很短,但是今天自己已经可以利用所学的知识做一个简单的类似小马过河的游戏.通过编写游戏可以把这几天所学到的UiButton,UiLabel,UiTextField等知识穿插到一起用. 其中小游戏的实现程序里,主要用到Nstimer来实现图片的自己移动,判断两个是否接触到用到新知识CGRectIntersectsRect 1,UiButton 通过storyboard拖动四个按钮,在程序中实现点击不同的按钮Button移动图片的上下左右 2,while 循环来实现

3.2 边框(border)

border一般用于分隔不同元素,border的外围即为元素的最外围,因此计算元素实际的宽和高时,就要将border纳入.换句话说,border会占据空问,所以在计算精细的版面时,一定要把border的影响考虑进去,如图1所示,蓝色的虚线框即为border. 图1 border border的属性主要有3个,分别是color(颜色).width(粗细)和style(样式).在设置border时常常需要将这3个属性很好地配合起来,才能达到良好的效果.在使用css设置边框的时候,可以分别使用bord

利用WordPress REST API 开发微信小程序从入门到放弃

自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:<用微信小程序连接WordPress网站>讲述过一些基本的要点,不过仍然有不少人对一些细节不明白,于是我就想着再写一篇比较全面而基础的教程,主要针对入门级别用户,高手就不用看了. WordPress版“守望轩”微信小程序开放源码地址:https://github.com/iamxjb/winxin-app-watch-life.net 至于标题,请原谅我,我标题党了. Word

12岁的少年教你用Python做小游戏

原地址:http://blog.jobbole.com/46308/ 本文由 伯乐在线 - 贱圣OMG 翻译自 Julian Meyer.欢迎加入技术翻译小组.转载请参见文章末尾处的要求. [感谢@贱圣OMG 的热心翻译.如果其他朋友也有不错的原创或译文,可以尝试推荐给伯乐在线.] 你有没有想过电脑游戏是怎样制作出来的?其实它没有你想象的那样复杂! 在这个教程里,你要学做一个叫<兔子和獾>的塔防游戏,兔子作为英雄,需要在城堡里抵御獾的进攻. 为了写这个游戏的代码,你将会用Python.好吧,我

利用SSIS的ForcedExecutionResult 属性 和CheckPoint调试Package

1,ForcedExecutionResult 强制一个package或task执行的结果,共有四种值 None,Success,Failure,Completion,默认值是None,表示不强制返回值. 如果设置ForcedExecutionResult=Success,不管package执行过程中是否出现异常,package执行的结果都是Success. The default value of this property is None, which indicates that the

在.Net MVC中自定义ValidationAttribute标签对Model中的属性做验证

写一个继承与ValidationAttribute类的自定义的验证方法 MVC中传递数据时,大多数都会用Model承载数据,并且在传到控制器后,对Model进行一系列的验证. 我平时经常使用的判断方法比Low,因为Model都是不同的,也需要返回很多不同的信息,所以我都是把很多条件语句封装成私有方法,放在控制器的最下边,然后使用的时候直接调用. 下图就是我平时使用的代码格式,我把验证方法都写在了这里,很低级请轻喷. 其实在.Net MVC中,已经提供了很好的验证方法,就是在属性上面加Valida

css盒子模型、边框border、外边距margin、填充padding、轮廓outline

盒子模型 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清除边框外的区域,外边距是透明的. Border(边框):围绕在内边距和外边距的边框. Padding(内边距):清除内容周围的区域,内边距是透明的. Content(内容):盒子的内容,显示文本和图像. 例如下面一个例子 <!DOCTYPE html> <html> ······ <style> div { background-color: lightgrey; width: 300px;

边框的css属性 盒子模型

Border 边框 css属性 边框颜色 border-color:red/#ffffff/rgb() 默认为黑色 边框样式 border-style:solid(实线)dashed(虚线) 默认为none 边框粗细 border-width:1px:默认是3px Border的简写 border:border-width border -style border-color; Div 块 盒子 1.就是标签名 没有特殊的标签属性 2.主要用来排版布局 3.宽度是100%,chrome浏览器默认

如何利用微软本身的库做个数据库客户端的配置

做C/S的朋友一般都有个窗体,用来配置应用的数据库连接语句,那这个窗体我们是自己写好呢还是调用微软现有的,当然这是智者见智,仁者见仁的问题,下面将简单介绍如何利用微软现有的来实现这么一个窗体. 首先我们需要在解决方案中引入如下三个库: 接下来事情会简单到出乎你意料之外,在我们需要打开窗体配置的地方写上如下代码: 1 DataConnectionDialog dialog = new DataConnectionDialog(); 2 //添加数据源列表,可以向窗口中添加自己程序所需要的数据源类型