c3新特性
来源:互联网 发布:淘宝助理打印多个店铺 编辑:程序博客网 时间:2024/05/16 02:37
1.文本阴影text-shadow
text-shadow:偏移量x 偏移量y 模糊度 颜色;
注意:
水平偏移量: 正值向右,负值向左
垂直偏移量: 正值向下,负值向上
模糊度不能为负数
可设置多个text-shadow,每个用逗号分隔
例子:text-shadow:1px 2px 3px red,2px 3px 4px pink;
2.边框圆角 border-radius
border-radius:10px 10px 10px 10px/5px 5px 5px 5px;
前面四个是横轴半径,后面四个值是纵轴半径,如果后面四个值不写,纵轴半径默认等于横轴半径
3.盒子阴影 box-shadow
水平偏移量 +向右 -向左
垂直偏移量 +向下 -向上
模糊度不能为负数
inset可设置内阴影,box-shadow:inset 1px 1px 1px red;
设置box-shadow不会改变盒子大小,不会影响兄弟元素布局
可设置多重边框阴影,增强立体感
4.边框图片boeder-image
路径:border-image-source:url();
图片拆分:border-image-slice:30 30 30 30;//上 右 下 左
border-image-slice:30 fill;
以上,会将中间裁掉的部分在盒子内平铺
图片拉伸:
border-image-repeat:stretch//默认的拉伸效果
repeat //平铺,不完整显示
round //完整的平铺
边框图片宽度:
border-image-width:并不能改变盒子大小,只能改变边框图片大小
最终的连写:
border-image:url()slice/width repeat;
5.背景大小 background-size
作用:设置背景图片大小
设置方式:background-size:200px 200px;//具体尺寸
100% 100%;//比例
100% auto;//自适应
auto 100%;//自适应
cover;//铺满父容器
contain //在父容器中完整显示
6.设置背景原点background-origin
作用:设置背景图片原点位置,这个原点,指的是图片左上角
也就是重新定义了background-position的显示位置
应用background-origin:content-box; //以内容左上角为原点
padding-box;//默认选项,以内边距为原点
border-box;//以外边距为原点
7.background-clip背景区域裁切(也就是让图片在什么区域内显示)
作用:裁切背景,移动端应用的多
应用:background-clip:padding-box;//padding以外的部分会被裁掉
border-box;//border以外的部分会被裁掉
content-box;//content以外的部分会被裁掉
8.多背景background: url() ,url(),url();
注意:不同的背景,用逗号分隔
设置多背景的时候,不能再设置背景颜色(不能连写),如有需要,聚单独写background来设置颜色
9.渐变
线性渐变:background-image:linear-gradient(渐变方向开始和结束状态,渐变范围(距离))
渐变方向:可以是具体方向:to top
to bottom
to left
to right
也可以是角度:90deg
例子:
background-image:linear-gradient(
to right, //从左向右
red 20%, //开始颜色是红色,从盒子宽度20%的位置开始变
green //结尾颜色是绿色
);
注意:如果没有设置background-size,百分比是以盒子宽度为参照设置的,否则是以background-size为参照设置的;
10.径向渐变background-image:radial-gradient(圆点,开始、结束)
注意:径向渐变的百分比是以设置的半径为参照的
圆心位置设置:关键词:center/left.......
具体值:第一个值代表水平方向,第二个垂直,第二个如果不设置,默认Center
例子:
background-image:radial-gradient(
100px 50px at center,//第一个是水平半径,第二个是垂直半径,第三个是圆心,意思是在盒子中心
red 20%, //在圆的半径20%的位置开始变
green
);
11.过渡trasition
11.1补间动画
过渡属性:transition-property:all//默认全部
width
htight
.....多个属性用逗号分隔
过渡执行总时间:transition-duration: ;
动画执行速度(类型)transition-timing-function:linear //匀速
ease
ease-in
ease-out
ease-in -out
动画延时时间:transition-delay: ;
注意:transition一般放在开始状态里。
11.2帧动画
12.2D转换
transiform:translate(x,y)//第一个值是水平,第二个垂直
旋转:transform:rotate(deg);//正值是顺时针,负值是逆时针
缩放:trasorm:scale(倍数);//整数(>1)放大,小数(<1)缩小
倾斜:transform:skew(deg,deg);//水平,垂直
旋转原点:transform-origin:center;//默认
left;
right;
bottom;
top;
13.3D转换
左手法则:左手握住旋转轴,拇指指向旋转轴方向,四指指向的方向就是正方形。
13.1 3D转换分类
transform: translateX()translateY() translatrZ();//位移
例子:
transform:translateX(100px)translateY(100px) translateZ(100px);
transform:rotateX()rotateY() rotateZ();//旋转
transform:scaleX()scaleY() scaleZ();//缩放
14.透视 perspective
作用:辅助了解3D效果,不是必须的步骤
取值:600-1200px是人眼最舒服的状态
设置方式:将该属性作为父元素的单独属性设置
将perspective作为transform的属性设置
transform:perspective(100px)translateX(100px);
15.动画
语法:
@keyframes scale{
from{}
to{}
}
通过animation:;调用动画,哪个元素调用,就写在哪里。
调用动画名称:animation-name:;
设置动画完成时间:animation-duration:;
设置动画执行次数:animation-interation-count:infinite;//一直执行
具体时间,如2s
默认执行1次
设置延时执行时间:animation-delay:;
动画执行类型(速度):animation-timing-function:linear;
ease;
ease-in;
ease-out;
ease-in-out;
动画逆波(是否有反向运动):animation-direction:normal;
reverse; //反向
alternate; //正常执行
alternate-reverse;
设置动画时间之外的状态:animation-play-state:running;//默认
paused;//暂停
转为3D盒子:transform-style:preserve-3d;
steps(); //步长
- c3新特性
- 2017年最新web面试题之C3新特性
- c3
- c3
- C3
- python多重继承新算法C3
- 新特性
- 新特性
- 新特性
- 新特性
- Java新特性:接口新特性
- 【备忘】【C3】《深入理解Java虚拟机:JVM高级特性与最佳实践》PDF 下载
- 7.0新特性新1
- delphi6的新特性
- Oracle9i新特性:iSQLPLUS
- J2SE 5.0 新特性
- ejb3.0新特性
- Java1.5新特性
- c3选择器
- [Usaco2007 Open]Fliptile 翻格子游戏 状压dp
- pandas 行前后操作
- bzoj 1592 dp
- Redis安装部署
- c3新特性
- vue router学习——动态路由和嵌套路由
- Spring-使用加密的属性文件02
- Numpy 基本概念以及2.7版本与3.6版本间的差异
- Linux(Ubuntu)从安装到一步步熟悉(持续更新中~)
- JAVA企业面试题精选 Web基础 21-30
- Elasticsearch 简介
- 服务器车牌识别软件api
- 为什么堆排序可以降低复杂度