偏门却又实用的 CSS 样式

::-Webkit-Input-Placeholder

input 的 H5 placeholder 属性，很好用，但不能直接改这个文字颜色，所以目前的解决方法就是用::input-placeholder属性来改。

配合 opacity 属性使用效果更好

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Inpput_Placeholder（输入框）</title>

    <style>

        input{

            color: red;

        }

        ::-webkit-input-placeholder{

            color: blueviolet;

            opacity: 0.5;

          }

        ::-moz-placeholder{

            color: blueviolet;

            opacity: 0.5;

        }

        :-moz-placeholder{

            color: blueviolet;

            opacity: 0.5;

        }

        :-ms-input-placeholder{

            color: blueviolet;

            opacity: 0.5;

        }

    </style>

</head>

<body>

登录：<br>

<input type="text" placeholder="请输入账号"><br>

<input type="text" placeholder="请输入密码">

</body>

</html>

Outline 当点击Input元素时显示的当前状态线（外发光）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Outline 外发光</title>

    <style>

        input{

            width:400px;

            height:100px;

            font-size: 20px;

        }

        .txt_one{

            outline: none;

        }

        .txt_two{

            outline:none;

            box-shadow: green 1px 1px 30px 5px;

        }

        p{

            width:500px;

            height: 200px;

            border: 1px solid red;

            margin: 30px auto;

        }

    </style>

</head>

<body>

<input type="text" class="txt_one" placeholder="请点击这三个输入框比较效果">

<input type="text" class="txt_two" placeholder="请点击这三个输入框比较效果">

<input type="text" class="txt_three" placeholder="请点击这三个输入框比较效果">

<br>

<p>

    边框阴影（box-shadow）的基本语法：<br>

box-shadow：color  h-shadow  v-shadow blur spread  inset；<br>

color：阴影颜色 ------------ 可选 <br>

h-shadow ：水平偏移量 ----必选 <br>

v-shadow：垂直偏移量-----必选 <br>

blur：模糊距离 -------------可选 <br>

spread：阴影尺寸---------- 可选 <br>

inset：内阴影 --------------可选 <br>

</p>

</body>

</html>

Contenteditable 设置Element是否可编辑

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Contenteditable 设置Element（标签）可否编辑</title>

</head>

<body>

<p contenteditable="true">可编辑</p>

<span contenteditable="false">不可编辑</span>

</body>

</html>

Webkit-Playsinline

手机video 都可以在页面中播放，而不是全屏播放了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

用html5的video方式播放视频时，在ipad上是默认原来大小的，而在iphone上是默认全屏播放的。

HTML里video必须加上webkit-playsinline属性 <br>

<video id="video" controls="controls" webkit-playsinline="true" src="zaa47.mp4">

    <!--src是视频的路径-->

Your browser does not support HTML5 video.

</video>

</body>

</html>

Position: Absolute，让Margin有效的

设置left:0, right:0 就可以。原因是2边都是0不存在边距，element就可以得出距离，并居中。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Positon: Absolut （让Margin更有效）</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            border: 1px solid red;

            position: absolute;

            left: 0;

            top: 0;

            margin: 0 auto;

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>

这个太简单了，不发了。

使用 Clearfix 清楚浮动，解决父类高度崩塌。

.clearfix {

    zoom: 1;

}

.clearfix:after {/*http://www.w3school.com.cn/tiy/t.asp?f=css_sel_after*/

     visibility: hidden;

     display: block;

     font-size: 0;

     content: " ";

     clear: both;

     height: 0;

 }

这个不知道怎么说

User-Select 禁止用户选中文本

div {

    user-select: none; /* Standard syntax */

}

::-Webkit-Scrollbar-Thumb可以修改谷歌的滚动条样式，safari好像也可以

使用CSS Transforms 或者 Animations时可能会有页面闪烁的Bug

-webkit-backface-visibility: hidden;

-Webkit-Touch-Callout 禁止长按链接与图片弹出菜单

-webkit-touch-callout: none;

Transform-Style: Preserve-3d 让元素支持3d

div {

    -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */

    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */

    transform: rotateY(60deg);

    transform-style: preserve-3d;

}

Perspective 透视

这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。

.div-box {

    perspective: 400px;

}

Css实现不换行、自动换行、强制换行

//不换行

white-space:nowrap;

//自动换行

word-wrap: break-word;

word-break: normal; 

//强制换行

word-break:break-all;

常用的选择器 :Nth-Child() Selector

以下代码是选择父类下第一个子节点，p元素，建议学习这个样式属性的使用，很实用的。

p:nth-child(1) {

    ...

}

Css3 Linear-Gradient 线性渐变默认开始在top, 也可以自定义方向。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Css3 Linear-Gradient 线性渐变</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            border: 1px solid red;

            margin: 10px;

            float: left;

        }

        p{

            clear: both;

        }

        .txt1{

            background: linear-gradient(aqua,red);

        }

        .txt2{

            background: linear-gradient(aqua,black 50%,red);

        }

        .txt3{

            background: linear-gradient(0deg,aqua 20%,black 50%,red 80%);

        }

        .txt4{

            background: linear-gradient(45deg,aqua,black 50%,red);

        }

        .txt5{

            background: linear-gradient(to top right,aqua,black 50%,red)

        }

    </style>

</head>

<body>

<div class="txt1"></div>

<div class="txt2"></div>

<div class="txt3"></div>

<div class="txt4"></div>

<div class="txt5"></div>

<br>

<p><br>

    下述值用来表示渐变的方向，可以使用角度或者关键字来设置： <br>

angle：

用角度值指定渐变的方向（或角度）。 <br>

to left： <br>

设置渐变为从右到左。相当于: 270deg <br>

to right： <br>

设置渐变从左到右。相当于: 90deg <br>

to top： <br>

设置渐变从下到上。相当于: 0deg <br>

to bottom： <br>

设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。 <br>

color-stop 用于指定渐变的起止颜色： <br>

color：

指定颜色。 <br>

length：

用长度值指定起止色位置。不允许负值 <br>

percentage：

用百分比指定起止色位置。 <br>

</p>

</body>

</html>