边框
CSS3可以使用样式创建圆角边框,添加阴影框。
属性:
border-radius
div{
border:1px solid black;
border-radius:25px;
border-radius:50%; //可以使用百分比或者px来调整圆角。
}
盒阴影
box-shadow
div{
border:1px solid black;
box-shadow:10px 10px 5px #888888;
//box-shadow:水平位置(允许负值) 垂直位置(允许负值) 模糊距离 阴影大小 颜色 外侧阴影边内侧阴影 ;
}
边界图片
css3允许使用图片替换边框
border-image
div{
border-image:url(border.png) 30 30 round;
//border-image:图片 向内偏移 边界宽度 是否重复(repeat)、拉伸(stretch)或铺满(round);
}
过渡
让元素的样式逐渐变成另一种样式
transition
transition是集合属性:
div{
width:100px;
transition:width 2s; //属性和时间必填
//transition:要改变的属性(all是全部属性都改变) 改变需要的时间 过渡的时间曲线(快慢) 过渡开始时间(延时);
//transition 触发方式 可以选择伪元素触发(:hover :focus),也可以通过Js添加特定class触发,只要要改变的属性 出现了变化即可。
}
div:hover{
width:300px; //当鼠标放上DIV的时候开始过渡,width从100px逐渐变成300px
}
转换
transform
转换分2D和3D转换
transform有四个属性: //transform是2D转换
translate(x,y) //相对自身位置偏移
//关于translate 使用时建议使用translate3D(0,0,0) 可以出发GPU硬件加速,使动画更流畅,帧数更高。
rotate(30deg) //旋转一定角度,正值顺时针,负值逆时针
scale(1,2) //元素放大或减小,宽度为原来的1倍,高度为原来的3倍
skew(30deg,20deg)//在X轴倾斜30deg,Y轴倾斜20deg
matrix(旋转,缩放,移动,倾斜) //将转换属性合并到一起
transfrom-origin:; //调整基点的位置 可以写px % top left center botom left right
动画
在CSS中写动画:
@keyframes myanimation{ //@keyframes指定一个css样式和动画逐步变为新的样式
0%{} // 可忽略 也可以多添加几个阶段 开始也可以写成from
100%{ //结束可以写成to 结束时会变回初始样式
width:300px;
}
}
创建完成后将动画绑定到DOM元素,动画不需要触发,自己就可以直接执行:
div{
animation:myanimation 5s;
}
使用动画的属性 animation
animation的八个属性
animation-name:动画名;
要使用的动画名字;
animation-duration:2s;
动画执行的时间
animation-timing-function:ease;
steps(3,end) //steps函数是控制帧数,即动画分几帧进行,第一个参数 是帧数,第二个参数是start/end,控制动画结束时样式是开始时的样式还是结束时的样式。
动画的速度曲线
常见的速度曲线 ease
ease-in
ease-out
ease-in-out
linear
animation-delay:0s;
动画的延迟时间,可以为负
animation-iteration-count:1;
动画的执行次数
如果想一直执行,可以使用infinite;
animation-direction:normal;
执行方向
alternate 0-100%-0-100 循环
reverse 100-0 100-0 100-0
alternate-reverse 100-0-100-0 循环
animation-play-state:running
播放状态 一般配合js使用
running 播放
paused 暂停
animation-fill-mode:none;
填充模式
forwards 停止在动画结束的位置 执行动画100%的样式
如果有延迟时间的话
使用backwards 等候时候的样式会使用0%时候的样式 等候指的是使用动画延迟时
both:forwards和backwards同时存在
none: 默认
弹性盒子
flex
弹性盒子一般用来布局,尽量减少使用浮动。
div{
display:flex; //如果不考虑IE浏览器兼容问题的话可以放心用,ie不兼容11以下的版本
//移动端可以放心用。
}
flex使用方法:
首先在父元素上使用display:flex;
然后设置父元素属性:
flex-direction 调整主轴
row 横向向右排列(默认)
row-reverse 横向从右向左排列
column 调整为纵轴为主轴 从上往下排列
column-reverse 调整为纵轴为主轴 从下往上
flex-wrap 控制换行
nowrap 默认不换行 多的会在一行挤压
wrap 换行 会把副轴的空间等分
wrap-reverse 换行 反向
flex-flow
复合属性
flex-flow:direction wrap //直接设置横向排列和是否换行
justify-content
!主轴!的排列顺序
flex-start 贴着左边开始
flex-end 贴着右边
center 项目居中
space-around 将剩余空间等分 分别分给每一个项目左右两边
space-between 将剩余的空间等分 第一个项目和最后一个项目是紧挨着左右两边的
space-evenly 将剩余的空间等分 所有项目间距相同
align-items 在副轴的排列顺序
flex-start 项目在副轴的flex-start的位置
flex-end 项目在副轴的flex-end的位置
center 项目在副轴的中间
stretch 如果项目在副轴上没有宽/高,那么宽/高会变成100%
align-content 换行项目的时候生效
flex-start 换行的项目紧挨着上面的元素,并且在副轴的flex-start的位置
flex-end 换行的项目紧挨着上面的元素,在副轴的flex-end的位置
center 换行的项目紧挨着上面的元素,在副轴的中间位置
space-around 将副轴的剩余空间等分,添加到项目行的上下两边
space-between 将副轴的剩余空间等分,第一行和最后一行紧挨着容器的副轴两边
项目(子元素)属性
flex-grow 放大
放大后的宽度:本身宽度+剩余宽度/设置的grow的和*本身设置的grow值
如果没有剩余宽度 设置这个 没效果
默认值 0
flex-shrink 压缩
默认值 1
项目的宽度=本身宽度-超出宽度/shrink的总值*本身设置的shrink值
如果一行呃项目没有超出,设置这个没效果
flex-basis 重置项目大小
flex-basis:305px;
将会替换掉项目本身设置的长度
flex 复合属性
flex:grow shirnk basis
默认值 flex:0 1 auto;
flex:1;
如果直接这样写,相当于设置的是flex-grow
align-self 项目本身在副轴的位置
flex-start 在副轴的flex-start
flex-end 在副轴的end
center 在副轴的中间
order 排序
默认是1
值越大位置越往后
多媒体查询
@media
可以针对不同的媒体和设备使用不同的样式文件
媒体类型 all 全部
print 打印机
screen 用于电脑屏幕、平板、手机
speech 用于屏幕阅读器
媒体查询可以查询 vIewport宽高、设备宽高、设备朝向(横竖屏)、分辨率
例:
@media screen and (min-width:480px){
//在屏幕可视窗口尺寸大于 480 像素的设备上修改字体大小
body{
font-size:16px;
}
}