用button实现垂直水平居中对齐 http://www.baidufe.com/item/113ce1894da2b5203669.html

“今天同事在群里分享了一个特牛叉的前端小技巧:用button实现垂直水平居中对齐。

这个简直太强悍了,代码很简单,大概就是这个样子:

这个button的小技巧,值得收藏。

<style type="text/css">
button {
height:200px;
width:300px;
background: none;
border: 1px solid #ccc;
}
</style>
<button><img src="http://static.baidufe.com/www/img/logo.png" /></button>

ref:http://jsfiddle.net/peterhry/wJ35V/ ”

a[target='_blank']{cursor:alias;}

::-webkit-scrollbar{-webkit-appearance:none;width:7px}
::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgba(0,0,0,0.5);-webkit-box-shadow:0 0 1px rgba(255,255,255,0.5)}

CSS 奇技淫巧的更多相关文章

  1. 10 个 GitHub 上超火的 CSS 奇技淫巧项目,找到写 CSS 的灵感!

    大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧

  2. CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框

    本文将通过一个实际的业务需求,讲解如何实现 极端场景下文字加粗加边框效果 文字多重边框的效果 需求背景 - 文字的二次加粗 今天遇到这样一个有意思的问题: 在文字展示的时候,利用了 font-weig ...

  3. CSS 奇技淫巧十八招

    http://www.tuicool.com/articles/VZneI3   開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是我個人覺得對初學者來說很難從 ...

  4. css奇技淫巧-色彩渐变与动态渐变

    来源 css渐变 CSS 中设置的渐变是 gradient 数据类型,它是一种特别的image数据类型.使用background-image设置,可叠加设置多个: CSS3 定义了两种类型的渐变(gr ...

  5. css奇技淫巧—border-radius

    官方介绍: 浏览器支持:IE9+, Firefox 4+, Chrome, Safari 5+,和Opera支持border-radius属性. border-radius 属性是一个最多可指定四个 ...

  6. css奇技淫巧—box-shadow与outline绘制多重边框效果

    css语法: box-shadow: h-shadow v-shadow blur spread color inset; 注释:box-shadow 向框添加一个或多个阴影.该属性是由逗号分隔的阴影 ...

  7. CSS 奇技淫巧:动态高度过渡动画

    这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了? 伪代码大概是这样: { height: unset; transition: all 0.3s linear; ...

  8. CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果

    本文将介绍一个小技巧,通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果. 起因 一日,一群友私聊问我.如何使用 CSS 实现下述效果,一个文字的波浪效果: 我当时想都没想,就回 ...

  9. CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果

    本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow(),实现对 HTML 元素及 SVG 元素的部分添加阴影效果,以实现一种酷炫的光影效果,用于各种不同的场景之中.通过本文,你 ...

随机推荐

  1. jQuery——map()函数以及它的java实现

    map()函数小简单介绍 map()函数一直都是我觉得比較有用的函数之中的一个,为什么这么说呢? 先来考虑一下.你是否碰到过下面场景:须要遍历一组对象取出每一个对象的某个属性(比方id)而且用分隔符隔 ...

  2. 开源TT框架上的日志类

    public class Logger { /** * log tag */ private String tagName = "MoGuLogger";// tag name / ...

  3. bzoj2734【HNOI2012】集合选数

    2734: [HNOI2012]集合选数 Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 831  Solved: 487 [Submit][Stat ...

  4. ORA-1157错误解决

    一.错误描述 ORA-1157, "cannot identify/lock data file %s - see DBWR trace file" 引起的原因: 因为数据文件已经 ...

  5. window如何在命令行关掉端口

    欢迎加入前端交流群来py:749539640   进入cmd netstat -ano | findstr :yourPortNumber taskkill /PID typeyourPIDhere ...

  6. [JZOJ 5909] [NOIP2018模拟10.16] 跑商(paoshang) 解题报告 (圆方树)

    题目链接: https://jzoj.net/senior/#contest/show/2529/2 题目: 题目背景:尊者神高达很穷,所以他需要跑商来赚钱题目描述:基三的地图可以看做 n 个城市,m ...

  7. C++如何调用C#编写的 DLL

    由于C#编绎出来的DLL不是计算机所能直接识别的二进制指令码,需要CLS进行再解释,说到这,我想有些朋友应该知道C#项目需要引用C++编写的DLL时,可以直接引用DLLMPORT来实现调用,而反向的话 ...

  8. 亿财道APP赚钱攻略,亿财道,一个看广告年入36万的APP

            亿财道(http://etway.net/),一款看广告(传单)赚钱的软件,这是一项革新的广告产品,代替了以往的纸质传单.在商家节约成本的同时,还给阅读者佣金,推广也有相应提成比例. ...

  9. Android官方培训课程中文版(v0.9.7)

    Android官方培训课程中文版(v0.9.7) Google Android团队在2012年的时候开设了Android Training板块 - http://developer.android.c ...

  10. SPOJ 1029 Matrix Summation【 二维树状数组 】

    题意:二维树状数组,更改值的时候有一点不一样, 是将a[x][y]设置为一个值,所以add的时候要将它和以前的值作差一下 #include<iostream> #include<cs ...