基本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 ...
随机推荐
- SQL基础(3)
SQL FULL JOIN (1)SQL FULL JOIN关键字 只要其中某个表存在匹配,FULL JOIN 关键字就会返回行. (2)语法 SELECT column_name(s) FROM t ...
- 类型:Ajax;问题:ajax调用ashx参数获取不到;结果:ashx文件获取$.ajax()方法发送的数据
ashx文件获取$.ajax()方法发送的数据 今天在使用Jquery的ajax方法发送请求时,发现在后台中使用ashx文件无法接收到ajax方法中传递的参数,上网查了一下原因后发现了问题所在,原来是 ...
- 【知识碎片】Net项目经验积累
后台传JSON到js报错 MVC控制器传json到前端JS"变为" 导致JS报错 重点是一定要在@ViewBag.typeJson两边加双引号,并且后台用 编码前台解码 ViewB ...
- Maven构建war项目添加版本号
上午接到一个新的需求,项目的war包打包之后,放在了阿里的OSS上,供其他项目下载更新时使用,但是只有一个项目名,也就是pom的artifactId,预期的结果是要加上一个版本号,能区分出是什么时候打 ...
- 什么是Scatter/Gather?
scatter/gather指的在多个缓冲区上实现一个简单的I/O操作,比如从通道中读取数据到多个缓冲区,或从多个缓冲区中写入数据到通道: scatter(分散):指的是从通道中读取数据分散到多个缓冲 ...
- [Python Study Notes]堆叠柱状图绘制
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...
- 每天一道算法题(12)——和为n的连续正数序列或者随机数
题目:输入一个正数n,输出所有和为n 连续正数序列.例如输入15,由于1+2+3+4+5=4+5+6=7+8=15,所以输出3 个连续序列1-5.4-6 和7-8. 1.思路 尊崇以下策略: (1)对 ...
- Linux_oracle命令大全(转)
Linux_oracle命令大全 一,启动 1.#su - oracle 切换到oracle用户且切换到它的环境 2.$lsnrctl status 查看 ...
- HTML5 学习指导
HTML 语义 HTML5为我们提供了很多旨在精确描述内容的语义元素.确保你可以从它丰富的词汇中获益. <!-- bad --> <div id="main"&g ...
- day36-hibernate检索和优化 01-上次课内容回顾
clear():直接清空一级缓存的所有对象.evict(Object obj):清空一个对象.flush():控制你的刷出的时机.refresh(Object obj);将你的数据查出来把一级缓存覆盖 ...