利用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学习【八】模型视图投影矩阵
<!--探讨WEBGL中不同图形的绘制方法:[待测试2017.11.6]--> <!DOCTYPE HTML> <html lang="en"> ...
- 封装自己的jquery框架
jQuery is a fast small JavaScript library 如何封装自己的jQuery <script> // 这里使用沙箱模式,可以防止全局污染 (functio ...
- nyoj252-01串
01串 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 ACM的zyc在研究01串,他知道某一01串的长度,但他想知道不含有"11"子串的这种长度的0 ...
- PHP实现并发请求
后端服务开发中经常会有并发请求的需求,比如你需要获取10家供应商的带宽数据(每个都提供不同的url),然后返回一个整合后的数据,你会怎么做呢? 在PHP中,最直观的做法foreach遍历urls,并保 ...
- Hibernate的事务机制
http://www.cnblogs.com/jerryxing/archive/2012/04/24/2468999.html http://www.cnblogs.com/xiaofeilee/p ...
- Hadoop集群(第11期)_常用MySQL数据库命令
1.系统管理 1.1 连接MySQL 格式: mysql -h主机地址 -u用户名 -p用户密码 举例: 例1:连接到本机上的MySQL. 首先在打开DOS窗口,然后进入目录 mysqlbin,再键入 ...
- Ubuntu16.04添加源的地址
打开terminal,输入sudo gedit /etc/apt/sources.list,向该文件中添加源的地址即可,如,可添加如下地址 deb-src http://archive.ubuntu. ...
- iOS_21团购_地图功能
终于效果图: 右下角的回到用户位置button: MapController控制器, 是主控制器左側dock上面的[地图]button相应的控制器, 继承自ShowDealDetailControll ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 用SPD开发SharePoint应用程序
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 用SPD开发SharePoint应用程序 非常多开 ...
- inconsistent line endings 解决方法
I'm using Unity 3D in combination with Visual Studio 2008 on a Windows 7 64 bit system. When savi ...