目录

背景图像

假设一个品牌背景图

<div class="brand"></div>
<style>
  .brand {
    width: 800px;
    height: 200px;
    background-image: url(/img/default.jpg);
    background-repeat: no-repeat;
  }
</style>

为文字添加小图标

<style>
  h1.title {
    padding-left: 30px; // 为小图标留出空位
    background-image: url(/img/icon.png);
    background-repeat: no-repeat;
    background-position: left center; // 或者 0% 50%;
  }

  /* 为列表定义新样式 */
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  ul li {
    padding-left: 30px;
  }
  ul li.active {
    background: url(/img/active.gif) no repeat 0 50%;
  }
</style>

border-image 九分图法 为边框添加图片

感觉鸡肋,没用

border-image: url(borderimg.png) 70 repeat; /* 切割图片,生成边框的!*/
background-color: rgba(100, 120, 60, 0.5); /* 颜色透明度 */
background-image: linear-gradient(
  45deg,
  white,
  black,
  red
); /* 线性渐变 左下角到右上角的线性渐变*/

圆角

border-radius: 10px;
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */

盒阴影

为了做出立体感

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式:inset内阴影|默认外阴影];
阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
.box_shadow{  box-shadow:4px 2px 6px #333333; }
.box_shadow{  box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; } 各边不同阴影

不透明度

老旧的

.alert {
  background-color: #000;
  border-radius: 2em;
  opacity: 0.8;
  filter: alpha(opacit=80); // IE
}

新的

.alert {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 2em;
}

雪碧图

nav li a {
  display: block;
  height: 100px;
  weight: 100px;
  background-image: url(/img/default.jpg);
  background-repeat: no-repeat;
}

nav li.home a,
nav li.home a:link,
nav li.home a:visited {
  background-position: 0px 0px;
}

nav li.home a,
nav li.home a:link,
nav li.home a:visited {
  background-position: 0px -100px;
}

nav li.home a,
nav li.home a:link,
nav li.home a:visited {
  background-position: -100px 0px;
}

nav li.home a,
nav li.home a:link,
nav li.home a:visited {
  background-position: -100px -100px;
}

多个背景图片(未使用过)

background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
                  url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
                  url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;