跳到主要内容

小技巧

浏览器顶部阴影

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

创建渐变文字

p {
font-size:80px;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Media Query CSS

/* PC 宽屏样式 */
/* iPad 及一下,所有小于不等于960宽度的平板电脑 */
@media only screen and(max-width: 959px){}

/* 仅iPad竖版,所有小于不等于960px的平板电脑的竖版*/
@media only screen and (min-width: 768) and (max-width: 959px) {}

/*iPhone及一下*/
@media only screen and (max-width: 767px) {}

/*仅iPhone横版,包括某些平板电脑的竖版*/
@media only screen and (min-width: 480) and (max-width: 767px) {}

/*仅iPhone4竖版*/
@media only screen and (max-width: 479px) {}

reset.css
body {
font-family: tahoma,arial,\5b8b\4f53,sans-serif;
}
html {
-webkit-text-size-adjust: 100%;
}
//
IOS: 华文细黑+Helvetica
Android: 文泉驿微米黑+Droid Sans

如何将网页CSS背景图高斯模糊且全屏显示

.bg {
background-image:url(scale.jpg);
-moz-background-size: 100% 100%; /* Firefox 3.6 */
-o-background-size: 100% 100%;/* Opera 9.5 */
-webkit-background-size: 100% 100%;/* Safari 3.0 */
background-size: 100% 100%;/* Firefox 4.0 and other CSS3-compliant browsers */
-moz-border-image: url(scale.jpg) 0; /* Firefox 3.5 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scale.jpg', sizingMethod='scale');/* for < ie9 */
}

火焰字

.font {
text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;
}