利用伪类:before&&:after实现图标库图标
一、实现如下效果
二、代码实现思路
图案一源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>伪类绘图</title>
<style>
.button {
display: inline-block;
position: relative;
font-size: 30px;
width: 90px;
height: 90px;
background-color: #00aabb;
cursor: pointer;
}
.button:after, .button:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 .5px rgba(177,177,177,.8);
/*box-shadow: inset 0 0 0 1em;内阴影*/
background: #FFF;
}
.button:before {
height: 1.5em;
width: 2px;
}
.button:after {
width: 1.5em;
height: 2px;
}
</style>
</head>
<body>
<div class="button"></div>
</body>
</html>
图案二源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>icon-img图标进阶玩法</title>
<style>
.icon-img {
display: inline-block;
position: relative;
height: 80px;
width: 100px;
border: solid 5px #00aabb;
border-radius: 5px;
font-size: 10px;
overflow: hidden;
}
.icon-img:before {
content: "";
position: absolute;
top: 18px;
right: 20px;
width: 15px;
height: 15px;
box-shadow: inset 0 0 0 15px #00AABB;
border-radius: 50%;
}
.icon-img:after {
content: "";
position: absolute;
left: 0;
bottom: -30px;
width: 80px;
height: 50px;
background-color: #00AABB; box-shadow: inset 0 0 0 50px #00AABB, 30px -20px 0 0 #00AABB;
transform: rotate(45deg); }
</style>
</head>
<body>
<div class="icon-img"></div>
</body>
</html>
利用伪类:before&&:after实现图标库图标的更多相关文章
- 简单的纯css重置input单选多选按钮的样式--利用伪类
由于input单选多选的原生样式通常都不符合需求,所以在实现功能时通常都需要美化按钮 html <input type="radio" /> <input typ ...
- 利用伪类选择器与better-scroll的on事件所完成的上拉加载
之前给大家分享过一篇上拉加载 利用了better-scroll的pullUpDown 和DOM元素的删除添加 感觉那样不太好 今天给大家分享一个不同的上拉加载思想 代码如下 class List { ...
- 利用伪类写一个自定义checkbox和radio
首先是效果图来一张 再来一张html结构 关键的CSS来了~ 首先呢要把input标签设置为display: none; 因为自定义的原理是通过label的for属性,来点击label转向为点击in ...
- 如何利用伪类元素和vertical-align: middle;实现元素相对于父元素居中
HTML部分 <div class="zhihu"> <div class="loginMain"> </div> < ...
- 利用CSS hover伪类改变其他元素的总结
:hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...
- 利用:before和:after伪类制作类似微信对话框
今天学到了怎么做一个小三角形,进而结合其他属性把类似微信对话框的图形做出来了. 先做出如下形状: .arrow { width: 30px; height:30px; border-width:20p ...
- 使用伪类(::before/::after)设置图标
使用伪类(::before/::after)设置文本前后图标.减少标签的浪费,使页面更加整洁. 如图: <!DOCTYPE html> <html> <head> ...
- web之css伪类
利用伪类清楚浮动: 代码: <!DOCTYPE html> <htmllang="en"> <head> <metacharset=&qu ...
- CSS 属性 - 伪类和伪元素
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...
随机推荐
- 2013 duilib入门简明教程 -- 界面设计器 DuiDesigner (10)
上一个教程讲解了怎么布局最大化.最小化.关闭按钮,但是如果手动去计算这三个按钮的位置和大小的话,非常的不直观,也很不方便. 所以这一章准备介绍duilib的UI设计器,由于这个设计器很 ...
- 2013 duilib入门简明教程 -- 复杂控件介绍 (13)
首先将本节要介绍的控件全部拖到界面上,并调整好位置,如图: 然后将Name属性改成其他名字, 不能是[控件名+UI+数字]这种,因为这是DuiDesigner ...
- 元素绝对定位以后设置了高宽，a标签不能点击的原因总结
元素绝对定位以后设置了高宽,a标签不能点击的原因: 1.元素内并无内容 2.背景是透明的,无任何背景图或者颜色 解决方法: 1.如果不是绝对定位元素的,可以用相对定位 2.给元素加透明的背景图 3.I ...
- MongoDB 数组
MongoDB是文档型数据库,每个文档(doc)表示数据的一项记录.相比关系型DB的row只能使用简单的数据类型,doc能够使用复杂的数据类型:内嵌doc,数组.MongoDB的数组是一系列元素的集合 ...
- Latch1：理解 PageIOLatch和PageLatch
Latch主要分为三种,Buffer Latch,I/O Latch, non-buf latch. 1,PageLatch 在访问数据库的数据页(Data Page或Index Page)时,如果相 ...
- 编译opengl编程指南第八版示例代码通过
最近在编译opengl编程指南第八版的示例代码,如下 #include <iostream> #include "vgl.h" #include "LoadS ...
- Winform 生成不需要安装的exe可执行文件 ILMerge使用
今天应领导要求,把一个程序打包生成一个可以执行的exe文件,不是安装包那种,类似于绿色文件,就是一个exe,可以直接运行.上网查了一下有一个工具可以实现ILMerge. 参照两个文档http://bl ...
- 深入学习jQuery选择器系列第七篇——表单选择器
× 目录 [1]表单元素 [2]对象属性 前面的话 无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素 表单 ...
- AngularJS之中级Route【二】（七）
前言 上一篇我们介绍了AngularJS内置的路由ngRoute,我们知道AngularJS被广泛应用于单页应用SPA(Single Page Application)中,此时路由对于我们来讲非常重要 ...
- C#互斥体——Mutex
Mutex对象是一个同步基元,可以用来做线程间的同步. 若多个线程需要共享一个资源,可以在这些线程中使用Mutex同步基元.当某一个线程占用Mutex对象时,其他也需要占用Mutex的线程将处于挂起状 ...