web(css3)

web(11.16-11.17)

一、css3边框

1.border-radius

描述：圆角边框
语法:
border-radius:apx bpx cpx dpx; /依次为边框左上角，右上角，右下角，左下角的圆角像素/
border-radius:apx; /边框四个角的圆角像素均为a像素/
实例：给div增加圆角边框；

div{
    width:100px;
    height:30px;
    line-height: 28px;
    padding:0 10px;
    text-align: center;
    border:solid 1px #999;
    border-radius: 25px;
 } 

2.box-shadow
描述：边框阴影
语法：
border-shadow：水平位置 垂直位置 模糊距离 阴影大小 阴影颜色 [内置或外置]
实例：

div{
            width:100px;
            height:30px;
            line-height: 28px;
            padding:0 10px;
            text-align: center；
            border-radius: 25px;
            box-shadow:0 -3px 5px 3px red inset;
        }

二、css3背景

1.background-size
描述：规定背景图片的大小；
实例1：调整背景图片的尺寸大小

div{
            background: url("rock600x400.jpg") no-repeat;
            background-size: 200px 100px;
        }

实例2：对图片进行拉伸

div{
            background: url("rock600x400.jpg") no-repeat;
            background-size:40% 100%;
        }

2.background-origin
描述：规定背景图片的定位位置
语法：background-origin：content-box/padding-box/border-box

值	描述
content-box	背景图像相对于内容框来定位
border-box	背景图像相对于边框盒来定位
padding-box	背景图像相对于内边距框来定位

实例：

 div{
            width:300px;
            height:300px;
            padding:50px;
            border:solid 30px rgba(255,0,0,.5);
            background: url("xinnian.png") no-repeat;
            background-size: 50px 50px;
            /*background-origin: padding-box;*/
            /*background-origin:border-box;*/
            background-origin: content-box;
        }

3.background-clip
描述：规定背景的绘制区域
语法：background-origin：content-box/padding-box/border-box

值	描述
content-bobx	背景被裁剪到内容框
border-box	背景被裁剪到边框盒
padding-box	背景被裁剪到内边距框

实例：

div{
            width:300px;
            height:300px;
            padding:50px;
            border:solid 30px rgba(255,0,0,.5);
            background: url("xinnian.png") no-repeat;
            /*或背景颜色：background：red;*/
            /*background-clip: padding-box;*/
            /*background-clip:border-box;*/
            background-clip: content-box;
        }

三、css3文本效果

1.text-shadow:文本阴影
语法：text-shadow:水平距离 垂直距离 模糊距离 模糊颜色
实例：(以火焰字为例)

p {
    text-align: center;
    font:bold 60px helvetica, arial, sans-serif;
    color: red;
    text-shadow: 0 0 4px white, 
    0 -5px 4px #ff3, 
    2px -10px 6px #fd3, 
    -2px -15px 11px #f80, 
    2px -25px 18px #f20;    
}

2.word-wrap属性：对长的不可分割的单词进行换行规则

值	描述
normal	只在允许的断字点换行（默认状态）
break-word	可以在单词内部进行换行

3.text-overflow属性：对溢出文本框的文本的处理规则

值	描述
clip	直接修剪文本
ellipsis	溢出文本框饿文本用省略号代替

4.word-break属性：对文本的换行规则

值	描述
break-all	允许在单词内部换行
keep-all	只能在半角空格或连字符处换行

四、css3字体

在新的 @font-face 规则中，必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件，如需使用该字体，需要通过font-family 属性来引用字体的名称 (myFirstFont)：
实例：

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

五、css3过渡

语法：transition：css属性 完成过渡效果所需时间 完成过渡的速度曲线 过渡何时开始；
实例：

div{
            width:100px;
            height:50px;
            background: red;
            -webkit-transition:all .5s linear .3s;
        }
        div:hover{
            width:200px;
            background: blue;
        }

完成过渡的几种速度曲线形式：

值	描述
linear	均速
ease	慢开始，变快，慢结束
ease-in	慢开始
ease-out	慢结束
ease-in-out	慢开始和慢结束

六、css3 2D、3D转换方法

语法：transform：方法（参数1,参数2,…）

2d转换方法	描述及实例
translate	从当前位置移动，如：transform:translate(50px,100px);/*元素从左侧向右平移50像素，从上向下平移100像素*/
rotate	旋转给定的角度，如：transform:range(30deg);/*元素在水平面上旋转30deg*/
scale	元素缩放，如：transform:scale(2);/*等比例放大2倍*/ transform:scale(2,0.5);/*元素宽放大2倍，高缩小为原来的一半*/
skew	元素倾斜，如：transform:skew(30deg);/*元素绕x轴和y轴分别翻转30度*/ transform:skew(30deg,20deg);/*元素绕X 轴翻转 30 度，绕 Y 轴翻转 20 度*/

3d方法使用同上，如：

transform;translate3d(x,y,z);
transform:rotate3d(x,y,z,angle);   /*x,y,z均为一个0-1之间的值，主要用来描述元素围绕X,Y,Z轴旋转的矢量值*/
transform:scale3d(x,y,z);

七、css3动画

描述：有一种样式转化为另一种样式
实现方法：
1.规定开始和结束的两种样式的动画：（用from与to实现动画0%和100%的动画效果）
实例：

div{
            width:300px;
            height:200px;
            animation: move 1s linear .3s 4;           
            /*animation用来设置动画属性;语法：animation:动画名称  动画周期时间  
             动画完成的速度曲线  延迟时间   播放次数  
            是否逆放（animation-direction:alternate;  轮流反向播放） */
        }
        @keyframes move{               /*move为自定义的动画名称*/
            from{background:red; }
            to{background: yellowgreen;}
        }

2.规定多种样式的动画：
实例：

div:hover{
               animation: move 10s linear;  
 }
 @-webkit-keyframes move{
            0%{background: red; transform:translate(0px,0px)  rotate(180deg)  }
            30%{background: blue;transform:translate(100px,0px) }
            50%{background: greenyellow;transform:translate(100px,100px) scale(.5)}
            100%{background: #000;transform:translate(0px,0px)}
   }

八、css3多列

属性	描述
column-count	规定元素被分割为几列
column-gap	规定元素各列的间距
column-rule	规定元素各列的间隔线

实例：

p{
            -webkit-column-count: 4;                     /*分栏列数*/
            text-align: justify;
            -webkit-column-gap: 50px;                    /*分栏的l栏间距*/
            -webkit-column-rule:dashed 3px blue;             /*分栏的间隔线*/
        }

九、用户界面

1.resize 用户可以调整元素的尺寸

值	描述
both	可以调整元素的宽度和高度
horizontal	只能调整元素的宽度
vertical	只能调整元素的高度

注：需要与overflow 属性一块使用，overflow可以是 auto、hidden 或 scroll
实例：

 p{
           width:300px;
           height:200px;
            margin:50px;
            border:solid 1px #000;
            resize: both;
            /*resize: horizontal;*/
             /*resize:vertical;*/
            overflow:auto;
        }

2.outline offset 元素轮廓
实例：

div{
width:300px;
height:200px;
margin:50px;
border:solid 2px blue;
background:url("rock600x400.jpg") no-repeat;
background-size:100%;
outline: solid 2px red;              /*定义一个红色的轮廓线*/
outline-offset: 20px;                /*规定轮廓线距元素边框边缘20px*/
}