关于css几个很有用的小技巧

    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var demo_ol = $('.demo_ol li')
            demo_ol.on('click', 'a', function () {
                $(this).next('div').toggle('slow')
            })
            $(window).resize(function() {
                conDivWH()
            })
        })
        function conDivWH(){
            var conDiv = $('.container div'),
                conDivWidth = conDiv.width(),
                conDivHeight = conDiv.height()
            conDiv.html(conDivWidth + ' px' + ' * ' + conDivHeight + ' px')
        }
    </script>


    <style>
        body {
            line-height: 1;
        }


        body:before {
            content: "";
            position: fixed;
            top: -10px;
            left: 0;
            width: 100%;
            height: 10px;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .8);
            -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .8);
            box-shadow: 0 0 10px rgba(0, 0, 0, .8);
            z-index: 100;
        }


        img.desaturate {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
        }


        img {
            font-family: Helvetica, Arial, sans-serif;
            font-weight: 300;
            height: auto;
            position: relative;
            text-align: center;
        }


        img:before {
            content: " We're sorry, the image below is broken :( ";
        }


        img:after {
            content: "(url: " attr(src) ")";
            font-size: 12px;
        }


        .slider ul {
            max-height: 10px;
            overflow: hidden;
        }


        .slider:hover ul {
            max-height: 1000px;
            transition: .5s ease;
        }


        .list {
            display: flex;
            justify-content: space-between;
        }


        .list .person {
            flex-basis: 19%;
            height: 50px;
            background-color: firebrick;
        }


        a[href^="http"]:empty::before {  /* [attribute^=value] 选择器匹配属性值以指定值开头的每个元素 */
            content: attr(href);
        }


        .container {
            height: 0;
            padding-bottom: 20%;
            position: relative;
        }


        .container div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 2px dashed #ddd;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            display: -webkit-flex;
            display: flex;
            text-align: center;
        }


        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)));
        }


        .blur {
            color: transparent;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
            font-size: 25px;
        }


        /*
        .demo_ol li:after{
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height: 30px;
            line-height: 30px;
            content: attr(data-value);
        }*/


        .demo_ol li{
            margin: 10px auto;
        }


        .demo_ol li > a {
            display: block;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }


        .demo_ol li > div {
            display: none;
        }


        pre {
            margin: 15px 0;
            font-size: 12px;
            line-height: 18px;
            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
            padding: 10px 12px;
            border: 1px solid #ccc;
            border-left-width: 4px;
            background-color: #fefefe;
            box-shadow: 0 0 4px #eee;
            -webkit-text-size-adjust: none;
            color: #657b83;
            max-height: 35em;
            overflow: auto;
        }


        h3 {
            font-size: 20px;
            font-weight: normal;
        }
    </style>
</head>
<body>


<ol class="demo_ol">
    <li><a>页面顶部阴影</a>
        <div>
            <p>下面这个简单的 css3 代码片段可以给网页加上漂亮的顶部阴影效果：</p>
<pre>
body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.8);
    box-shadow: 0 0 10px rgba(0,0,0,.8);
    z-index: 100;
}
</pre>
        </div>
    </li>
    <li><a>给 body 添加行高</a>


        <div>
            <p>你不需要分别添加 line-height 到每个 p,h 标记等。只要添加到 body 即可：这样文本元素就可以很容易地从 body 继承。</p>
<pre>
body {
    line-height: 1;   /* 根据该元素本身字体大小倍数设置行高，比如该元素字体是15px，行高就是15px; */
}
</pre>
            <div style="font-size: 30px;">
                <p>
                    这段字号设置为 30px
                </p>
                <p>
                    这段字号设置为 30px
                </p>
            </div>
            <div style="font-size: 12px;">
                <p>
                    这段字号设置为 12px
                </p>
                <p>
                    这段字号设置为 12px
                </p>
            </div>
            <div>
                <p>
                    这段字号设置为默认
                </p>
                <p>
                    这段字号设置为默认
                </p>
            </div>
        </div>
    </li>
    <li><a>所有一切都垂直居中</a>


        <div>
            <p>要将所有元素垂直居中，太简单了：</p>
