伪类写border, transform: scale3d() 及兼容性
.top::before {
content: "";
position: absolute;
left: 0;
width: 200%;
height: 0;
border-top: 1px solid #cccccc;
transform-origin: left top;
transform: scale3d(0.5,0.5,0.5);
-webkit-transform: scale3d(0.5,0.5,0.5); /* Chrome, Safari, Opera */
-ms-transform: scale3d(0.5,0.5,0.5); /* IE 9 */
}
.top::after{
content: "";
position: absolute;
left: 0;
width: 200%;
height: 0; border-bottom: 1px solid #cccccc;
transform-origin: left top;
transform: scale3d(0.5,0.5,0.5);
-webkit-transform: scale3d(0.5,0.5,0.5); /* Chrome, Safari, Opera */
-ms-transform: scale3d(0.5,0.5,0.5); /* IE 9 */
}
伪类写border, transform: scale3d() 及兼容性的更多相关文章
- 利用伪类写一个自定义checkbox和radio
首先是效果图来一张 再来一张html结构 关键的CSS来了~ 首先呢要把input标签设置为display: none; 因为自定义的原理是通过label的for属性,来点击label转向为点击in ...
- 利用border和伪类画出三角形 ps:好久没写博客了。。。
有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...
- CSS选择器:伪类(图文详解)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式. ...
- CSS3伪类使用方法实例
有时候在网页设计中会涉及到很多看上去很繁琐的设计图,这时候都会很让人头疼,那么这时候伪类就可以来帮助你解决问题了. 下面有一段实例大家可以参考一下: <!DOCTYPE html> < ...
- HTML5新标签使用及CSS选择器(伪类)
这些标签能够让搜索引擎更直接的解析页面内容. <header></header>语义:文档或者页面的头部 <nav></nav>语义:导航这两者不是组合 ...
- css 04-CSS选择器:伪类
04-CSS选择器:伪类 #伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就 ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- 你知道hover、active这四个伪类为什么要按顺序写吗
刨根问底,你知道:hover等4个伪类为什么要按顺序排列吗 引言 :link,:visited,:hover,:active这4个伪类大家都不陌生,4个伪类要按照LvHa这个爱恨原则来排(外国友人起的 ...
- CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别
css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...
随机推荐
- vi 编辑器常用命令
VI编辑器可以分为3种状态,它们分别是命令模式.输入模式以及末行模式,VI运行后默认进入命令模式. 命令模式:控制屏幕光标的移动,字符.单词或行的删除.替换,复制粘贴数据以及由此进入插入模式和末行模式 ...
- UCenter 通信失败 和 无法同步登陆的调试方法
1. 看请求 2./uc_server/control/admin/app.php echo "\$url = $url <br />\n \$status = $status& ...
- Liunx 下使用cmake
参考 http://blog.chinaunix.net/uid-28458801-id-3501768.html http://www.ibm.com/developerworks/cn/linux ...
- 使用第三方分页AspNetPager实现真正分页的SQL原理
AspNetPager是一个第三方分页第三方控件,可以和数据绑定控件(GridView等)方便的结合,实现真分页. 真分页:从数据库中获取符合要求的部分数目的记录.性能较高,数据量小,网络负载小,对数 ...
- dubbo,gradle,spring build from source
https://github.com/alibaba/dubbo http://www.csdn.net/article/2012-11-13/2811827-alibaba-Dubbo-Distri ...
- zabbix basic concept
tomcat/mysql/hadoop http://www.linuxidc.com/Linux/2014-06/103776p2.htm http://www.aikaiyuan.com/2993 ...
- Java线程池的原理及几类线程池的介绍
刚刚研究了一下线程池,如果有不足之处,请大家不吝赐教,大家共同学习.共同交流. 在什么情况下使用线程池? 单个任务处理的时间比较短 将需处理的任务的数量大 使用线程池的好处: 减少在创建和销毁线程上所 ...
- 用Js的eval解析JSON中的注意点
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...
- Bone Collector
if(j>=w[i]) dp[i][j] = max(dp[i-1][j-w[i]]+v[i], dp[i-1][j]); else dp[i][j]=dp[i-1][j]; i 1 2 3 4 ...
- signed和unsigned
signed:表示有符号位,最高位包括正数.负数和0: unsigned:表示无符号位,最高位表示 数值,不表示符号: signed int a:a 的取值范围是:-2^..... 这个就想不起来要占 ...