box-shadow阴影设置
box-shadow: 5px 10px 20px 10px black; /*左,上,模糊度,延伸半径,颜色*/
检索浏览器兼容性 :http://www.caniuse.com
特殊字体
@font-face{ font-family:自定义字体名 src:字体文件路径 }
渐变
线性渐变
background: repeating-linear-gradient(to right, green 20%,lightblue 50%); /*方向,颜色一,颜色二,第一个值如果大于第二个值就不是渐变了*/
径向渐变
background: radial-gradient( circle,green 20%,lightblue 50%); /*类型,颜色一,颜色二*/
- 重复渐变:background:repeating-radial-gradient()
变形:transform
.div01-css:hover{ /*旋转中心*/ transform-origin: center; /*rotate旋转,scale缩放, skew斜切*/ transform: rotate(-45deg) scale(2,1) skew(0deg,45deg); }
脱离文档流的盒子模型的定位
.div01-css{ background: gray; margin: 100px; /*left参照父容器的尺寸*/ left: 50%; position: absolute; /*实现绝对定位的居中,参照自己的尺寸*/ transform: translate(-50%,0); }
过渡动画:transition
.div01-css{ width: 100px; height: 100px; border: solid 1px gray; margin: 200px; /*控制的属性,持续时间,效果,延迟时间*/ transition: transform 1s linear 1s, background 1s,box-shadow 1s; } .div01-css:hover{ transform: rotate(45deg); transform-origin: center; background: lightblue; box-shadow: 3px 3px 5px black; }
关键帧动画:animation
@keyframes moveon { 0%{background:#c00;} 50%{background:orange;} 100%{background:yellowgreen;} } .div01-css{ width: 100px; height: 100px; border: solid 1px black; margin: 200px; /*动画名,持续时间*/ animation: moveon 3s; }
- 响应式布局
三种屏幕的规格
类型 | 屏幕规格 | 临界点 |
---|---|---|
pc | 1024-普通屏 1280-高清屏 | 970-1170 |
pad | 768-1024 | 750-970 |
phone | 768以下 | 750 |
/*宽度在750-970之间时*/
@media screen and (max-width:970px) and (min-width: 750px){
.container{
width: 750px;
}
.container>div{
/*控制内部所有的元素*/
min-width: 375px;
max-width: 250px;
}
}