60个CSS代码片段，前端的60个老大难问题！
<div class="articleBody"> CSS 中最具诱惑的一个功能是能添加动画效果，除了渐变，你可以给背景色、透明度、元素大小添加动画等。面对不断变化中的行业新趋势，越来越多的网站设计师和前端开发人员已开始全面使用 CSS3 属性，但是仍然有一些出色的 CSS2 代码片段和 CSS3 一起运行。coding-4570799_1280.jpg
而在本文收藏整理的这 60 个非常实用的 CSS 代码片段，我确信网站设计师和前端开发人员都会发现其中一些代码是有用的，也许能帮助我们解决生产环境中的遇到的那些老大难问题。
1、垂直对齐
如果你用 CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用 CSS3 的 Transform，可以很优雅的解决这个困惑：
.verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对Transform的支持是需要关注的，Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9.均支持该属性。2、伸展一个元素到窗口高度
在具体场景中，你可能想要将一个元素伸展到窗口高度，基本元素的调整只能调整容器的大小，因此要使一个元素伸展到窗口高度，我们需要伸展顶层元素：html 和 body:
html,body { height: 100%;}然后将 100% 应用到任何元素的高：
div { height: 100%;}3、基于文件格式使用不同的样式
为了更容易知道链接的目标，有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标，对不同的资源使用不同的图标或图片：a{ padding-right: 20px; background: url(external.gif) no-repeat center right;}/* emails */a{ padding-right: 20px; background: url(email.png) no-repeat center right;}/* pdfs */a{ padding-right: 20px; background: url(pdf.png) no-repeat center right;}看起来是这样的:http://jsfiddle.net/agusesetiyono/3sL1r0mw/light/4、创建跨浏览器的图像灰度
灰度有时看起来简约和优雅，能为网站呈现更深层次的色调。在示例中，我们将对一个 SVG 图像添加灰度过滤：
<svg xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter></svg>为了跨浏览器，会用到 filter 属性：
img { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */}5、背景渐变动画
CSS 中最具诱惑的一个功能是能添加动画效果，除了渐变，你可以给背景色、透明度、元素大小添加动画。目前，你不能为渐变添加动画，但下面的代码可能有帮助。它通过改变背景位置，让它看起来有动画效果。
button { background-image: linear-gradient(#5187c4, #1c2f45); background-size: auto 200%; background-position: 0 100%; transition: background-position 0.5s;}button:hover { background-position: 0 0;}效果在这里：http://jsfiddle.net/agusesetiyono/gw46dk27/1/light/6、CSS：表格列宽自适用
对于表格，当谈到调整列宽时，是比较痛苦的。然后，这里有一个可以使用的技巧：给 td 元素添加 white-space: nowrap; 能让文本正确的换行
td { white-space: nowrap;}查看效果：http://jsfiddle.net/agusesetiyono/1uotj8wv/3/light/7、只在一边或两边显示盒子阴影
如果你要一个盒阴影，试试这个技巧，能为任一边添加阴影。为了实现这个，首先定义一个有具体宽高的盒子，然后正确定位:after 伪类。实现底边阴影的代码如下：
.box-shadow { background-color: #FF8020; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%;}.box-shadow:after { content: ""; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000;}效果：http://jsfiddle.net/agusesetiyono/1kwhsfvo/light/8、包裹长文本
如果你碰到一个比自身容器长的文本，这个技巧对你很有用。在这个示例中，默认时，不管容器的宽度，文本都将水平填充。
简单的 CSS 代码就能在容器中调整文本：
pre { white-space: pre-line; word-wrap: break-word;}9、制造模糊文本
想要让文本模糊？可以使用 color 透明和 text-shadow 实现。
.blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}demo:http://jsfiddle.net/agusesetiyono/n5uh4s0j/light/10、用 CSS 动画实现省略号动画
这个片段将帮助你制造一个ellipsis的动画，对于简单的加载状态是很有用的，而不用去使用gif图像。.loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: "\2026"; /* ascii code for the ellipsis character */}@keyframes ellipsis { from { width: 2px; } to { width: 15px; }}
效果：
页:
[1]