一、实现如下效果

二、代码实现思路

图案一源码　

 <!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实现图标库图标的更多相关文章

  1. 简单的纯css重置input单选多选按钮的样式--利用伪类

    由于input单选多选的原生样式通常都不符合需求,所以在实现功能时通常都需要美化按钮 html <input type="radio" /> <input typ ...

  2. 利用伪类选择器与better-scroll的on事件所完成的上拉加载

    之前给大家分享过一篇上拉加载 利用了better-scroll的pullUpDown 和DOM元素的删除添加  感觉那样不太好 今天给大家分享一个不同的上拉加载思想 代码如下 class List { ...

  3. 利用伪类写一个自定义checkbox和radio

    首先是效果图来一张 再来一张html结构 关键的CSS来了~ 首先呢要把input标签设置为display: none;  因为自定义的原理是通过label的for属性,来点击label转向为点击in ...

  4. 如何利用伪类元素和vertical-align: middle;实现元素相对于父元素居中

    HTML部分 <div class="zhihu"> <div class="loginMain"> </div> < ...

  5. 利用CSS hover伪类改变其他元素的总结

    :hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...

  6. 利用:before和:after伪类制作类似微信对话框

    今天学到了怎么做一个小三角形,进而结合其他属性把类似微信对话框的图形做出来了. 先做出如下形状: .arrow { width: 30px; height:30px; border-width:20p ...

  7. 使用伪类(::before/::after)设置图标

    使用伪类(::before/::after)设置文本前后图标.减少标签的浪费,使页面更加整洁. 如图: <!DOCTYPE html> <html> <head> ...

  8. web之css伪类

    利用伪类清楚浮动: 代码: <!DOCTYPE html> <htmllang="en"> <head> <metacharset=&qu ...

  9. CSS 属性 - 伪类和伪元素

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...

随机推荐

  1. 集群下session共享问题的解决方案.

    这一篇博客来讲解下babasport这个项目中使用的Login功能, 当然这里说的只是其中的一些简单的部分, 记录在此 方便以后查阅. 一: 去登录页面首先我们登录需要注意的事项是, 当用户点击登录按 ...

  2. PHP的静态和接口

    静态普通成员普通成员属于对象//静态成员//静态成员属于类//static 关键字 变成静态成员/*class ren {    public $name;    public static $zho ...

  3. Ado.Net Destination 用法

    Ado Net Destination Component 使用Ado net Connection manager,其Data Access Mode 只有一种, table or view,组件的 ...

  4. 【WP开发】读写剪贴板

    在WP 8.1中只有Silverlight App支持操作剪贴板的API,Runtime App并不支持.不过,在WP 10中也引入了可以操作剪贴板的API. 顺便说点题外话,有人会说,我8.1的开发 ...

  5. 关于HTML5 Audio线程问题

    移动端果然很坑! 在移动端IOS平台上用new Audio每次调用这个API都会创建一个新的线程,而且还不能销毁...直到拖死应用 后来改进了换了AudioContext,线程问题解决了 https: ...

  6. bootstrap 学习

    <!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name=& ...

  7. 【开源】OSharp3.0框架解说系列：新版本说明及新功能规划预览

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  8. DOM扩展-HTML5、专有扩展

     HTML5 与类相关的扩充 1.getElementsByClassName()方法 改方法接受一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList.传入多个类型时, ...

  9. 应用程序框架实战二十一:DDD分层架构之仓储（介绍篇）

    前面已经介绍过Entity Framework的工作单元和映射层超类型的封装,从本文开始,将逐步介绍仓储以及对查询的扩展支持. 什么是仓储 仓储表示聚合的集合. 仓储所表现出来的集合外观,仅仅是一种模 ...

  10. 字符串模式匹配之KMP算法图解与 next 数组原理和实现方案

    之前说到,朴素的匹配,每趟比较,都要回溯主串的指针,费事.则 KMP 就是对朴素匹配的一种改进.正好复习一下. KMP 算法其改进思想在于: 每当一趟匹配过程中出现字符比较不相等时,不需要回溯主串的 ...