<pre>
html, body {
    height: 100%;
    margin: 0;
}


body {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
}
</pre>
            <p>注意：在IE11中要小心 flexbox。</p>
        </div>
    </li>
    <li><a>黑白图像</a>


        <div>
            <p>这段代码会让你的彩色照片显示为黑白照片。</p>
<pre>
img.desaturate {
    filter: grayscale(100%);  /* filter - 修改图片的颜色为黑白 (100% 灰度): */
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}
</pre>
            <img src="1.jpg"/><img class="desaturate" src="1.jpg"/>
        </div>
    </li>
    <li><a>为破碎图象定义样式</a>


        <div>
            <p>只要一点CSS就可以美化破碎的图象：</p>
<pre>
img {                 /* img的src请求失败的时候,会触发img.error事件 */
    display: block;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 300;
    height: auto;
    line-height: 2;
    position: relative;
    text-align: center;
    width: 100%;
}
</pre>
            <p>以添加伪元素的法则来显示使用者信息和虚线图像URL的引用：</p>
<pre>
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;
}
</pre>
            <img src="../1.jpg"/>
        </div>
    </li>
    <li><a>使用 :not() 在菜单上应用/取消应用边框</a>


        <div>
            <p>先给每个菜单项添加边框，然后再除去最后一个</p>
<pre>
/* add border */
.nav li {
    border-right: 1px solid #666;
}


// remove border /
.nav li:last-child {
    border-right: none;
}
</pre>
            <p>可以直接使用 :not() 伪类来应用元素：这样代码就干净，易读，易于理解了。</p>
<pre>
.nav li:not(:last-child) {
    border-right: 1px solid #666;
}
</pre>
            <p>当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：</p>
<pre>
.nav li:first-child ~ li {
    border-left: 1px solid #666;
}
</pre>
        </div>
    </li>
    <li><a>逗号分隔的列表</a>


        <div>
            <p>让HTML列表项看上去像一个真正的，用逗号分隔的列表：</p>
<pre>
ul > li:not(:last-child)::after {
    content: ",";
}
</pre>
            <p>对最后一个列表项使用 :not() 伪类。</p>
        </div>
    </li>
    <li><a>使用负的 nth-child 选择项目</a>


        <div>
            <p>在CSS中使用负的 nth-child 选择项目1到项目n。</p>
<pre>
li {
    display: none;
}


/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
    display: block;
}
</pre>
        </div>
    </li>
    <li><a>使用“形似猫头鹰”的选择器</a>


        <div>
            <p>这个名字可能比较陌生，不过全局选择器 (*) 和 相邻兄弟选择器 (+) 一起使用，效果非凡：</p>
<pre>
* + * {
    margin-top: 1.5em;
}
</pre>
            <p>在此示例中，遵循其他元素的文档流中的所有元素将都接收上边距 margin-top: 1.5em 的样式。</p>
        </div>
    </li>
    <li><a>对纯 CSS 滑块使用 max-height</a>
        <div>
            <p>使用 max-height 和溢出隐藏来实现只有CSS的滑块：</p>
<pre>
.slider ul {
    max-height: 0;
    overflow: hidden;
}


.slider:hover ul {
    max-height: 1000px;
    transition: .3s ease;
}
</pre>
        </div>
    </li>
    <li><a>继承 box-sizing</a>
        <div>
            <p>让 box-sizing 继承 html：</p>
<pre>
html {
    box-sizing: border-box;
}


*, *:before, *:after {
    box-sizing: inherit;
}
</pre>
        </div>
    </li>
    <li><a>创造格子等宽的表格</a>
        <div>
            <p>table-layout: fixed 可以让每个格子保持等宽：</p>
<pre>
.calendar {
    table-layout: fixed;
}
</pre>
            <table cellspacing="0">
                <tr>
                    <td>1</td>
                </tr>
            </table>
        </div>
    </li>
    <li><a>利用 Flexbox 去除多余的外边距</a>
        <div>
            <p>与其使用 nth-，first-，和 last-child 去除列之间多余的间隙，不如使用 flexbox 的 space-between 属性：</p>
