css3 note

作者：gcbeen

日期：2013年09月22日

    div {
      transform: rotate(30deg);
    }

你好。

一、css3边框

css3圆角边框（border-radius）

    div {
      border: 2px solid;
      border-radius: 25px;
      -moz-border-radius: 25px; /* old Firefox */
    }

圆角

css3边框阴影

    div {
      box-shadow: 10px 10px 5px #888888;
    }

二、css3 background-size属性

调整背景图片大小

    div {
      background: url(bg_flower.gif);
      -moz-background-size: 63px 100px;
      background-size: 63px 100px;
      background-repeat: no-repeat;
    }

缩小图片

原始图片： Flower

对背景图片进行拉伸

    div {
      background: url(bg_flower.gif);
      -moz-background-size: 40% 100%; /* old Firefox */
      background-size: 40% 100%;
      background-repeat: norepeat;
    }

背景图片的拉伸

css3 background-origin属性规定边框的定位区域（content-box, padding-box, border-box）。

    div {
      background: url(bg_flower.gif);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      -webkit-background-origin: content-box; /* Safari */
      background-origin: content-box;
    }

定位border box区域定位border box区域定位border box区域定位border box区域定位border box区域定位border box区域定位border box区域定位border box区域定位border box区域定位border box区域

定位content box区域定位content box区域定位content box区域定位content box区域定位content box区域定位content box区域定位content box区域定位content box区域定位content box区域定位content box区域

css3多重背景图片

    body {
      background-image: url(bg_flower.gif), url(bg_flower_2.gif);
    }

css3文本效果

css3文本阴影

    h1 {
      text-shadow: 5px 5px 5px #FF0000;
    }

css3自动换行

    p {
      word-wrap: break-word;
    }

css3 1