标签 CSS3 下的文章

线性渐变必须添加浏览器私有前缀起始方向可以是：方位名词或者度数，如果省略默认是top语法background: linear-gradient(起始方向, 颜色1, 颜色2, ...); background: -webkit-linear-gradient(left, red, blue); background: -webkit-linear-gradient(left top, red, blue);

三维坐标系三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的x轴：水平向右 注意：x右边是正值，左边是负值y轴：垂直向下 注意：y下边是正值，上边是负值z轴：垂直屏幕 注意：z往外面是正值，往里面是负值（近正远负）3D位移：translate3d(x, y, z)translform: translateX(100px)，仅在X轴移动translform: translateY(100px)，仅在Y轴移动translform: translateZ(100px)，仅在Z轴移动translform: translate3d(x, y, z)，其x，y，z分别指要移动的轴的方向距离3...

值 描述 value 规定不透明度，从 0.0 （完全透明）到 1.0（完全不透明） inherit 应该从父元素继承 opacity 属性的值 使用方法div { opacity:0.5; }

动画（animation）可以通过设置多个节点来精确一个或一组动画，常用来实现复杂的动画效果相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果制作动画分为两步：先定义动画在使用（调用）动画1.定义动画使用@keyframes定义动画（类似定义类选择器）@keyframes 动画名称 { /* 开始状态 */ 0% { width: 100px; } /* 结束状态 */ 100% { width: 300px; } } 2.元素使用动画div { width: 100px; hei...

同时使用多个转换，其格式为：transform: 移动 旋转 缩放 ...等; transform: translate() rotate() scale() ...等;其顺序会影响转换的效果。（先旋转会改变坐标轴方向）当我们同时拥有位移和其他属性的时候，记得要将位移放到最前面总结转换transform 我们简单理解就是变形有2D和3D之分我们暂且学了三个分别是位移旋转和缩放2D移动translate(x, y)最大的优势是不影响其他盒子 ,里面参数用% ,是相对于自身宽度和高度来计算的可以分开写比如 translateX(x)和translateY(y)2D旋转rotate(度数)可以...

转换（tarnsform） ，可以实现元素的位移、旋转、缩放等效果转换（transform）可以简单理解为变形 移动：translate 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位语法transform: translate(x, y); /* 分开写 */ transform: translateX(x); transform: translateY(y); 重点 定义为2D转换中的移动，沿着X和Y轴移动元素 translate最大的优点：不会影响到其他元素的位置 translate中的百分比单位是相对自身元素的 translate(-50%, -50%)...

过渡动画：是从一个状态渐渐过渡到另一个状态，经常和 :hover 一起搭配使用transition: 要过渡的属性 花费时间 运动曲线 何时开始; transition: width .5s ease 0.5s; /* 如果想要写多个属性，利用逗号进行分割 */ transition: width .5s ease 0.5s, height .5s ease 0.5s; /* 如果想要多个属性都变化，属性写all就可以了 */ transition: all .5s;1. 属性：想要变化的css属性，宽度高度、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以 2...

clac()此CSS函数让你在声明CSS属性值时执行一些计算div { width: calc(100% - 80px); }括号里面可以使用 + - * / 来进行计算

CSS3滤镜filterfilter CSS属性将模糊或颜色偏移等图形效果应用于元素filter: 函数(); 例如：filter: blur(5px); blur模糊处理 数值越大越模糊，数值后面要加px单位img { filter: blur(5px); }

CSS3中box-sizing来指定盒模型，有2个值：content-box、border-box，这样我们计算盒子大小的方式就发生了变化可以分成两种情况：box-sizing: content-box; 盒子大小为width + padding + border的大小（以前默认的）box-sizing: border-box; 盒子大小为width如果盒子模型我们改为了box-sizing: border-box; ，那padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）.box { box-sizing: border-bo...

1. 属性选择器属性选择器可以根据元素特定属性来选择元素 选择符 简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择具有att属性且属性值等于val的E元素 E[att^="val"] 选择具有att属性且值以val开头的E元素 E[att$="val"] 选择具有att属性且值以val结尾的E元素 E[att*="val"] 选择具有att属性且值中包含有val的E元素 注意:类选择器、属性选择器、伪类选择器，权重为 0 0 1 0 2. 结构伪类选择器结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元...