.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. PHP程序员必须清楚的问题汇总

    PHP程序员必须清楚的问题汇总 投稿:hebedich 字体:[增加 减小] 类型:转载   这篇文章主要介绍了PHP程序员必须清楚的问题汇总,需要的朋友可以参考下     你是否正在准备寻找一份PH ...

  2. Oracle 常见问题

    查看Oracle数据库是否安装成功 sqlplus /nolog SQL>conn / as sysdba Connected to an Idle instance(表明成功) SQL> ...

  3. Nginx_Lua

    http://www.ttlsa.com/nginx/nginx-lua/ 1.1. 介绍ngx_lua – 把lua语言嵌入nginx中,使其支持lua来快速开发基于nginx下的业务逻辑该模块不在 ...

  4. Apache Apex

    http://apex.apache.org/docs.html https://apex.apache.org/docs/apex/application_development/

  5. Delphi 如何操作外部程序的控件(如按钮,文本框,单选按钮等)

    看你要做什么,比较现在网络很流行的QQ.MSN这些软件都屏蔽了,你可能还可以访问一些小软件的这些控制,思路及方案如下(API函数自己去百度查一下)1.得到你要这个窗口的句柄 使用FindWindow2 ...

  6. JAVA的覆盖、继承和多态的详细解说.this和super的用法

    1. 继承: (1)子类的构造方法一定会调用父类的构造方法. (2)任何子类构造方法第一行肯定是this();或者super();两个择一. this();调用本类的其它构造方法.(传递相应参数调用相 ...

  7. global.asax、global.asax.compiled、PrecompiledApp.config三者关系

    global.asax用WebDeploy发布后,会在bin下面产生一个global.asax.compiled,同时根目录下产生PrecompiledApp.config. 正常情况下global. ...

  8. iOS 键盘隐藏

     IOS7 点击空白处隐藏键盘的几种方法   IOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能取消键盘的显示,对于用户体验来说很不友好,我 ...

  9. [Error Code: 1290. The MySQL server is running with the --secure-file-priv option so it cannot execute this statement]错误解决

    1.配置文件中将这行注销“secure-file-priv="C:/ProgramData/MySQL/MySQL Server 5.7/Uploads" ”:很多人添加权限依然不 ...

  10. php获得文件夹下所有文件的递归算法

    function my_scandir($dir){ $files=array(); if(is_dir($dir)) { if($handle=opendir($dir)) { while(($fi ...