Skip to main content

小技巧

浏览器顶部阴影​

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