css边框属性、动画属性和分列

css中的边框样式：

/*
在css中可以给任何控件添加上边框
设置边框有三个属性：border-style，border-color 和 border-width
以下一一讲解功能
*/

	/*使用系统html提供的边框样式，double表示两条线，显示效果是一个矩形*/
    border-style: double;
	
    /*顾名思义，该属性设置边框颜色*/
    border-color: blue;

    /*该属性设置边框的宽度*/
    border-width: 5px;
	
	/*以上三条属性其实可以合在一起写,显示效果使一样的，以下是简写方式*/
	border:5px double blue;
	
	/*css3中增加的样式，如果希望可以设置圆角的效果，可以试是下面这个属性,属性值为希望的圆角半径*/
	border-radius: 10px;
	
	/*css3中增加的样式，这是一个可以向边框添加阴影的属性，5px 5px 表示阴影距离原边框左上角的距离，2px表示阴影的模糊程度，red表示阴影的颜色*/
	box-shadow: 5px 5px 2px red;
	
	/*这个属性设置内边距，这个值的大小会影响到控件的大小，如下设置为10px，控件会向四周扩大10px*/
	padding:10px;
	
	/*这个属性设置外边距，不会影响控件的大小，但是会影响到控件之间的间隔，设置为50px表示控件会至少相隔50px，因为控件处于上下位置关系时margin的距离会折叠，保留margin值大的距离，margin的值设置为auto时有居中的效果*/
	margin: 50px;
	
	/*这个属性刻意设置行间距，如下所示，150%表示行间距设置为字体的1.5倍*/
	line-height: 150%;

别的css属性：

	/*css3中增加的样式，这个属性可以设置鼠标悬停时鼠标的效果，如下所示，当鼠标悬停时，鼠标的方向会改变*/
 	cursor: alias;
 	
	/*css3中增加的样式，可以将一个块级元素转换成行内元素，如果对一组列表设置该属性，则该列表会以一行的形式显示*/
	display: inline;
	
	/*css3中增加的样式，这个属性比较好理解，设置是否可见，如下的值为hidden，表示不可见，但是还是可以选中的*/
	visibility: hidden;
	 
	/*这个属性可以设置透明度，值的范围时0~1,值为0时完全透明，值为1时没有透明效果，如下设置为0.5，表示半透明状态*/
	opacity: 0.5;

css中的分列：

	/*可以把元素分成3列，侧重分的列数，每列所占的宽度交给浏览器决定，单独使用该属性会使用默认间隔，没有间隔线*/
    column-count: 3;
    
    /*也是分列，设置每列的宽度为250px，侧重每列的宽度，具体分成几列交给浏览器决定*/
    column-width: 250px;
    
    /*设置每列的间隔距离，如下所示，为50px*/
    column-gap: 50px;
	
	/*可能需要设置分割线，可以美化界面，第一个值2px表示间隔线的宽度，第二个值outset表示分割线的样式，第三个值yellow表示分割线的颜色*/
    column-rule: 2px outset yellow;

css动画属性：

	/*
	transform属性可以用来引入瞬时动画，没有中间过程，可以用来设置终态画面
	transition可以用来填充过渡动画
	transform和transition一般同时使用
	*/

    /*设置移动到的位置，两个值分别表示与页面左上角的距离*/
    transform: translate(100px,100px);

    /*2D旋转，设置元素的旋转，顺时针，10deg表示旋转10度*/
    transform: rotate(10deg);
	
	/*设置缩放，第一个值表示宽度，1就是原宽度，第二个值表示高度，设置为2表示高度变为原来的2倍*/
    transform: scale(1,2);

    /*
    对元素进行变形的属性，
    deg表示度数
    第一个值表示垂直方向上的歪曲，正数表示向左，负数反之，
    如果元素是一个垂直向上的箭头，设置skew(30deg,0deg),那么此时会显示为一个向上偏左30度的箭头
    第二个之表示水平方向上的歪曲，正数表示向下，负数表示向上，
    如果元素是一个水平向右的箭头，设置skew(0deg,30deg),那么此时会显示为一个向右偏下30度的箭头
    
	简而言之，把整个元素看作是一个矩形，关注矩形的左下两条矩形边，正常是夹角为90度，两条边是相互垂直关系
	第一个值只控制左边的矩形边，值为正数时向外张开，(也就是向左张开)，两矩形边夹角就会变大，反之同理
	第二个值只控制下边的矩形边，值为正数时向外张开，(也就是向下张开)，两矩形边夹角就会变大，反之同理
	
    */
	transform: skew(30deg,30deg);

	/*3D旋转，控制元素在X轴上旋转，如下所示，表示旋转70度，其他3D的rotate系属性同理
	*/
    transform: rotateX(70deg);
	
	/*
	rotate是2D还是3D区别：
	只有rotate是2D，其他rotate后有跟东西的属性都是3D的
	*/

