一、实现如下效果

二、代码实现思路

图案一源码　

 <!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. 基于1.3.3版本tooltip的datagrid单元格tip实现

    基于1.3.3版本tooltip的datagrid单元格tip实现 2013年05月25日 ⁄ datagrid ⁄ 共 6122字 ⁄ 评论数 26 ⁄ 被围观 7,033 views+ 文章目录 ...

  2. 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  3. Entity Framework Core 1.1 Preview 1 简介

    实体框架核心(EF Core)是Entity Framework的一个轻量级,可扩展和跨平台版本. 10月25日,Entity Framework Core 1.1 Preview 1发布了. 升级到 ...

  4. LINQ系列：LINQ to SQL Select查询

    1. 查询全部字段 using (NorthwindContext context = new NorthwindContext()) { var expr = context.Products; f ...

  5. AngularJS之代码风格36条建议【一】（九）

    前言 其实在新学一门知识时,我们应该注意下怎么书写代码更加规范,从开始就注意养成一个良好的习惯无论是对于bug的查找还是走人后别人熟悉代码都是非常好的,利人利己的事情何乐而不为呢,关于AngularJ ...

  6. 关于SubSonic3.0查询或更新时出现System.NullReferenceException异常的处理

    在调试程序时,同事发现添加记录时,出现了System.NullReferenceException异常 DictBase dict = new DictBase();    dict.DictCode ...

  7. webapp应用---cordova.js 3.7.0插件安装总结

    今天是2014年的最后一天,年终总结什么的就不写了.记录一下今天的工作内容.如果不知道phoneGap,那么就不需要往下看了,phoneGap现在已经叫cordova了,叫什么不重要,重要的是它对we ...

  8. iOS对象属性详解

    oc对象的一些属性: retain,strong, copy,weak,assign,readonly, readwrite, unsafe_unretained 下面来分别讲讲各自的作用和区别: r ...

  9. 实验记录：Oracle redo logfile的resize过程

    实验记录:Oracle redo logfile的resize过程. 实验环境:RHEL 6.4 + Oracle 11.2.0.3 单实例 文件系统 实验目的:本实验是修改redo logfile的 ...

  10. 1Z0-053 争议题目解析681

    1Z0-053 争议题目解析681 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 681.The environmental variable ORACLE-BASE is set ...