利用after和before伪类实现chrome浏览器tab选项卡斜边纯css无图制作笔记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{width: 100px;height: 40px;background: red;position: absolute;top: 50%;left: 50%;margin: -15px 0 0 -50px;}
a:before,
a:after{
content: "";
border-top: 42px solid transparent;
position: absolute;
top: -2px;
}
a:before{
border-right: 15px solid red;
left: -15px;
}
a:after{
border-left: 15px solid red;
right: -15px;
}
</style>
</head>
<body>
<a href="javascript;;"></a>
</body>
</html>
利用after和before伪类实现chrome浏览器tab选项卡斜边纯css无图制作笔记的更多相关文章
- 利用:before和:after伪类制作类似微信对话框
今天学到了怎么做一个小三角形,进而结合其他属性把类似微信对话框的图形做出来了. 先做出如下形状: .arrow { width: 30px; height:30px; border-width:20p ...
- CSS3(各UI元素状态伪类选择器受浏览器的支持情况)
选择器 Firefox Safari Opera IE Chrome E:hover Y Y Y Y Y E:active Y Y Y N Y E:focus Y Y Y Y Y E:enabled ...
- chrome浏览器tab页内存占用变大，网站变慢为哪般？
问题概述: 公司做的是BS应用. 之前我们的后台服务器程序是带状态的,用ehcache存储登录状态:这两天被我改成了redis存储,应用本身不再存储登录状态. 然后自测,我在测试某个很耗时间的网页操作 ...
- 巧妙利用before和after伪类实现文字的展开和收起
需求:一段文字,当收起的时候,显示4行,并且多余4行的部分用省略号表示,关键是在省略号前面留有空白部分来放一些图标等东西:展开的时候,全部显示. 例如下面的示例图: 收起的时候: 展开的时候: 在不用 ...
- 利用:before和:after伪类制作CSS3 圆形按钮 含demo
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 制作步骤: 一 ...
- 使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单
html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning ...
- 禁止chrome浏览器的缓冲图片以及css等资源文件
今天做了一个动画的效果,在ff下正常 但是到了谷歌下就不正常了,非常郁闷,看了下是缓存的问题 ,于是度娘了一下发现清理缓存的技巧还是满多的,这里借鉴一下别人的总结,人的大脑有限,下次忘记的时候还可以在 ...
- 兼容IE6-9,FF,Chrome的box-shadow效果（纯CSS）
昨天由于工作关系,遇上了这个问题,苦恼一日无解——残念. 所幸终于在今天早上得到了解决,遗憾的是灵活性不够强,不能根据内容自适应,要配合JS才能达到自适应效果 不过总结到这里已经很满意了,毕竟规律已经 ...
- Chrome 浏览器默认样式覆盖自己 CSS 样式的解决
检查 HTML 源代码,DOCTYPE 的声明是否写正确. HTML5 的 DOCTYPE 声明规范: <!DOCTYPE html> 参考链接: css - User agent sty ...
随机推荐
- 自己对WEBGL坐标系的转换过程的理解【如图】
- JQuery课堂学习笔记
第1课 JQuery技术简介 <%@ page language="java" import="java.util.*" pageEncoding=&qu ...
- Java并发之线程间的同步协作与通信协作
1,Monitor监视器与syncrhoized实现原理 1.1:Monitor Monitor是一个同步工具,相当于操作系统中的互斥量(mutex),即值为1的信号量. 它内置与每一个Object对 ...
- spring bean的作用域和自动装配
1 Bean的作用域 l singleton单列:整个容器中只有一个对象实例,每次去访问都是访问同一个对象 默认是单列 l prototype原型: 每次获取bean都产生一个新的对象,比如Ac ...
- BA-siemens-TX-IO模块照片
西门子楼宇自控用到的P1模块是这样的 TX-16D模块是这样的 TX-8X模块是这样的: TX-6R模块是这样的: TX-IO总线连接模块( 此模块供电和通讯加起来共需三芯线):
- spring mvc流程理解
1.controller处理的终究就是一个结果,默认是modelandview对象,controller里自己随便调用service或者dao,终究都还是在controller里有返回值. 2. 在 ...
- 经常使用的MySQL语句整理
本文參考:http://www.blogjava.net/bolo 部分自己补充,长期更新 MySQL的SQL语句写法,除了那些主要的之外,另一些也算比較经常使用的,这里记录下来,以便以后查找. 好记 ...
- codeforces 571A--Lengthening Sticks(组合+容斥)
A. Lengthening Sticks time limit per test 1 second memory limit per test 256 megabytes input standar ...
- 启用QNX系统，海尔智能冰箱或成业界“宝马”
智能家电正处于迅猛发展的态势,国内眼下有非常多企业都在积极布局智能家电,当中又以海尔最为典型.作为家电领域的领头羊,海尔近年来在智能家电领域的动作不小.近期有消息透露.海尔也许会在IFA展会上 ...
- 回车登录（支持IE 和 火狐等浏览器）
$("body").keydown(function(e){ var curKey = e.which; if(curKey == 13){ $("#Btn_login& ...