利用边框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技术 职场 业界 极客 创业 访谈 在国外 - 导航条 - 首页 最新文章 经典回顾 开发 ...
随机推荐
- Winform无边框窗体的移动和阴影
//窗体移动API [DllImport("user32.dll")] public static extern bool ReleaseCapture(); [DllImport ...
- 错误提示:LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or corrupt 的解决方法
最近在win7 系统下,打算利用 cmake 生成项目文件,然后用vs2010进行编译.但是在cmake的时候出现错误弹窗:
- cf Round 607
A.Chain Reaction(DP+二分) 题意:一排有n个灯塔,每个灯塔给出坐标xi和力量yi,每次从最右边依次点亮灯塔,每点亮一个灯塔,它左边的距离它yi范围内的灯塔将受到损坏.现在允许在最右 ...
- yii获取当前url和域名
<?php //当前域名 echo Yii::app()->request->hostInfo; //除域名外的URL echo Yii::app()->request-> ...
- getGlobalVisibleRect和getLocalVisibleRect
在看android官网的demo的时候遇到这两个api,开始不是很明白这两个方法的作用. 通过多次的调试和测试之后慢慢开始有了点眉目,为了防止以后忘记,以此博文为记. 作为测试的目的,我写了这样一个布 ...
- Synchronized
1. 在编写一个类时,如果该类中的代码可能运行与多线程环境下,就要考虑同步问题了. 会同时被多个线程访问的资源,就是竞争资源,也称为竞争条件.对于多线程共享的资源我们必须进行同步,以避免一个线程的改动 ...
- Java面试题总结(一)
Java面试总结 面向对象编程(OOP) Java是一个支持并发.基于类和面向对象的计算机编程语言.下面列出了面向对象软件开发的优点: 代码开发模块化,更易维护和修改. 代码复用. 增强代码的可靠性和 ...
- python对缓存(memcached,redis)的操作
1.Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的 ...
- WinForm------GridControl添加底部合计框
1.在GridView属性中找到"OptionsView" => "ShowFooter" = true 2.打开编辑器,如图 . 3.获取统计数据(注意 ...
- Spring-----定时任务Quartz配置
第一种,作业类继承自特定的基类:org.springframework.scheduling.quartz.QuartzJobBean. 第一步:定义作业类 import org.quartz.Job ...