关闭按钮:

<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. Java-API:un-java.util.Set

    ylbtech-Java-API:java.util.Set 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https://docs.oracle.com ...

  2. FreeType 管理字形

    转自:http://blog.csdn.net/hgl868/article/details/7254687 1.字形度量 顾名思义,字形度量是对应每一个字形的特定距离,以此描述如何对文本排版.    ...

  3. ECS Windows系统使用自带监视器查看IIS并发连接数

    问题现象 ECS Windows系统如何查看IIS并发连接数? 解决方案 1.运行-->输入“perfmon.msc” . 2.在“系统监视器”图表区域里点击右键,然后点“添加计数器”. 3.在 ...

  4. ie6 ie7下报脚本错误"Expected identifier, string or number" 的原因和解决方法

    在IE6和ie7里面,脚本报错"Expected identifier, string or number" 写下这个是个之前我已经很头疼了,因为我的代码在其他浏览器里都是正常的, ...

  5. windows安装和配置JDK

    安装完JDK后配置环境变量  计算机→属性→高级系统设置→高级→环境变量   系统变量→新建 JAVA_HOME 变量 . 变量值填写jdk的安装目录(本人是 E:\Java\jdk1.7.0)   ...

  6. js语法和数据类型

    基础知识(Basics) JavaScript 的很多语法借鉴自 Java,但也受 Awk,Perl 和 Python 影响. JavaScript 是大小写敏感的,使用 Unicode 字符集. 在 ...

  7. 磨刀——python及相关工具

    1.python语言包 1.1去https://www.python.org/,在download栏下载最新版python2或者python3 tips:1.点击下载会很慢,推荐:迅雷,百度云盘下载, ...

  8. mac上virtualBox的安装和使用

    一.下载和安装 去oracle官网下载mac版的virtualBox. 官网下载地址:https://www.virtualbox.org/. 下载好后按照向导进行安装即可. 二.使用方法 1.新建虚 ...

  9. g2o20160430下的csparse文件夹内的CMakeLists.txt

    1. g2o20160430下的csparse文件夹内的CMakeLists.txt cmake_minimum_required(VERSION 2.6) PROJECT(csparse) SET( ...

  10. Java-马士兵设计模式学习笔记-策略模式-模拟Comparable接口

    一.情况 1.目标:要在专门用于排序数据的DataSorter.java中实现对所有A类,B类,C类,D类等等的排序 2.初步想法:DataSorter.java的代码如下 public class ...