前两天学习中,发现网站上的一个小符号,以为是插入的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. 洛谷P2412 查单词 [trie树 RMQ]

    题目背景 滚粗了的HansBug在收拾旧英语书,然而他发现了什么奇妙的东西. 题目描述 udp2.T3如果遇到相同的字符串,输出后面的 蒟蒻HansBug在一本英语书里面找到了一个单词表,包含N个单词 ...

  2. [自学总结] Unity5.3 API 之 Audio Mixer

    unity5.3 - API - class AudioMixer 和 class AudioMixerGrou问题:之前版本声音的渐入渐出太生硬,声音的特效需要自己手动编写.分析:5.0版本重大更新 ...

  3. CHM打不开的解决方法

    CHM打不开的解决方法 听语音 | 浏览:62240 | 更新:2013-02-04 14:58 | 标签:软件 1 2 3 4 5 6 分步阅读 一键约师傅 百度师傅高质屏和好师傅,拯救你的碎屏机 ...

  4. 关于ES6新增的东西

    查询浏览器对ES6的支持情况https://kangax.github.io/compat-table/es6/ Chrome.MS Edge.Firefox.Safari.Node和其它很多环境都已 ...

  5. 快速部署tomcat项目的Shell脚本

    为了做集群测试,在每台机器上装了3个tomcat,每次发布项目的时候都要反复敲一些命令,重启tomcat之前先检查tomcat进程有没有停掉,没有还要手动kill该进程. 发布次数多了,操作就比较繁琐 ...

  6. Android SDK 墙内更新方法 速度杠杠的

  7. 微信支付开发(1) JS API支付

    关键字:微信支付 微信支付v3 jsapi支付 统一支付 Native支付 prepay_id 作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/wxpayv3 ...

  8. winform采集网站美女图片程序---多线程篇

    设定思路: 采集目标: http://www.8kmm.com,   已知网址列表(List保存),  应用多线程(Thread)读取该列表, 获取url时不能重复(加锁Lock). 允许无序采集! ...

  9. Java--笔记(7)

    61.几种常见排序法的比较 排序法 平均时间 最差情形 稳定度 额外空间 冒泡 O(n2)     O(n2) 稳定 O(1) 交换     O(n2)     O(n2) 不稳定 O(1) 选择 O ...

  10. jsonp接口的xss防范

    防范方式也很简单,只要在header里输出类型设置为javascript即可: 1 header('Content-type: text/javascript;charset=utf-8');