关闭按钮:

<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. c++ 端口扫描程序

    第一.原理 端口扫描的原理很简单,就是建立socket通信,切换不通端口,通过connect函数,如果成功则代表端口开发者,否则端口关闭. 所有需要多socket程序熟悉,本内容是在window环境下 ...

  2. vuex的实用知识点

    本文系统介绍vuex的全部内容 为什么用vuex 组件通信知道吧,相信很多同学,刚学的时候很难懂,实时上在实际应用中,大型项目如果使用最原始的组件通信会非常的麻烦,主要体现在多层嵌套的组件之间的通信, ...

  3. NBU客户端备份失败,报错error 48 client hostname could not be found

    今天在做备份时发现了这个报错.经过ping, nslookup, bpclntcmd命令检查没有发现连接或域名解析存在问题. 参考文档http://www.symantec.com/docs/TECH ...

  4. enable or disable Oracle block change tracking

    Oracle的block change tracking用于记录上次备份以来改变过的block信息,因此打开block change tracking可以大大加快增量备份的速度. 1. Enable ...

  5. oracle——基础知识(二)未完

    1.select 查询 单独的一条 select 语句 可以一次查询多条记录:但是在 pl/sql 块中,select语句只能 使用INTO子句:必须并且只能返回一行 2.EXECUTE IMMEDI ...

  6. x264的一些参数设置对编码效率的影响

    i_luma_deadzone[0]和i_luma_deadzone[1]分别对应inter和intra, 取值范围1~32,测试可以得知,这连个参数的调整可以对数据量有很大影响,值越大数据量相应越少 ...

  7. mysql show status 参数解析

    状态名 作用域 详细解释 Aborted_clients Global 由于客户端没有正确关闭连接导致客户端终止而中断的连接数 Aborted_connects Global 试图连接到MySQL服务 ...

  8. python爬虫--常见错误

    1)socket.error: [Errno 10054] ython socket.error: [Errno 10054] 远程主机强迫关闭了一个现有的连接.因为对一个网站大量的使用urlopen ...

  9. TextView 点击拨打电话

    点击TextView,拨打电话 TextView属性:android:autoLink="phone" 需要配置文件中的属性 <uses-permission android ...

  10. WebView三个方法区别(解决乱码问题)

    最近使用WebView加载中文网页的时候出现乱码问题,网上整理下基本解决方法: 其实我发现这不管是在线还是离线显示都可以使用LoadUrl方法!联网时好像是默认utf-8,离线读取本地时需要设置默认编 ...