一、实现如下效果

二、代码实现思路

图案一源码　

 <!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. 【敏捷开发】Android团队开发规范

    这里说的开发规范分成目录规范,项目和包名的命名规范,类,方法,变量和常量的命名规范这几种. 目录规范 目录规范——在开发中整体文件夹组织结构. Requirement——需求文档文件夹 Design— ...

  2. HTML5_03之Canvas绘图

    1.Canvas绘图--JS绘图: <canvas id='c1' width='' height=''></canvas> * Canvas尺寸不能用CSS设置: c1.he ...

  3. Java学习笔记（03）

    一.回顾运算符: 一．控制语句 1.1 顺序结构 (最常见的) 特点:代码从上往下依次执行

  4. DAC Usage3：Monitor Data-tier Applications

    If you deploy a DAC to a managed instance of the Database Engine, information about the deployed DAC ...

  5. html5的audio在safari(windows)中无效

    因为mac下的safari不会有这样的问题(OSX默认都装的有QuickTime),而windows下用safari的比例实在小不用考虑. apple算是偷了一个小懒.而所谓的需要quicktime并 ...

  6. Visualize Surface by Delaunay Triangulator

    Visualize Surface by Delaunay Triangulator eryar@163.com Abstract. Delaunay Triangulation is the cor ...

  7. Winform 生成不需要安装的exe可执行文件 ILMerge使用

    今天应领导要求,把一个程序打包生成一个可以执行的exe文件,不是安装包那种,类似于绿色文件,就是一个exe,可以直接运行.上网查了一下有一个工具可以实现ILMerge. 参照两个文档http://bl ...

  8. Hibernate的数据查找，添加！

    1.首先看一下测试数据库的物理模型 2.测试所需要的Hibernate的jar包 3.数据库的sql /*=============================================== ...

  9. Hawk 数据抓取工具 使用说明(二)

    1. 调试模式和执行模式 1.1.调试模式 系统能够通过拖拽构造工作流.在编辑流的过程中,处于调试模式,为了保证快速地计算和显示当前结果(只显示前20个数据,可在调试的采样量中修改),此时,所有执行器 ...

  10. java删除文件，慎重

    在处理删除图片的时候,我将图片路径从数据库取出,然后执行如下删除代码: void deleteFile(File file){ if(file!=null && file.exists ...