Home >Web Front-end >HTML Tutorial >CSS3实用方法小记 2016.03.16_html/css_WEB-ITnose

CSS3实用方法小记 2016.03.16_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:17:101259browse

  1. 圆角边框:

    border-radius : 4px;
  2. box阴影:

    box-shadow : 5px 5px 3px #000 ; /* 参数分别为向右拓展距离,向下拓展距离,阴影宽度,颜色*/
  3. 背景图片大小:

    div{background:url(bg_flower.gif);-moz-background-size:63px 100px; /* 老版本的 Firefox */background-size:63px 100px;background-repeat:no-repeat;}
  4. 背景图片位置

    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, padding-box*/}
  5. 文本阴影

    text-shadow : 5px 5px 3px #000;  /*参数分别为向右拓展距离,向下拓展距离,阴影宽度,颜色 */
  6. 强制自动换行

    p {word-wrap:break-word;}
  7. 分列

    div{column-gap: 3px;    /* 列间间隔长度 */-moz-column-count:3;    /* Firefox */-webkit-column-count:3; /* Safari 和 Chrome */column-count:3;}

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn