css伪类:before及:after除了插入文字内容还能做点儿啥?画图
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11181416.html
1、什么时候用伪类:before和:after?
结合实际开发情况,说一点自己的理解~
(1)原本这两个伪类核心是content,用于在指定元素之前或之后插入内容,但实际开发中用的比较多的是传空字符串"",再做样式控制。
(2)用户操作促使样式改变我们通常是采用添加类/删除类、类名切换等方法控制,但这种情况是针对已存在某dom元素,我们去控制该dom元素的样式显示。
(3)对于需要新增一个只包含样式的dom(无数据交互,也不需要通过js操作该dom)且原本不存在的情况,我们可以采用伪类实现,常用于绘图。
例如:用户点击按钮后我们需要在按钮中绘制一个点,这种情况我们就可以采用伪类,这样可以简化页面dom树结构,仅通过样式进行控制。
2、如何通过伪类进行绘图?以微信聊天框样式绘制为例:
HTML代码如下:可见原本一个聊天框需要3个div dom元素(一个背景框、小尖和小尖边框)才能实现,通过伪类1个便搞定~
<div class="main">
<div class="test-div">今天中午吃啥?</div>
<div class="test-div2">吃饭</div>
</div>
CSS代码如下:
.main{
height: 300px;
padding: 50px;
background-color: #FFCD80;
}
.test-div{
line-height: 36px;
text-align: center;
margin-left: 20px;
position: relative;
width: 150px;
height: 36px;
border-radius: 5px;
border: 1px solid #7f7f7f;
background: #f0f0f0;
}
.test-div:before, .test-div:after{
content: "";
position: absolute;
border: 6px solid transparent;
top: 12px;
}
.test-div:before{
left: -11px;
border-right-color: #f0f0f0;
z-index:;
}
.test-div:after{
left: -12px;
border-right-color: #7f7f7f;
z-index:;
} .test-div2{
line-height: 36px;
text-align: center;
margin-top: 20px;
margin-left: 20px;
position: relative;
width: 150px;
height: 36px;
border-radius: 5px;
border: 1px solid #7f7f7f;
background: #f0f0f0;
} .test-div2:before, .test-div2:after{
content: "";
position: absolute;
border: 6px solid transparent;
top: 12px;
}
.test-div2:before{
right: -11px;
border-left-color: #f0f0f0;
z-index:;
}
.test-div2:after{
right: -12px;
border-left-color: #7f7f7f;
z-index:;
}
原理说明:
(1)小尖的实现:利用对长宽为0的块级元素的border属性画三角形,border-left及border-right颜色设置决定了小尖的朝向;
(2)小尖边框的实现:利用:before和:after伪类画两个大小相同的三角形,但相对位置左右偏移差1px,并且白色的三角形覆盖黑色的三角形,黑色三角形自然成了白色三角形的边框;
css伪类:before及:after除了插入文字内容还能做点儿啥?画图的更多相关文章
- CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...
- 【转载】CSS 伪类-:before和:after
:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { conte ...
- 【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- js动态改变css伪类样式
首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...
- 【从0到1学Web前端】CSS伪类和伪元素 分类: HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏
1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- css伪类实现行号自动填充
css伪类实现行号自动填充 大多数时候我们需要行号自动填充的时候我们可以 大多数时候是插入元素, 在元素里用js填入行号,或者用 ol > li 实现行号填充, 对于上面的方式,都不太灵活,而且 ...
- CSS:CSS 伪类(Pseudo-classes)
ylbtech-CSS:CSS 伪类(Pseudo-classes) 1.返回顶部 1. CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果. 语法 伪类的语法: ...
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
随机推荐
- android studio学习---模板
Android Studio还为开发人员提供多种模板选项,从而大大提升开发速度.这些模板能自动创建Activity以及必要的XML文件.大家还可以利用这些模板创建出较为基础的Android应用程序,并 ...
- Git的下载安装
下载地址:https://git-scm.com/download/win 命令: git add ... ---将资源放到缓存区域 git commit -m "提交说明" ...
- Linux的IP详解
俗话说:黑发不知勤学早,白首方悔读书迟. ...
- 三、requests模块
Requests: 让 HTTP 服务人类 虽然Python的标准库中 urllib2 模块已经包含了平常我们使用的大多数功能,但是它的 API 使用起来让人感觉不太好,而 Requests 自称 “ ...
- Caused by: java.lang.ClassNotFoundException: Cannot find class:
Caused by: org.apache.ibatis.builder.BuilderException: Error resolving class. Cause: org.apache.ibat ...
- 【oracle】ORA-12638
背景:换电脑时将旧电脑的ORACLE的登陆信息转到新电脑.其中有三个文件:listener.ora sqlnet.ora tnsnames.ora 解决办法:删了sqlnet.ora 原因:
- Scrapy笔记07- 内置服务
Scrapy笔记07- 内置服务 Scrapy使用Python内置的的日志系统来记录事件日志. 日志配置 LOG_ENABLED = true LOG_ENCODING = "utf-8&q ...
- 各类app的小结
各类app小结: 一.原生app: 二.webapp: 无法调用底层设备的api 三.混合app的方法: 1.原生app 嵌入 2.flutter 3.react native 4.AppCan( ...
- SDOI 2019 R2 摸鱼记
其实并没有什么动力来写这篇游记,毕竟呢,明明已经做好了被吊打的心理准备,可是当 Day 2 挂到没分时,当看到自己在高一里还排名二十时,还是有些,有些难言的滋味.学长们该走的真的都走了,就要只剩下 z ...
- B 题解————2019.10.16
相信他说的话,但不要当真 [题目描述]有一个长度为 n 的自然数序列 a,要求将这个序列恰好分成至少 m 个连续子段. 每个子段的价值为该子段的所有数的按位异或.要使所有子段的价值按位与的结果最大,输 ...