::-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>
