• css3


    圆角边框

    border-radius

    边框阴影

    box-shadow: 10px 10px 5px #888888;

    图片边框  ie不支持  不推荐使用

    图片平铺

    -moz-border-image:url(/i/border.png) 30 30 round;    /* Old Firefox */
    -webkit-border-image:url(/i/border.png) 30 30 round;    /* Safari and Chrome */
    -o-border-image:url(/i/border.png) 30 30 round;        /* Opera */
    border-image:url(/i/border.png) 30 30 round;

    图片拉伸

    -moz-border-image:url(/i/border.png) 30 30 stretch;    /* Old Firefox */
    -webkit-border-image:url(/i/border.png) 30 30 stretch;    /* Safari and Chrome */
    -o-border-image:url(/i/border.png) 30 30 stretch;    /* Opera */
    border-image:url(/i/border.png) 30 30 stretch;

    背景图尺寸

    background-size

    在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。

    能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

    背景图定位

    background-origin

    背景图片可以放置于 content-box、padding-box 或 border-box 区域。

    ps:背景图可以使用多个,以“,”隔开

    规定背景的绘制区域

    background-clip

    文本阴影

    text-shadow  同上面的边框阴影

    文字自动换行

    word-wrap:break-word;

    在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。

    通过 CSS3,web 设计师可以使用他们喜欢的任意字体。

    当您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。

    您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

    在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

    如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):

    <style> 
    @font-face
    {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
    }
    
    div
    {
    font-family:myFirstFont;
    }
    </style>
    View Code

    字体描述符

    font-weight  可选。定义字体的粗细。默认是 "normal"。

    2D转换

    元素旋转

    通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

    transform: rotate(30deg);
    -ms-transform: rotate(30deg);        /* IE 9 */
    -webkit-transform: rotate(30deg);    /* Safari and Chrome */
    -o-transform: rotate(30deg);        /* Opera */
    -moz-transform: rotate(30deg);        /* Firefox */

    值 rotate(30deg) 把元素顺时针旋转 30 度。

    通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:

    transform: scale(2,4);
    -ms-transform: scale(2,4);    /* IE 9 */
    -webkit-transform: scale(2,4);    /* Safari 和 Chrome */
    -o-transform: scale(2,4);    /* Opera */
    -moz-transform: scale(2,4);    /* Firefox */

    值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。

    通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:

    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg);    /* IE 9 */
    -webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
    -o-transform: skew(30deg,20deg);    /* Opera */
    -moz-transform: skew(30deg,20deg);    /* Firefox */

    值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。

    通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:

    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px);        /* IE 9 */
    -webkit-transform: translate(50px,100px);    /* Safari and Chrome */
    -o-transform: translate(50px,100px);        /* Opera */
    -moz-transform: translate(50px,100px);        /* Firefox */

    值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。

    3D转换

    通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。

    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg);    /* Safari 和 Chrome */
    -moz-transform: rotateX(120deg);    /* Firefox */

    通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。

    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */
    -moz-transform: rotateY(130deg);    /* Firefox */

    过渡

    CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

    要实现这一点,必须规定两项内容:

    规定您希望把效果添加到哪个 CSS 属性上

    规定效果的时长

    div
    {
    100px;
    height:100px;
    background:yellow;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    }

    div:hover
    {
    300px;
    }

    ps:当指针移出元素时,它会逐渐变回原来的样式。

    如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开:

    向宽度、高度和转换添加过渡效果:

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:yellow;
    transition:width 1s, height 1s;
    -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
    -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
    -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
    }
    
    div:hover
    {
    width:100px;
    height:100px;
    transform:rotate(360deg);
    -moz-transform:rotate(360deg); /* Firefox 4 */
    -webkit-transform:rotate(360deg); /* Safari and Chrome */
    -o-transform:rotate(360deg); /* Opera */
    }
    </style>
    </head>
    <body>
    
    <div></div>
    
    </body>
    </html>
    View Code

    多列

    column-count 属性规定元素应该被分隔的列数:

    把 div 元素中的文本分隔为三列:

    -moz-column-count:3;     /* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;

    column-gap 属性规定列之间的间隔:

    规定列之间 40 像素的间隔:

    -moz-column-gap:40px;        /* Firefox */
    -webkit-column-gap:40px;    /* Safari 和 Chrome */
    column-gap:40px;

    column-rule 属性设置列之间的宽度、样式和颜色规则。

    规定列之间的宽度、样式和颜色规则:

    -moz-column-rule:3px outset #ff0000;    /* Firefox */
    -webkit-column-rule:3px outset #ff0000;    /* Safari and Chrome */
    column-rule:3px outset #ff0000;

  • 相关阅读:
    什么是ETL?5分钟看完秒懂
    横向滚动 css
    解决echarts中横坐标值显示不全(自动隐藏)问题
    Echarts
    post 二进制流下载文件
    如何停止foreach
    日期格式 js
    cookie 属性
    HTML5 file对象和blob对象的互相转换
    前端图片压缩
  • 原文地址:https://www.cnblogs.com/bilibiliganbei/p/5905699.html
Copyright © 2020-2023  润新知