关闭按钮:

<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. 2018年长沙理工大学第十三届程序设计竞赛 H数学考试

    链接:https://www.nowcoder.com/acm/contest/96/H来源:牛客网 数学考试 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言6 ...

  2. android 定位的几种方式介绍

    [地理位置] android 定位的几种方式介绍 开发中对于地图及地理位置的定位是我们经常要用地,地图功能的使用使得我们应用功能更加完善,下面 www.androidkaifa.com 总结了一下网络 ...

  3. vue-cli脚手架build目录中的karma.conf.js配置文件

    本文系统讲解vue-cli脚手架build目录中的karma.conf.js配置文件 这个配置文件是命令 npm run unit 的入口配置文件,主要用于单元测试 这条命令的内容如下 "c ...

  4. Linux 正文处理命令及tar vi 编辑器 homework

    作业一: 1) 将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) cat /etc/passwd /etc/group >/1.txt 2) 将用户信息数据库文件和用 ...

  5. Android 4学习(1):学习路线图

    学习路线图 如下图所示,整个Android的架构可以分为四层,五个部分.我给自己制定的学习路线图是这样的: 对于有java基础的入门级android开发者而言,首先要学会使用Application F ...

  6. 关于SQL结构化查询语言中(+)的用法

    一.概述 (+):从符号上理解为添加一些内容进入结果集中,那么自然会问到这么几个问题 1.添加什么内容 2.怎么添加 3.添加到什么结果集中 以下内容将以实例说明上面3个问题. 二.实例 以Oracl ...

  7. iOS 给Main.storyboard 添加button 事件《转》

    XCODE中使用Main.Storyboard拉入控件并实现事件(Swift语言)   如何在XCODE中的Main.Storyboard内拉入控件并实现一个简单的效果呢?本人由于刚接触Swift语言 ...

  8. oracle DML-(insert、select、update、delete)

    一.插入记录INSERT INTO table_name (column1,column2,...) values ( value1,value2, ...); 示例:insert into emp ...

  9. ie6下会拒绝高度小于字号的设置

    <div style="height: 5px;background-color: yellow">wojitianhenkaixin</div> 此时浏览 ...

  10. CF321E Ciel and Gondolas & BZOJ 5311 贞鱼

    一眼可以看出$O(kn^{2})$的$dp$方程,然后就不会了呜呜呜. 设$f_{i, j}$表示已经选到了第$i + 1$个数并且选了$j$段的最小代价,那么 $f_{i, j} = f_{p, j ...