伪类写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 ...
随机推荐
- 代理和block反向传值
代理传值: // SendViewController.h #import <UIKit/UIKit.h> @protocol SendInFor <NSObject> -(v ...
- Web前端开发:什么是页面重回(repaints)与回流(reflow)
前言:什么是重绘与回流? 重绘(repaints)是一个元素外观的改变所触发的浏览器行为,例如改变vidibility.outline.背景色等属性.浏览器会根据元素的新属性重新绘制,使元素呈现新的外 ...
- docker安装与启动
安装docker [root@localhost /]# yum -y install docker-io 更改配置文件 [root@localhost /]# vi /etc/sysconf ...
- BLE-NRF51822教程-RSSI获取
当手机和设备连接上后,设备端可以通过获取RSSI,在一定程度上判断手机离设备的相对距离的远近. 获取函数很简单直接调用sd_ble_gap_rssi_get 接口函数就行了,传入连接句柄和buff就能 ...
- php--linux环境下的主从复制
1.编辑数据库配置文件my.cnf,一般在/etc/目录下. #vi /etc/my.cnf 在[mysqld]的下面加入下面代码:[第一步查看本文件夹中代码是否已经存在,存在不需要进行添加] 只是修 ...
- job_chain
JOB链:JOB之间的相互触发操作. 实验意图:有些JOB具有先后调用次序,比如先做一件事情,这件事情做完才能继续下一件事情,而第一个JOB如果自己挂掉的话,第二个JOB需要正常运行(默认是终止),这 ...
- 解决 SqlServer执行脚本,文件过大,内存溢出问题
原文:解决 SqlServer执行脚本,文件过大,内存溢出问题 执行.sql脚本文件,如果文件较大时,执行会出现内存溢出问题,可用命令替代 cmd 中输入 osql -S 127.0.0.1,8433 ...
- 让UITableView 的 headerView跟随 cell一起滚动,tableHeaderView
在进行UITableView开发的时候,我们有时希望在cell的上面放置一些按钮之类的空间,又想让这些空间跟着cell一起滚动,刚开始想着hederView,注意,这是tableView的sectio ...
- MVC从服务器端返回js到客户端的方法(总结)
1.利用ViewBag,从服务器端创建一个显示js开关的ViewBag,然后到View中去做判断. Controller端 [HttpPost] public ActionResult Index(h ...
- NGINX原理分析 之 SLAB分配机制
1 引言 众所周知,操作系统使用伙伴系统管理内存,不仅会造成大量的内存碎片,同时处理效率也较低下.SLAB是一种内存管理机制,其拥有较高的处理效率,同时也 有效的避免内存碎片的产生,其核心思想是预分配 ...