H5移动端网页头部定义：
<meta name="format-detection" content="address=no;email=no;telphone=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
去掉input输入框默认的黄色背景：
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(0, 0, 0) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
内阴影：
-webkit-box-shadow: inset 0 3px 15px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 15px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 15px rgba(0, 0, 0, 0.125);
四周阴影：
box-shadow: 0 0 10px #777;
-webkit-box-shadow: 0 0 10px #777;
-moz-box-shadow: 0 0 10px #777;
左上阴影：
box-shadow: -10px -10px #777;
-webkit-box-shadow: -10px -10px #777;
-moz-box-shadow: -10px -10px #777;
右下阴影：
box-shadow: 5px 5px 5px #777;
-webkit-box-shadow: 5px 5px 5px #777;
-moz-box-shadow: 5px 5px 5px #777;
右下阴影：
box-shadow: 5px 5px 5px 5px #777;
-webkit-box-shadow: 5px 5px 5px 5px #777;
-moz-box-shadow: 5px 5px 5px 5px #777;
右边阴影：
box-shadow:1px 0 1px #173c67;
-webkit-box-shadow: 1px 0 1px #173c67;
-moz-box-shadow:1px 0 1px #173c67;
下阴影：
box-shadow: 0px 2px 2px #ccc;
-webkit-box-shadow: 0px 2px 2px #ccc;
-moz-box-shadow: 0px 2px 2px #ccc;
input{
transition:all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
border:#35a5e5 1px solid;
border-radius:3px;
outline:none;
}
input:focus{
box-shadow:0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow:0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow:0 0 5px rgba(81, 203, 238, 1);
}
textarea{transition:all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
border:#35a5e5 1px solid;
border-radius:3px;
outline:none;}
textarea:focus{box-shadow:0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow:0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow:0 0 5px rgba(81, 203, 238, 1);}
内容垂直居中
相对于内容在水平位置，内容在垂直方向是不好把控的，尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。
.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}
CSS3的全屏背景效果
如果你想使用大图片作为网站背景，并希望在页面滚动时保持固定，该代码片段非常适合，不过这段代码无法在旧的浏览器上工作。
html {
background: url('images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
鼠标划过淡入淡出效果
a{ -webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
a:hover{
opacity:0.7;
filter: alpha(opacity=0.7);
}
圆角代码
1.四个角全部是圆角的代码：
#container {
-webkit-border-radius: 4px 3px 6px 10px;
-moz-border-radius: 4px 3px 6px 10px;
-o-border-radius: 4px 3px 6px 10px;
border-radius: 4px 3px 6px 10px;
}
2.给每个角分别设置圆角代码：
#container {
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 10px;
}
微信扫一扫，打赏作者吧～