关闭按钮:

<em class="close"></em>
  .close {
width: 16px;
height: 16px;
text-align: center;
display: block;
color: #28c54d;
/*background-color: #DEF6E4;
// background-color: #ffffff;
// border: solid 2px #caf0d3; /*!no*/
border: solid 2px #fff; /*!no*/
font-style: normal;
font-size: 20px; /*!px*/
line-height: 80px;
position: absolute;
bottom: 2px;
right: 0px;
z-index: 1000;
/*// margin: auto auto 50px auto;*/
border-radius: 50%;
background: #b0b0b0;
} .close:before {
content: "";
position: absolute;
width: 4px;
/* height: 1px; */
display: block;
background-color: #fff;
transform: rotate(45deg);
top: 5px;
left: 3px;
border: solid thin #fff;
border-radius: 1px;
}
.close:after {
content: "";
position: absolute;
width: 4px;
/* height: 1px; */
display: block;
background-color: #fff;
transform: rotate(-45deg);
top: 5px;
left: 3px;
border: solid thin #fff;
border-radius: 1px;
}

基本css拼图形的更多相关文章

  1. CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  2. 用css绘制图形

    巧用css的border-radius属性,也能绘制出好看的图形 html部分 <!DOCTYPE html><html> <head> <meta char ...

  3. CSS制作图形速查表

    很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...

  4. 【转】CSS制作图形速查表-存档

      http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...

  5. CSS图形基础:纯CSS绘制图形

    为了在页面中利用CSS3绘制图形,在页面中定义 <div  class="container"> <div class="shape"> ...

  6. CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  7. css画图形

    博客:  史上最强大的40多个纯cs图形 问题:看了上面的博客思考简单的三角行是怎么形成的? #triangle-up { width: 0; height: 0; border-left: 50px ...

  8. CSS奇思妙想图形(心形、气泡三角形、切角、梯形、饼图等)

    今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...

  9. CSS 不规则图形绘制

    基础技能1 - 神奇的border 我们先来画一个长方形: .Rectangle { height: 100px; width: 200px; background: darkgray; border ...

随机推荐

  1. dijstra+输出路径总结

    #include<iostream> #include<math.h> #include<memory.h> using namespace std; #defin ...

  2. C# 实现快捷键几种方法

    本文讲解了三种方法实现C# button快捷键,如Alt + *(按钮快捷键),Ctrl+*及其他组合键等. 一. C# button快捷键之第一种:Alt + *(按钮快捷键) 在大家给button ...

  3. java 多线程系列基础篇(七)之线程休眠

    1. sleep()介绍 sleep() 定义在Thread.java中.sleep() 的作用是让当前线程休眠,即当前线程会从“运行状态”进入到“休眠(阻塞)状态”.sleep()会指定休眠时间,线 ...

  4. ORACLE——日期时间格式化参数详解 之一

    2.日期格式化参数详解 2.1 -/,.;: 指定返回字串分隔符 SQL> select to_char(sysdate,'yyyy.mm.dd') from dual; TO_CHAR(SYS ...

  5. C语言学习笔记--动态内存分配

    1. 动态内存分配的意义 (1)C 语言中的一切操作都是基于内存的. (2)变量和数组都是内存的别名. ①内存分配由编译器在编译期间决定 ②定义数组的时候必须指定数组长度 ③数组长度是在编译期就必须确 ...

  6. Django的Model使用

    创建模型 使用Django的模型主要注意两个方面:字段的类型和方法的重写.这里用一个例子来说明,其中包含了常用的字段类型和如何重写方法. from django.db import models cl ...

  7. java多线程编程——同步器Exchanger

    类java.util.concurrent.Exchanger提供了一个同步点,在这个同步点,一对线程可以交换数据.每个线程通过exchange()方法的入口提供数据给他的伙伴线程,并接收他的伙伴线程 ...

  8. struct-config.xml配置文件的解析

    //定义了xml文件的版本和编码<?xml version="1.0" encoding="UTF-8"?>//配置文件中的元素必须按照下述doc指 ...

  9. Java元注解,简单案例

    [注解] 程序中有 注释 和注解 * 注释:给开发人员. * 注解:给计算机看的. 注解使用:学习框架支持注解开发. [JDK提供的注解] @Override :描述方法的重写. @SuppressW ...

  10. Codeforces 960F 线段树

    题意:https://blog.csdn.net/qq_39809664/article/details/79871282 思路:我们考虑LIS的状态转移,对于这个题,假设现在扫描到的边是(u, v, ...