CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。
这篇主要讲CSS3，让我们先来了解一下CSS3新特性趴！如：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等
-
在CSS3中，对于不同浏览器有不同的前缀
- Chrome和Safari： -webkit
- Firefox: -moz
- IE9+: -ms
- Opera: -0
-
选择器：’>’ 选择直接子元素
body> .contianer ul > li[1]
1.body标签下直接子元素中class属性为container的所有元素A
2.A元素里后代元素下标签为ul的所有元素B
3.元素B的直接子元素下第二个标签为li的元素
下面列举一些结构伪类选择器：
伪元素：是通过CSS虚拟出的一个元素
1.:root 根选择器
2.:not 否定选择器，除某个元素以外的所有元素（注意中间没有空格）
3.:empty 选择没有任何内容的元素
4.:target 目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素
5.:first-child{} 选择父元素的第一个子元素的元素 :last-child{} 最后一个
6.:nth-child(n) 用来定位某个父元素的一个或多个特定的子元素，n可以是整数表达式关键字，从1开始；当值小于等于0时不进行选择
7.:nth-last-child(n) 从某父元素的最后一个子元素开始计算 :nth-last-of-type(n)同理
8.:first-of-type 定位一个父元素下的某个类型的第一个子元素，例如第一个p元素 p:first-of-type； :nth-of-type(n) 同理
9.:only-child 匹配元素的父元素仅有一个唯一的子元素
10.:only-of-type 选中一个元素中的唯一一个类型子元素，即该类型的子元素只有一个
11.:enable / :disabled 选择可用哦/不可用表单元素 :checked 选中状态
12.::selection / ::-moz-selection 伪元素用来匹配突出显示的文本
13.:read-only 处于只读状态的样式，就是设置了 readonly="readonly"
14.:read-write 处于非只读状态
15.::before / ::after 在元素的前面或者后面插入内容，即虚拟一个元素可以指定元素的内容与样式
例如： #div:before{
content:'这是before伪元素的内容';
display:block;
color:white;
}
- Font-face特性：加载字体样式
<!-- example1-->
<font face="arial">直接加载字体样式</font>
<!-- example2-->
<font style="font-family:arial">基本写法</font>
<!-- example3 加载服务端字体-->
@font-face{
font-family:arial; <!--字体名称-->
src:url(...); <!--字体文件在服务器上的相对或绝对路径;-->
}
.cla{font-family:arial;}
- 文字渲染
text-fill-color: 文字内部填充颜色
text-stroke-color: 文字边界填充颜色
text-stroke-width: 文字边界宽度 - word-wrap + text-overflow + overflow:hidden;
word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行;
word-wrap:break-word到达边界断行；
word-wrap:nowrap则不断行；
text-overflow:clip; 表示剪切
text-overflow:ellipsis; 表示省略 - 多列布局（multi-column layout）
column-count：表示布局几列。
column-rule：1px solid #bbb; 表示列与列之间的间隔条的样式
column-gap：表示列于列之间的间隔 - 边框和颜色，支持透明度设置
color: rgba(R,G,B,A); //A是指透明度
border-radius: 10px 0 0 0; //左上角开始顺时针
- 阴影设置
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径只能为正数] [阴影扩展半径正数延展负数缩小] [阴影颜色] [投影方式]; x为正向右y为正向下
box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset(内部阴影默认为外部);
- 文本阴影
text-shadow: X-Offset Y-Offset blur color;// x方向阴影正向右y为正向下，blur为阴影模糊半径，color我rgba，偏移量为负值则为相反方向
box-reflect: below 10px; //向下反射10px
- 边框图
border-image:url(1.jpg) 15 repeat; // 注意15后面不要加px；repeat 重复； round 平铺会有挤压； stretch 拉伸；
- 线性渐变
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet); //线性渐变 radical 径向渐变
//或者
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
- 背景效果
通常情况，我们的背景都是覆盖整个元素的，现在 CSS3 让您可以设置是否一定要这样做。这里您可以设定背景颜色或图片的覆盖范围。
- 设置背景图片起始位置：
background-origin ： border-box | padding-box | content-box;背景必须是no-repeat - 背景裁剪：
background-clip ： border-box | padding-box | content-box | no-clip;分别表示背景从border/padding/content开始，no-clip默认属性，相当于border-box - 背景大小：
background-size: auto | <长度值> | <百分比> | cover | contain;contain：缩小图片适合元素；cover扩展填补元素； - 支持多背景图片：在background中添加多个url
- background-break元素被分成多个独立的盒子background-break: continuous; 默认值。忽略盒之间的距离（也就是像元 素没有分成多个盒子，依然是一个整体一 样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景。
- 盒子模型
CSS基础盒模型
布局稳定性：优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）
浮动：float，父元素需要为标准流
清除浮动的方法，看这里
- 为该选择器设置clear属性，left清除左侧浮动影响，right右侧，both双侧
- 增加一个空标签 例如
<div style=”clear:both”></div> - 给父元素设置overflow为 hidden|auto|scroll
- 使用伪元素清除浮动
定位： - position:static; 默认位置，不可设置偏移属性
- position:relative; 相对于自身位置，文档中保留位置，针对左上角进行偏移
- position:absolute; 相对于staic定位外的第一个有定位属性父元素，如果所有父元素都没有定位则以浏览器为准，通过边偏移移动位置，但是它完全脱标，完全不占位置
- position:fixed; 以浏览器窗口作为参照物来定义网页元素, 不占位置不随滚动条滚动
元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式
CSS3盒模型：盒子模型为开发者提供了一种非常灵活的布局方式，但是支持这一特性的浏览器并不多，目前只有 webkit 内核的新版本 safari 和 chrome 以及 gecko 内核的新版本 firefox, 主要有以下三种：
display:box;
display:flex;
display:grid;
14. 属性选择器
-
2D转换
- transform:translate(left, top)/translateX(x)/translateY(y);相对当前位置移动，如果为百分比则是相对自身长宽大小
- transform:rotate(deg); deg为正值则是顺时针旋转，反则逆时针
- transform:scale(X, Y)/scaleX(x)/scaleY(y); 宽度转换为原始尺寸的X倍，高度转换为原始尺寸的Y倍
- transform:skew(X,Y)/skewX(x)/skewY(y); 围绕X轴翻转X度，围绕Y轴翻转Y度
- transform-origin: left top; 中心改为左上角
-
3D转换
- translate3d(x,y,z)/translateX(x)/translateY(y)/translateZ(z)
- rotate3d(x,y,z,angle)/rotateX(angle)/rotateY(angle)/rotateZ(angle)
- scale3d(x,y,z)/scaleX(x)/scaleY(y)/scaleZ(z)
- transform-style: flat|preserve-3d; 属性规定如何在 3D 空间中呈现被嵌套的元素。
- perspective: number|none; 其子元素会获得透视效果，而不是元素本身。只影响3D
- perspective-origin: x-axis y-axis; 该属性必须与 perspective 属性一同使用，设置3D元素的位置，默认50%
- backface-visibility: visible|hidden; 定义当元素不面向屏幕时是否可见。
-
过渡效果
<!--过渡前属性设置-->
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
<!--过渡后属性设置-->
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
过渡属性：
- transition-property:指定过渡或动态模拟的CSS属性;
- transition-duration:指定完成过渡所需的时间; 默认为0
- transition-timing-function:指定过渡函数 ease-in(加速) ease(由快到慢) linear(恒速) ease-out(减速) ease-in-out(先加速后减速); 默认是 “ease”
- transition-delay:指定开始出现的延迟时间，默认为0
可简写为：transition: transition-property transition-duration transition-timing-function transition-delay;
例如：transition: width 1s linear 2s;
- 动画：动画是使元素从一种样式逐渐变化为另一种样式的效果。
使用关键帧：keyframes，可以用百分比来规定变化发生的时间从0%-100% 可以改成 from… to
注意：
- @keyframes 中创建动画时，请把它捆绑到某个选择器(通过
animation)，否则不会产生动画效果。 - 您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
animate属性：
- 用户界面：具体查看w3school
- 是否可由用户调整元素尺寸
div
{
resize:both;
overflow:auto;
}
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
