CSS3学习

CSS3学习

介绍

CSS3是CSS版本的升级，主流的浏览器已基本支持，
在兼容之前版本时，还是需要使用前缀，
-webkit：chrome和safari
-moz：firefox
-ms：ie
-o：opera

属性介绍：

1、border-radius是向元素添加圆角边框。
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 
    注意：不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。

半圆：
div{
    height:50px;
    width:100px;
    background:pink;
    border-radius:50px 50px 0 0;
}

2、box-shadow是向盒子添加阴影。支持添加一个或者多个。
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的
![这里写图片描述](https://img-blog.csdn.net/20171214213747924?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxNDQwMjMzNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

.box_shadow{
  box-shadow:4px 2px 6px #333333; 
}

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

3、border-image为边框应用图片
和background相似，
border-image:url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 20 repeat;
border-image:url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 20 repeat;
注意：repeat为图片延伸方式，还有round平铺，stretch拉伸，没有no-repeat，图片宽度没有单位，可以使用百分比

4、text-shadow:文字阴影
text-shadow:5px 5px 4px red；
水平阴影、垂直阴影、模糊距离，以及阴影的颜色，注意阴影可以为负数，负数表示阴影为左边或者上边，阴影距离不能为负数
5、word-wrap:自动换行
word-wrap: normal|break-word;
在长单词或 URL 地址内部进行换行。
javascript：object.style.wordWrap="break-word"
6、word-break:规定非中日韩文本的换行规则。
word-break: normal|break-all|keep-all;
break-all:允许单词内换行
keep-all：只能在半角空格或连字符处换行
javascript：object.style.wordBreak = "break-all";
7、text-overflow：规定当文本溢出包含元素时发生的事情。
text-overflow: clip|ellipsis|string;
clip：修剪
ellipsis：显示省略号
string：使用给定的字符串来代表被修剪的文本。
javascript：object.style.textOverFlow="clip";

过渡Transition
transition：prop time
添加多个过渡属性时，通过，号隔开。
或者transition: width 1s linear 2s;
linear为加速度，2s为delay time

CSS3动画：
-webkit-animation: myFirst 10s;

@keyframes myFirst {
            from{background-color: red;}
            to{background-color: yellow}
        }

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

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称
规定动画的时长

另外还有其他属性：

animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

或者使用
animation: myfirst 5s linear 2s infinite alternate;

CSS多列
column-count：3；
Internet Explorer 9 以及更早的版本不支持多列属性
column-gap：40px；
规定列之间 40 像素的间隔：
column-rule：设置列之间的宽度、样式和颜色规则
column-rule: 2px solid red;