多栏CSS3
使用css3来创建多栏，它可以自适应网页，不兼容IE
#columns-3 {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 12px;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8cc;
}
用CSS包裹内容很长的URL和文本
这个代码片段通过保证文本的包裹元素宽度适应内容的宽度，能够避免很长的文本超出内容区域。
pre {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
用css3创造3D文字
text-shadow属性能帮助你只用CSS创造3D文字。·
p.threeD{
text-shadow:
-1px 1px 0 #ddd,
-2px 2px 0 #c8c8c8,
-3px 3px 0 #ccc,
-4px 4px 0 #b8b8b8,
-4px 4px 0 #bbb,
0px 1px 1px rgba(0,0,0,.4),
0px 2px 2px rgba(0,0,0,.3),
-1px 3px 3px rgba(0,0,0,.2),
-1px 5px 5px rgba(0,0,0,.1),
-2px 8px 8px rgba(0,0,0,.1),
-2px 13px 13px rgba(0,0,0,.1);
}
IEcss hack
IE6：_
IE6/7： *
IE7/Firefox：!important
IE7：*+
IE6/7/8：\9
IE8：\0
safari : select{ [;line-height: 36px;] }
条件hack
IE7以下版本：<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
IE7：<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
IE8：<!--[if IE 8]> <html class="no-js lt-ie9"><![endif]-->
IE8以上：<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->兼容性
3D效果的按钮
以前要想制作带有3D效果，并且点击下去还会变化的按钮，就得用图片替换的方法，现在CSS就可以了：
a{
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
字符方面的选择器
p:first-letter { ... }
设置对象内的第一个字符的样式表属性。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。
当你想加强每一段中的第一个字符时，这个CSS属性特别有用。
比如，段落首字下沉，
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}
p:first-line { ... }
设置对象内的第一行的样式表属性。
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象的height或width属性，或者设定position属性为absolute，或者设定display属性为block。
这个和first-letter类似的用法，不同的是，这个指定的第一行。
SVG图片
没有理由不使用 SVG 图标：
.logo {
background: url("logo.svg");
}
SVG 在所有分辨率下都可以良好缩放，并且支持所有 IE9 以后的浏览器，丢掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。
注意： 针对仅有图标的按钮，如果 SVG 没有加载成功的话，以下样式对无障碍有所帮助：
.no-svg .icon-only:after {
content: attr(aria-label);
}
通配符选择器
* + * {
margin-top: 1.5em;
}
通用选择器 (*) 和 相邻兄弟选择器 (+) 一起使用，效果非凡
在此示例中，文档流中的所有的相邻兄弟元素将都将设置 margin-top: 1.5em 的样式。
创造格子等宽的表格
table-layout: fixed 可以让每个格子保持等宽：
.calendar {
table-layout: fixed;
}
利用 Flexbox 去除多余的外边距
与其使用 nth-， first-， 和 last-child 去除列之间多余的间隙，不如使用 flexbox 的 space-between 属性：
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
列之间的间隙总是均匀相等。
利用属性选择器来选择空链接
当 '< a>' 元素没有文本内容，但有 href 属性的时候，显示它的 href 属性：
a[href^="http"]:empty::before {
content: attr(href);
}
相当简便。
为破碎图象定义样式
只要一点CSS就可以美化破碎的图象
img {
display: block;
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
height: auto;
line-height: 2;
position: relative;
text-align: center;
width: 100%;
}
以添加伪元素的法则来显示用户信息和URL的引用：
img:before {
content: "We're sorry, the image below is broken :(";
display: block;
margin-bottom: 10px;
}
img:after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;
}
为更好的移动体验，为表单元素设置字体大小
当触发<select>的下拉列表时，为了避免表单元素在移动浏览器（IOS Safari 等等）上的缩放，加上font-size：
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 16px;
}
跨浏览器的不透明度
虽然CSS3标准包括Opacity属性，但不是每个浏览器都支持它跨浏览器的透明度，这里的CSS技巧
transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
// 或者
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
翻转图片
翻转图像随着CSS3的transform越来越实用，不需要重新加载图片，就可以实现一个图片的旋转。常见的是一个三角型效果，我们想让他在不同状态展示不同的风格：
img.flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
黑白图像
img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
模糊文本
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
禁用鼠标事件
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。
.disabled { pointer-events: none; }
文本渐变
h2[data-text] {
position: relative;
}
h2[data-text]::after {
content: attr(data-text);
z-index: 10;
color: #e3e3e3;
position: absolute;
top: 0;
left: 0;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}
使用属性选择器用于空链接
当a元素没有文本值，但 href 属性有链接的时候显示链接：
a[href^="http"]:empty::before {
content: attr(href);
}
表格单元格等宽
表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：
.calendar {
table-layout: fixed;
}
页面顶部阴影
下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果：
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
