标签：css3 gradient 0.5 45deg 新增 transform 特性 720deg 200px

css3圆角
border-radius: 10px;
border-top-left-radius: 10px;
左上角圆角(单个圆角设置，先写上下，再写左右)
正圆圆角，宽高相等，设置border-radius是宽高的值
css3盒子阴影
box-shadow:3px 8px 21px 8px;
第一个值，水平位置，正右负左，0最中间
第二个值，垂直位置，正下负上，0中间
第三个值，模糊程度，值越大越模糊
第四个值，范围，值大范围大
文字阴影
text-shadow: 0px 0px 5px 0px;
背景渐变
线性渐变
background: linear-gradient(blue,orange);
从左到右background: linear-gradient(to right,blue,orange);
linear直线gradient
径向渐变
background:radial-gradient(blue,orange)
css3过渡
transition后面加时间
transition:all 2s;
all所有是包括所有改变的属性

2d转换 transform
2d是两个轴X Y(X正右负左，Y正下负上)
1.位移 translate
transform: translate(100px，200px);X(向右) Y(向下) 轴同时移动
transform: translateX(-200px);
transform: translateY(-200px);
2.旋转 rotate （deg是度数的单位）
transform:rotate(720deg);XY同时顺时针旋转720度，正值是顺时针，负值时逆时针
transform:rotateX(720deg);X旋转720度
transform:rotateY(720deg);y旋转720度

旋转基点transform-orignin:left/center/right/top/bottom
水平top/center/bottom
垂直left/center/right

3.缩放 scale
transform: scale(0.5,0.5)xy同时缩小一半
transform: scaleX(2)X轴放大两倍
transform: scaleY(1.5)放大了1.5倍
4.倾斜 skew(正时顺时针，负时逆时针)
transform:skew(-30deg,45deg)x轴逆时针倾斜30度，y轴顺时针倾斜45度
transform:skewX(45deg)X轴倾斜45度
transform:skewY(45deg)Y轴倾斜45度
5.矩阵 martix

将上面4个效果合到一起，空格隔开
transform:translateY(200px) rotate(720deg) scale(0.5,0.5) skew(-30deg,45deg);

3d转换
动画
弹性盒子
@media多媒体查询(响应式布局)

标签：css3,gradient,0.5,45deg,新增,transform,特性,720deg,200px
来源： https://www.cnblogs.com/MLdetiantian/p/16223410.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。