以下介绍transition属性，需要配合例子讲解：

	/*transition只对位置进行变化，不会进行颜色的变化*/
	
	/*在html标签中添加一个div即可*/
	
	/*html内容：*/
	<div></div>
	
	/*对应的css样式*/
	div{
    	background-color: red;
    	width: 100px;
    	height: 100px;
    }
    /*设置鼠标悬停会触发动画*/
    /**/
	div:hover{
   		width: 200px;
   		height: 200px;
   		/*设置瞬时动画，为旋转360度*/
   		transform: rotate(360deg);
	}

以上代码没有动画效果
因为transform是用来设置终态动画的，没有中间过程，如上，如果只设置transform属性和悬停的宽度和高度，鼠标悬停时只有高宽变大，旋转360度没有效果，如下所示：

我们需要在原css样式中加上transition来填充过渡动画
以下为修改后的css代码：

/*只需要添加一行代码，其他不变*/
div{
    background-color: red;
    width: 100px;
    height: 100px;
    /*需要在启动动画之前，提前添加transition属性，如下所示，如果动画中有涉及
    宽度的变化，则在属性中标记 width 属性，提醒浏览器要添加宽度的过渡动画，紧
    跟着的2s表示过渡动画的时间，为两秒，高度过渡动画同理，由于我们使transform
    设置了终态画面，标记transform属性，提醒浏览器要添加终态画面的过渡动画*/
    transition:width 2s, height 2s,transform 2s;

}
div:hover{
   width: 200px;
   height: 200px;
   transform: rotate(360deg);
}

以下是修改后的效果：

以下为过渡动画的其他属性：

/*此属性可以添加过渡动画的延迟，表示动画延迟一秒显示*/
transition-delay: 1s;

css中的animation属性：

/*以下同样演示说明*/
/*html还是使用一个原始的div*/
/*以下为css样式*/
div {
    background-color: red;
    width: 100px;
    height: 100px;
    
    /*animation支持颜色的过渡动画，也支持位置移动的动画，这里使用相对定位方便演示*/
    position: relative;
    
    /*animation属性得前两个值一定要设置，不然不显示动画，
    第一个值表示动画的名称，声明动画名称，浏览器需要使用动画名称找到动画
    第二个值表示动画的总时间，5s表示5秒
    第三个值表示动画播放的模式：可选的设置项，infinite表示无限播放，也可以设置其他的值
    */
    animation: myanima 5s infinite;

}

/*使用@keyframes + 空格 + 动画名 + { } 来设置被申明的动画*/
@keyframes myanima {
/*用数值 % + { } 的方式设置动画的过程中状态，数值 + % 表示动画的进度，数值最后一定要到达100% 否则显示效果不友好*/
    0% {
    	/*设置背景颜色表示每个阶段的颜色，animation会自动在每个阶段之间添加过渡动画*/
        background-color: red;
		
        /*使用顶部和左部的偏移量来控制移动*/
        top: 0px;
        left: 0px;
    }
    25% {
        background-color: blue;
        top: 0px;
        left: 100px;
    }
    50% {
        background-color: green;
        top: 100px;
        left: 100px;
    }
    75% {
        background-color: yellow;
        top: 100px;
        left: 0px;
    }
    100% {
        background-color: red;
        top: 0px;
        left: 0px;
    }

}

以下为演示效果：