一、实现如下效果

二、代码实现思路

图案一源码　

 <!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. Thrift简单实践

    0.什么是RPC RPC(Remote Procedure Call - 远程过程调用),是通过网络从远程计算机上请求服务,而不需要了解底层网路技术的细节.简单点说,就是像调用本地服务(方法)一样调用 ...

  2. MySQL学习笔记十一：数据导入与导出

    数据导入 1.mysqlimport命令行导入数据 在使用mysqlimport命令导入数据时,数据来源文件名要和目标表一致,不想改文件名的话,可以复制一份创建临时文件,示例如下. 建立一个文本use ...

  3. 我的iOS开发系列博文

    之前目录性的总结了发表过的关于OC方面的文章,今天在目录性的总结一下有关iOS开发的文章.走过路过不要错过哦,今天的博文也全都是干货.写技术博客与大家交流一下思想也是不错的. 下面是我的技术博客中有关 ...

  4. iOS开发之远程推送

    说到远程推送,应该用的也挺多的,今天就基于SEA的云推送服务,做一个推送的小demo,来了解一下iOS中的远程推送是怎么一回事儿,首先你得有苹果的开发者账号,好咸蛋也差不多了,主要内容走起. 一.准备 ...

  5. 如何用Dummy实例执行数据库的还原和恢复

    今天实验了一下,如何在所有文件,包括数据文件,在线日志文件,控制文件都丢失的情况下,利用RMAN备份恢复和还原数据库.该实验的重点是用到了Dummy实例. 具体步骤如下: 备份数据库 [oracle@ ...

  6. 【记录】WCF IIS 404

    WCF IIS 发布报"404错误": 修改 Web.config 如下: <system.webServer> <handlers> <remove ...

  7. android 伸缩控件ExpandableListView 展开失败的可能原因。

    (原创)转载请声明出处http://www.cnblogs.com/linguanh/ 问题原型: ExpandableListView 展开失效. --------------------直接看结论 ...

  8. OO中，先有对象还是先有类？

    就是问,在面向对象思想里,先有对象还是先有类,乍一看和先有鸡蛋还是先有鸡是一类问题,其实不然!这个问题,在lz考研复试的时候被面试官问过,一模一样,如今又在一个笔试题里看到了类似的题目,眨一下,有人会 ...

  9. canvas刮刮乐和画笔

    这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...

  10. 大型网站提速关键技术(页面静态化,memcached,MySql优化)(一)

    一:关键技术介绍: 衡量是否为大型网站的要素: A:PV值(page views 页面浏览量) 访问量大: 带来的问题:1:流量大 -->解决方案:增加带宽,优化程序(视频和图片较浪费带宽,尽量 ...