<pre>
.list {
    display: flex;
    justify-content: space-between; /* justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 space-between 项目位于各行之间留有空白的容器内。*/
}


.list .person {
    flex-basis: 19%;
}
</pre>
            <p>列之间的间隙相等，并且首尾没有多余的间隙。</p>
            <div class="list">
                <div class="person"></div>
                <div class="person"></div>
                <div class="person"></div>
                <div class="person"></div>
                <div class="person"></div>
            </div>
        </div>
    </li>
    <li><a>使用属性选择器用于空链接</a>
        <div>
            <p>当a元素没有文本值，但 href 属性有链接的时候显示链接：</p>
<pre>
a[href^="http"]:empty::before {
    content: attr(href);
}
</pre>
            <a href="http://www.baidu.com"></a>
        </div>
    </li>
    <li><a>内在比例盒</a>
        <div>
            <p>要创建具有内在比例盒子，所有你需要做的就是应用顶部或底部填充，从一个div：</p>
<pre>
.container {
    height: 0;
    padding-bottom: 20%;
    position: relative;
}


.container div {
    border: 2px dashed #ddd;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
</pre>
            <p>使用20%的填充使得框等于其宽度的20%的高度。不管视口的宽度，子元素的div将保持其宽高比（100% / 20% = 5:1）。</p>
            <div class="container">
                <div></div>
            </div>
        </div>
    </li>
    <li><a>CSS 写出三角形</a>
        <div>
            <p>利用 border 来写三角形代码，并且兼容 IE6.</p>
<pre>
/* create an arrow that points up */
div.arrow-up {
    width:0;
    height:0;
    border-left:5px solid transparent;  /* left arrow slant */
    border-right:5px solid transparent; /* right arrow slant */
    border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
    font-size:0;
    line-height:0;
}


/* create an arrow that points down */
div.arrow-down {
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #2f2f2f;
    font-size:0;
    line-height:0;
}


/* create an arrow that points left */
div.arrow-left {
    width:0;
    height:0;
    border-bottom:5px solid transparent;  /* left arrow slant */
    border-top:5px solid transparent;     /* right arrow slant */
    border-right:5px solid #2f2f2f;       /* bottom, add background color here */
    font-size:0;
    line-height:0;
}


/* create an arrow that points right */
div.arrow-right {
    width:0;
    height:0;
    border-bottom:5px solid transparent;  /* left arrow slant */
    border-top:5px solid transparent;     /* right arrow slant */
    border-left:5px solid #2f2f2f;        /* bottom, add background color here */
    font-size:0;
    line-height:0;
}
</pre>
        </div>
    </li>
    <li><a>CSS3 calc() 的使用</a>
        <div>
            <p>calc() 用法类似于函数，能够给元素设置动态的值：</p>
<pre>
/* basic calc */
.simpleBlock {
    width: calc(100% - 100px);
}


/* calc in calc */
.complexBlock {
    width: calc(100% - 50% / 3);
    padding: 5px calc(3% - 2px);
    margin-left: calc(10% + 10px);
}
</pre>
        </div>
    </li>
    <li><a>文本渐变</a>
        <div>
            <p>文本渐变效果很流行，使用 CSS3 能够很简单就实现：</p>
<pre>
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)));
}
</pre>
            <h2 data-text="20个很有用的CSS技巧">20个很有用的CSS技巧</h2>
        </div>
    </li>
    <li><a>禁用鼠标事件</a>
        <div>
            <p>CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。</p>
<pre>
.disabled { pointer-events: none; }
</pre>
        </div>
    </li>
    <li><a>模糊文本</a>
        <div>
            <p>简单但很漂亮的文本模糊效果，简单又好看！</p>
<pre>
.blur {
    color: transparent;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
</pre>
            <p class="blur">blur</p>
        </div>
    </li>
</ol>