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 timeCSS3动画:
-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;