.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() 及兼容性的更多相关文章

  1. 利用伪类写一个自定义checkbox和radio

    首先是效果图来一张 再来一张html结构 关键的CSS来了~ 首先呢要把input标签设置为display: none;  因为自定义的原理是通过label的for属性,来点击label转向为点击in ...

  2. 利用border和伪类画出三角形 ps:好久没写博客了。。。

    有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...

  3. CSS选择器:伪类(图文详解)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式. ...

  4. CSS3伪类使用方法实例

    有时候在网页设计中会涉及到很多看上去很繁琐的设计图,这时候都会很让人头疼,那么这时候伪类就可以来帮助你解决问题了. 下面有一段实例大家可以参考一下: <!DOCTYPE html> < ...

  5. HTML5新标签使用及CSS选择器(伪类)

    这些标签能够让搜索引擎更直接的解析页面内容. <header></header>语义:文档或者页面的头部 <nav></nav>语义:导航这两者不是组合 ...

  6. css 04-CSS选择器:伪类

    04-CSS选择器:伪类 #伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就 ...

  7. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  8. 你知道hover、active这四个伪类为什么要按顺序写吗

    刨根问底,你知道:hover等4个伪类为什么要按顺序排列吗 引言 :link,:visited,:hover,:active这4个伪类大家都不陌生,4个伪类要按照LvHa这个爱恨原则来排(外国友人起的 ...

  9. CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

随机推荐

  1. python 线程使用

    ################# 线程演示脚本  ####################### #coding=utf-8import threadingfrom time import ctim ...

  2. PHP面向对象程序设计的61条黄金法则

    PHP面向对象程序设计的61条黄金法则   你不必严格遵守这些原则,违背它们也不会被处以宗教刑罚.但你应当把这些原则看成警铃,若违背了其中的一条,那么警铃就会响起 . ----- Arthur J.R ...

  3. Memcache技术分享:介绍、使用、存储、算法、优化、命中率

    1.memcached 介绍 1.1 memcached 是什么? memcached 是以LiveJournal旗下Danga Interactive 公司的Brad Fitzpatric 为首开发 ...

  4. Segmentation

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION There is another way ...

  5. mysql 5.5 5.6配置日志

    5.5(linux) [mysqld]#loglog-output=FILEgeneral-log #开启普通日志general-log_file = /tmp/mysqllog/gen.log #设 ...

  6. 低功耗蓝牙4.0BLE编程-nrf51822开发(5)-链路层

    链路层定义设备处于状态机中五种状态的一种: (1)旁路状态: 处于此状态下的设备不发送或接收数据,处于其它状态下都可以转到此状态. (2)广告状态: 处于此状态的设备发送广播包或者监听.响应广播包.可 ...

  7. HTML5的新事件

    HTML 元素可拥有事件属性,这些属性在浏览器中触发行为,比如当用户单击一个 HTML 元素时启动一段 JavaScript. HTML 元素可拥有事件属性,这些属性在浏览器中触发行为,比如当用户单击 ...

  8. Android App罕见错误和优化方案

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 1.App如果被定义一个有参数构造函数,那么需要再定义一个无参数的,如果不则会在某些情况下初始化失败 ...

  9. WeakHashMap 理解笔记

    An entry in a WeakHashMap will automatically be removed when its key is no longer in ordinary use. M ...

  10. 最大子序列和 o(n)

    问题: 给定一整数序列A1, A2,... An (可能有负数),求A1~An的一个子序列Ai~Aj,使得Ai到Aj的和最大 例如:整数序列-2, 11, -4, 13, -5, 2, -5, -3, ...