基本css拼图形
关闭按钮:
<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拼图形的更多相关文章
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- 用css绘制图形
巧用css的border-radius属性,也能绘制出好看的图形 html部分 <!DOCTYPE html><html> <head> <meta char ...
- CSS制作图形速查表
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
- 【转】CSS制作图形速查表-存档
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...
- CSS图形基础:纯CSS绘制图形
为了在页面中利用CSS3绘制图形,在页面中定义 <div class="container"> <div class="shape"> ...
- CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- css画图形
博客: 史上最强大的40多个纯cs图形 问题:看了上面的博客思考简单的三角行是怎么形成的? #triangle-up { width: 0; height: 0; border-left: 50px ...
- CSS奇思妙想图形(心形、气泡三角形、切角、梯形、饼图等)
今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...
- CSS 不规则图形绘制
基础技能1 - 神奇的border 我们先来画一个长方形: .Rectangle { height: 100px; width: 200px; background: darkgray; border ...
随机推荐
- Linux打包下载命令
语法:tar [主选项+辅选项] 文件或者目录使用该命令时,主选项是必须要有的,它告诉tar要做什么事情,辅选项是辅助使用的,可以选用. 主选项: c 创建新的档案文件.如果用户想备份一个目录或是一些 ...
- OpenGL渲染流水线
其实OpenGL的流水线,对我学习来说只能算是一个概念性的东西.毕竟OpenGL也在发展,流水线也不会是一成不变的. 不过理解流水线的过程,重点在于理解每一步的作用,进而可以如何衔接起来,完成整个绘制 ...
- Shell编程进阶 2.0 shell中断继续退出
break continue exit break 结束本次for循环 写个for循环脚本 vim for2.sh #!/bin/bash ## 5` do echo $i ] then b ...
- LAMP 3.2 mysql登陆
mysql 服务启动时,不仅会监听 IP:Port,还会监听一个 socket,我们安装的 mysql 是监听在/tmp/mysql.sock.如果 php 是在本地,那么 php 和 mysql 通 ...
- DAY17-认证系统
COOKIE 与 SESSION 概念 cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生. cookie ...
- Ajax笔记(二)
JSON基本概念: JSON:javaScript对象表示法(JavaScript Object Notation) JSON是存储和交换文本信息的语法,类似XML.它采用键值对的方式来组织,易于人们 ...
- Replace Pioneer注册方法
Replace Pioneer注册方法 Replace Pioneer过期后,会弹出一个注册(Registration)窗口,其中有一个试用选项(Trial License),点击Trial Lice ...
- ActionBarActivity的使用注意事项
1.调用getActionbar()方法返回为空的解决方法 此activity是设计来支持低版本系统用actionbar的,低版本没有getActionbar() 需要使用 getSupportAct ...
- [转]PHP 面试问哪些问题可以比较准确的反映出应聘者的开发水平?
基础题 场景: 你入职了一家新公司. 上班第一天,接待人给你安排好了座位,然后拉过来一台没拆封的新电脑. 你把电脑连接好之后,按下电源.... 好吧,这真是一台新电脑,里边竟然内置了个DOS系统!! ...
- Cocos2d-x 网络编程
主要介绍内容:Http协议,Socket协议,webSocket协议, Cocos2d-x中的相关类和方法 1 Http协议 HTTP协议也叫超文本传输协议.是互联网广泛使用的通信协议,常用于B/S架 ...