利用伪类: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 ...
随机推荐
- selenium的安装
一.安装selenium 通过pip命令安装selenium包:(pip的安装方法:http://www.cnblogs.com/zhengyihan1216/articles/6011640.htm ...
- Java 对象引用方式 —— 强引用、软引用、弱引用和虚引用
Java中负责内存回收的是JVM.通过JVM回收内存,我们不需要像使用C语音开发那样操心内存的使用,但是正因为不用操心内存的时候,也会导致在内存回收方面存在不够灵活的问题.为了解决内存操作不灵活的问题 ...
- webpack的安装和使用
Webpack是什么 首先可以看下 官方文档 ,文档是最好的老师. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模块格式书写的多个JavaScrip ...
- 【Win 10应用开发】Adaptive磁贴模板的XML文档结构
在若干天之前,老周给大家讲了Adaptive Toast通知的XML模板,所以相应地,今天老周给大家介绍一下Adaptive磁贴的新XML模板. 同样道理,你依旧可以使用8.1时候的磁贴模板,在win ...
- 手把手教你用nodejs+SQL Server2012做增删改查
1.开发工具WebStorm 10.0.4 2.打开WebStorm 10.0.4新建项目:
- C++中的内存管理
在C++中也是少不了对内存的管理,在C++中只要有new的地方,在写代码的时候都要想着delete. new分配的时堆内存,在函数结束的时候不会自动释放,如果不delete我分配的堆内存,则会造成内存 ...
- PHP环境配置-从Apache官网下载windows版apache服务器
由于个人有强迫倾向,下载软件都喜欢从官网下载,摸索了好久终于摸清楚怎么从Apache官网下载windows安装版的Apache服务器了,现在分享给大家. 进入apache服务器官网http://htt ...
- 如何在ios中集成微信登录功能
在ios中集成微信的登录功能有两种方法 1 用微信原生的api来做,这样做的好处就是轻量级,程序负重小,在Build Settings 中这样设置 然后设置 友盟的设置同上,但是要注意,加入你需要的所 ...
- Linux使用lvresize扩展或缩减lv大小
环境:CentOS 6.7 一.新建并挂载目录 /u01 和 /data 1.创建目录挂节点/u01,/data mkdir -p /{u01,data} 2.创建lv,名称是lv_u01,大小10g ...
- java操作数据库增删改查的小工具1--TxQueryRunner
在java程序中,一般使用jdbc连接数据库,比较麻烦,在看传智教程时学了一个工具类,用于简化与数据库之间的操作步骤,就是TxQueryRunner,他是QueryRunner的子类,用起来和他是一样 ...