一、实现如下效果

二、代码实现思路

图案一源码　

 <!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. Web前端开发大系概览 （前端开发技术栈）

    前言 互联网建立50多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案. 我从2000 ...

  2. titit. 深入理解 内聚（ Cohesion）原理and  attilax大总结

    atitit. 深入理解 内聚( Cohesion)原理and  attilax大总结         1.1. 内聚的概念 1 1.1.1. 高内聚模式关于这个问题给出的答案是:分配职责,使其可保持 ...

  3. Android笔记——eclipse快捷键

    查看快捷键定义的地方 Window->Preferences->General->Keys. 编辑相关快捷键 1. [ALT+/] 自动提示方法 此快捷键为用户编辑的好帮手,能为用户 ...

  4. Java学习笔记（04）

    Java学习笔记(04) 如有不对或不足的地方,请给出建议,谢谢! 一．对象 面向对象的核心:找合适的对象做合适的事情 面向对象的编程思想:尽可能的用计算机语言来描述现实生活中的事物 面向对象:侧重于 ...

  5. es6学习笔记一数组（中）

    接着上一篇,给大家再分享一些数组的其他方法.大家也可以去点击这里学习数组更多的方法 concat方法: 概述:    concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回. ...

  6. linux安装和配置 mysql、redis 过程中遇到的问题记录

    linux下部署mysql和redis网上的教程很多,这里记录一下我部署.配置的过程中遇到的一些问题和解决办法. mysql ①安装完成后启动的时候报错 Starting MySQL.The serv ...

  7. scikit-learn K近邻法类库使用小结

    在K近邻法(KNN)原理小结这篇文章,我们讨论了KNN的原理和优缺点,这里我们就从实践出发,对scikit-learn 中KNN相关的类库使用做一个小结.主要关注于类库调参时的一个经验总结. 1. s ...

  8. Golang类型转换

    类型转换 1.int转string strconv.Itoa(i) 2.string转int i, err = strconv.Atoi(s) 或者 i, err = ParseInt(s, 10, ...

  9. c/c++系列的运算符优先级总结

    经常写程序的时候,遇到运算符优先级的问题,令我汗颜的是,查书的次数挺多的……狠狠心,总结下.不过还要结合大量的编程实践来深入脑海. 1.首先永远忘不了的是,逗号运算符级别最低,毫无争议的还有()括起来 ...

  10. Linux:Ubuntu16.04下创建Wifi热点

    Linux:Ubuntu16.04下创建Wifi热点 说明: 1.Ubuntu16.04里面可以直接创建热点,而不用像以前的版本,还要其他辅助工具. 2.本篇文章转载自编程人生 具体步骤如下: 1.  ...