& .cicle{
          position: relative;
          float: right;
          margin-right: -1rem;
          vertical-align: middle;
          width: 1.4rem;
          height: 1.4rem;
          border: 1px solid #3399ff;
          border-radius: 50%;
        }
        & .select:after {
          content: '\00a0';
          display: inline-block;
          border: 2px solid #3399ff;
          border-top-width: 0;
          border-right-width: 0;
          width: 9px;
          height: 5px;
          -webkit-transform: rotate(-50deg);
          position: absolute;
          top:3px;
          left:2px;
        }

纯CSS写的对勾样式的更多相关文章

  1. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  2. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  3. 教你两招用纯CSS写Tab切换

    说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下:   Tab切换 方法一:模 ...

  4. 纯CSS实现加载转圈样式

    不同的项目中对于等待加载时转圈圈的样式是不同的,有的是传统的转圈的gif图片,见得比较多的是将转圈圈的换成了可爱的图标.有时候项目中加入等待加载的图片会很违和,不符合美观,所以需要用CSS做一个.下面 ...

  5. 纯CSS打造好看的按钮样式

    好看的按钮.链接.div样式,效果预览: http://hovertree.com/code/run/css/s8o19792.html 发现今天积分和排名不错: 代码如下: <!DOCTYPE ...

  6. 还在为小三角形切图?使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  7. 纯CSS写九宫格样式,高宽自适应正方形

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  8. 拓展-教你手把手用纯CSS写轮播图

    先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...

  9. 用纯css写出三角形

    1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...

随机推荐

  1. Eclipse导入项目: No projects are found to import

    Eclipse导入项目: No projects are found to import  如果发导入工程import的时候,出现”No projects are found to import” 的 ...

  2. enterText与typeText

    转自:http://www.cnblogs.com/hyddd/p/4126979.html 问题场景: Robotium.enterText输入数据后,点击"发送"按钮,多数情况 ...

  3. Android ImageLoader 本地缓存

    Android ImageLoader 本地缓存 本地缓存                                                                        ...

  4. [办公自动化]EXCEL不大,但是保存很慢

    今天同事有一个excel文件.office 2007格式的. 折腾了半天.按照以往的经验,定位-对象,应该可以删除. 后来在“编辑”窗格的“查找和选择”里面,单击“选择窗格“.可以看到很多”pictu ...

  5. nhibernate实体类主键ID赋值问题

    有个同事忽然来找我,说他遇到了一个问题,在调用nhibernate 进行update数据的时候报错,说是有数据行锁定. 看代码,没啥问题. 直接在PL/SQL developer里对数据库进行插入,也 ...

  6. 2016/05/16 thinkphp3.2.2 验证码使用

    Think\Verify类可以支持验证码的生成和验证功能. 生成验证码 下面是最简单的方式生成验证码: $Verify =new \Think\Verify(); $Verify->entry( ...

  7. PyTorch 高级实战教程:基于 BI-LSTM CRF 实现命名实体识别和中文分词

    前言:译者实测 PyTorch 代码非常简洁易懂,只需要将中文分词的数据集预处理成作者提到的格式,即可很快的就迁移了这个代码到中文分词中,相关的代码后续将会分享. 具体的数据格式,这种方式并不适合处理 ...

  8. linux环境下oracle静默安装

    一.安装环境 1.linux版本:redhat6.3_x86_64 2.oracle版本:Oracle Database 11g Enterprise Edition Release 11.2.0.3 ...

  9. OSD锁定怎么解锁?

    方法是这样的: 先按中间的建关掉显示器电源,关了显示器后按住左键,在按中间的建开机,这时屏幕闪一下就解锁了.在按中间的建打开显示器就行了. 加锁的方法和解锁一样

  10. bzoj 3309 DZY Loves Math —— 莫比乌斯反演+数论分块

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3309 凭着上课所讲和与 Narh 讨论推出式子来: 竟然是第一次写数论分块!所以迷惑了半天: ...