web前端-CSS3基础

1、创建圆角边框、向矩形添加阴影、使用图形绘制边框

Border-radius

Border-shadow

Border-image

<!--圆角-->
<div id="radius">CSS3-圆角</div>
<!--边框阴影-->
<div id="shadow">边框阴影</div>
<div id="shadow1">边框阴影-偏移值都为0</div>
<!--图片边框-->
<div id="img">图片边框</div>
<div id="img1">图片边框</div>
<div id="img2">图片边框</div>

<style>
    *{
        margin:0px;
        padding:0px;
    }
    #radius{
        width:200px;
        height:100px;
        border-radius:25px;
        -moz-border-radius: 25px;/*old firefox*/
        margin:100px auto;
        background:gold;
    }
    #shadow{
        width:200px;
        height:100px;
        box-shadow:-10px -10px 20px gray;
        -moz-box-shadow: -10px -10px 20px gray;
        /*第一个值是向右偏移长度，第二个值是向下偏移长度，第三个值是虚化的程度，最后是颜色*/
        background:green;
        margin:10px auto;
    }
    #shadow1{
        width:200px;
        height:100px;
        box-shadow:0px 0px 40px gray;
        -moz-box-shadow: 0px 0px 40px gray;
        /*第一个值是向右偏移长度，第二个值是向下偏移长度，第三个值是虚化的程度，最后是颜色*/
        background:green;
        margin:10px auto;
    }
    #img{
        width:200px;
        height:100px;
        background:lightpink;
        border:10px;
        -webkit-border-image: url(1.png)  30 30 repeat ;
        -moz-border-image: url(1.png) 30 30  repeat;
        -o-border-image: url(1.png) 30  30  repeat;
        border-image: url(1.png) 30 30  repeat;
        margin:100px auto;
    }
    #img1{
        width:200px;
        height:100px;
        background:lightpink;
        border:10px;
        -webkit-border-image: url(1.png)  60 30 repeat ;
        -moz-border-image: url(1.png) 60 30  repeat;
        -o-border-image: url(1.png) 60  30  repeat;
        border-image: url(1.png) 60 30  repeat;
        margin:100px auto;
    }
    #img2{
        width:200px;
        height:100px;
        background:lightpink;
        border:10px;
        -webkit-border-image: url(1.png)  30 60 repeat ;
        -moz-border-image: url(1.png) 30 60  repeat;
        -o-border-image: url(1.png) 30  60  repeat;
        border-image: url(1.png) 30 60  repeat;
        margin:100px auto;
    }
</style>

2、背景属性

Background-size：背景尺寸

-length：设置高度和宽度，第一个值为宽度第二个值是高度

-percentage：以父元素的百分比来设置宽度和高度

-cover：把背景图像扩展至足够大，背景图像的某些部分也许无法显示在背景定位区域内

-contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

Background-origin：规定背景图片的定位区域

=padding-box时背景图像相对于内边距框来定位

=border-box时背景图像相对于边框盒来定位

=content-box时背景图像相对于内容边框来定位

Background-clip：背景剪裁

=border-box时背景剪裁到边框盒

=padding-box时背景剪裁到内边距框

=content-box时背景被剪裁到内容框

3、文本阴影、自动换行

Text-shadow

Word-wrap：允许文本强制文本进行换行即使这意味着单词会被拆分

Word-wrap：break-word，允许对长单词进行拆分，并换行到下一行

4、字体

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

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

@font-face

<style>

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

     url('Sansation_Light.eot'); /* IE9+ */

}

div

{

font-family:myFirstFont;

}

</style>

5、CSS转换-对元素进行移动、缩放、转动、拉长或拉伸

Translate（）：元素从其当前位置移动，根据给定的x和y位置参数向右向下（正数）

#trans{
    width:200px;
    height:100px;
    background:yellow;
    margin:100px auto;
}
#trans:hover{
    -webkit-transform: translate(100px,200px);
    -moz-transform: translate(100px,200px);
    -ms-transform: translate(100px,200px);
    -o-transform: translate(100px,200px);
    transform: translate(100px,200px);
}

Rotate（）方法，元素顺时针旋转给定的角度，允许负值

#trans1{
    width:200px;
    height:100px;
    background:yellow;
    margin:100px auto;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

Scale（）方法，元素的尺寸会增加或减少，根据给定的宽度和高度参数

#trans2{
    width:200px;
    height:100px;
    background:yellow;
    margin:200px auto;
    -webkit-transform: scale(2,4);
    -moz-transform: scale(2,4);
    -ms-transform: scale(2,4);
    -o-transform: scale(2,4);
    transform: scale(2,4);
}

Skew()方法，元素翻转给定的角度，根据给定的x轴和Y轴参数

#trans3{
    width:200px;
    height:100px;
    background:yellow;
    margin:200px auto;
    -webkit-transform: skew(30deg,10deg);
    -moz-transform: skew(30deg,10deg);
    -ms-transform: skew(30deg,10deg);
    -o-transform: skew(30deg,10deg);
    transform: skew(30deg,10deg);//沿X轴翻转30度Y轴翻转10度
}

6、CSS3过渡元素

元素从一种样式逐渐改变为另一种的效果

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

-规定效果的时常

#trans1{
    width:200px;
    height:100px;
    background:yellow;
    margin:100px auto;
    -webkit-transition: transform 1s;
    -moz-transition: transform 1s;
    -ms-transition: transform 1s;
    -o-transition: transform 1s;
    transition: transform 1s;
}

#trans1:hover{
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

7、CSS3动画

当您在@keyframes中创建动画时，请把它绑到某个选择器，否则不会产生动画效果

-规定动画的名称

-规定动画的时长

8、用户界面

Resize、box-sizing、outline-offset

Resize：属性规定是否可以由用户调整元素尺寸

Box-sizing：属性允许您以确切的方式定义适应某个取悦的具体内容

Outline-offset：对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

<!--resize-->
<div id="resize">resize</div>
<!--outline-offset-->
<div id="off">outline-offset:这个div边框边缘外15px处的轮廓</div>
<span>测试边缘</span>
<div id="ce">测试边缘</div>
<span>测试边缘</span>

#resize{
    width:200px;
    height:100px;
    background:black;
    resize: both;
    overflow:auto;
    margin:100px auto;
}
#off{
    width:200px;
    height:100px;
    background:darkgray;
    margin:100px auto;
    border:2px solid blanchedalmond;
    outline:2px solid black;
    outline-offset:15px;
}
#ce{
    width:200px;
    height:100px;
    background:darkgray;
    margin:0 auto;
}