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

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

  1. css border属性做小三角标

    <!doctype html><html> <head> <title></title> <meta charset="ut ...

  2. border做三角符号

    用border做三角符号以及其他图形 ;; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffff ...

  3. 边框(Border) 和 轮廓(Outline) 属性

    border 复合属性.设置对象边框的特性. 标签定义及使用说明 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no Java ...

  4. 前端 CSS 盒子模型 边框 border属性

    边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...

  5. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  6. UIView封装动画--iOS 利用系统提供方法来做弹性运动

    iOS 利用系统提供方法来做弹性运动 /*创建弹性动画 damping:阻尼,范围0-1,阻尼越接近于0,弹性效果越明显 velocity:弹性复位的速度 */ [UIView animateWith ...

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

    1,ForcedExecutionResult 强制一个package或task执行的结果,共有四种值 None,Success,Failure,Completion,默认值是None,表示不强制返回 ...

  8. W3School-CSS 边框(border)实例

    CSS 边框(border)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边 ...

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

    首页 资讯 文章 频道 资源 小组 相亲 登录 注册       首页 最新文章 经典回顾 开发 设计 IT技术 职场 业界 极客 创业 访谈 在国外 - 导航条 - 首页 最新文章 经典回顾 开发 ...

随机推荐

  1. 【Python数据分析】Python3操作Excel-以豆瓣图书Top250为例

    本文利用Python3爬虫抓取豆瓣图书Top250,并利用xlwt模块将其存储至excel文件,图片下载到相应目录.旨在进行更多的爬虫实践练习以及模块学习. 工具 1.Python 3.5 2.Bea ...

  2. python SQLAlchemy

    这里我们记录几个python SQLAlchemy的使用例子: 如何对一个字段进行自增操作 user = session.query(User).with_lockmode('update').get ...

  3. spring的@Transactional

    在service类前加上@Transactional,声明这个service所有方法需要事务管理.每一个业务方法开始时都会打开一个事务.Spring默认情况下会对运行期例外(RunTimeExcept ...

  4. 2016第二届陕西省网络空间安全大赛WriteUp

    2016年5月28号(正式比赛) 有选择题和实践题,俩队员在弄选择题时,我去拿了web1的一血. 0x01 web 是一道代码审计题,发包,返回了源代码: <?php if (isset($_G ...

  5. Three.js的光源投影

    Three.js的光源默认不会导致物体间的投影,打开投影需要执行以下几步: 打开渲染器的地图阴影: renderer.shadowMapEnabled = true; 启用光线的投影:light.ca ...

  6. css3伪类温故知新

    今天遇到一个问题.要求::after 和 ::before的 content:"content" 能够动态的进行变换,能被JavaScript操作. 百度了下,自己做了实验,发现有 ...

  7. JavaScript中的this陷阱的最全收集 没有之一

    当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概 念,可能真解释不清楚.有句话这么说:如果你不能向一个6岁小孩解 ...

  8. JAVA的垃圾回收机制

    1. 垃圾回收的意义 在C++中,对象所占的内存在程序结束运行之前一直被占用,在明确释放之前不能分配给其它对象:而在Java中,当没有对象引用指向原先分配给某个对象的内存时,该内存便成为垃圾.JVM的 ...

  9. 地理信息系统 - ArcGIS - 高/低聚类分析工具(High/Low Clustering ---Getis-Ord General G)

    前段时间在学习空间统计相关的知识,于是把ArcGIS里Spatial Statistics工具箱里的工具好好研究了一遍,同时也整理了一些笔记上传分享.这一篇先聊一些基础概念,工具介绍篇随后上传. 空间 ...

  10. 在VS中用正则表达式查找或替换

    2005VS和2008VS正则替换规则如下(2013VS不适合,不需要的同学可以直接跳到2013VS的操作办法): Example: 查找#incldue中带有gl开头的头文件的,用include.+ ...