利用边框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来做符号非常有趣,就所见所得,拿来即用吧。
利用边框border的属性做小符号的更多相关文章
- css border属性做小三角标
<!doctype html><html> <head> <title></title> <meta charset="ut ...
- border做三角符号
用border做三角符号以及其他图形 ;; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffff ...
- 边框(Border) 和 轮廓(Outline) 属性
border 复合属性.设置对象边框的特性. 标签定义及使用说明 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no Java ...
- 前端 CSS 盒子模型 边框 border属性
边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...
- padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法
盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...
- UIView封装动画--iOS 利用系统提供方法来做弹性运动
iOS 利用系统提供方法来做弹性运动 /*创建弹性动画 damping:阻尼,范围0-1,阻尼越接近于0,弹性效果越明显 velocity:弹性复位的速度 */ [UIView animateWith ...
- 利用SSIS的ForcedExecutionResult 属性 和CheckPoint调试Package
1,ForcedExecutionResult 强制一个package或task执行的结果,共有四种值 None,Success,Failure,Completion,默认值是None,表示不强制返回 ...
- W3School-CSS 边框(border)实例
CSS 边框(border)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边 ...
- 12岁的少年教你用Python做小游戏
首页 资讯 文章 频道 资源 小组 相亲 登录 注册 首页 最新文章 经典回顾 开发 设计 IT技术 职场 业界 极客 创业 访谈 在国外 - 导航条 - 首页 最新文章 经典回顾 开发 ...
随机推荐
- COGS1008. 贪婪大陆[树状数组 模型转换]
1008. 贪婪大陆 ★★ 输入文件:greedisland.in 输出文件:greedisland.out 简单对比时间限制:1 s 内存限制:128 MB 试题四:贪婪大陆 [题 ...
- android:exported 属性详解
属性详解 标签: android 2015-06-11 17:47 27940人阅读 评论(7) 收藏 举报 分类: Android(95) 项目点滴(25) 昨天在用360扫描应用漏洞时,扫描结果, ...
- fcntl函数
很多时候,当我们有多个进程要访问同一个文件的时候,为了防止多进程访问导致的不一致,我们就要考虑进程间的同步问题. fcntl是一个很强大的函数,我们可以通过它给文件的某一部分上锁 int fcntl( ...
- PHP用法
链接: php编写app接口(一)-JSON方式封装接口数据方法 php 非常有用的高级函数PATH_SEPARATOR常量和set_include_path date_default_timezon ...
- bootstrap 组件
bootstrap 组件 1下拉菜单(dropdown) 下拉菜单切换(dropdown-toggle) 下拉菜单对齐(dropdown-menu-right-右对齐) 下拉菜单分割线(di ...
- Learning Roadmap of Robotic Operating System (ROS)
ROS Wiki: http://wiki.ros.org/ Robots Using ROS Textbooks: A Gentle Introduction to ROS Learning ROS ...
- MFC---static控件加载图片
IPicture* ppic = NULL; HRESULT hr; hr = OleLoadPicturePath((CComBSTR)picpath.GetBuffer(),(LPUNKNOWN) ...
- iis 使用 LocalDB 报错:provider: SQL Network Interfaces, error: 50
在使用asp.net core读取localdb数据库时,报以下错误: 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 S ...
- JS获取回车事件(兼容各浏览器)
一.用到onkeydown获取事件动作, 二.用到键盘对应代码keyCode, 三. var event=arguments.callee.caller.arguments[0]||window.ev ...
- 【原创】O2O,你真的知道怎么玩吗?
自从2011年8月份,O2O的概念被Alex Rampell提出,并且在当年的11月份被引入中国以来,O2O这一概念就好像给久无新意的中国互联网行业,打了一针兴奋剂.O2O这个词也如麦当劳,星巴克这些 ...