CSS3
CSS查询网站
caniuse.com
构建工具
webpack
新增长度单位
vw 相当于视口宽度的百分比
vh 相当于视口高度的百分比
vmax 视口宽高较大值的百分比
rem根元素字体大小的倍数。
新增盒子
属性
box-sizing:content-box;//内容盒子
box-sizing:border-box;//宽高就是盒子的总宽高。
.box1{
width:200px;
height:200px;
padding:5px;
border:5px solid black;
}
上述css盒子如果是内容盒子盒子是220220 如果是border-box是200200 内容是180*180
resize
resize:horizontal;
overflow：hidden;
水平方向可以调整盒子大小。
resize:vertical；垂直方向可调整大小
resize:both;垂直水平都可以调整大小
resize:none;不可以调整大小
box-shadow盒子阴影
两个值：水平，垂直
box-shadow：10px 10px;
三个值：水平，垂直，颜色；
box-shadow：10px 10px blue;
三个值：水平，垂直，模糊程度；
box-shadow：10px 10px 10px;
四个值：水平，垂直，模糊程度 颜色
box-shadow：10px 10px 10px blue;
五个值：水平，垂直，模糊程度，外沿 颜色
box-shadow：10px 10px 10px 10px blue;
六个值：水平，垂直，模糊程度，外沿 颜色 内阴影
box-shadow：10px 10px 10px 10px blue inset;
opacity 给整个元素增加透明度。
新增背景属性
background-orgin 设置背景图时的起点位置
padding-box
border-box
content-box 默认padding-box
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-origin
background-clip
超出范围的图片不显示
border-box
背景延伸至边框外沿（但是在边框下层）。
padding-box
背景延伸至内边距（padding）外沿。不会绘制到边框处。
content-box
背景被裁剪至内容区（content box）外沿。
text 实验性
背景被裁剪成文字的前景色。
background-size
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size#cover
background复合属性
background:背景颜色 背景url 是否重复 位置/大小 原点 裁剪方式
多背景图
background:url("1") no-repeat left top,
url("2") no-repeat right top,
url("3") no-repeat left bottom,
url("4") no-repeat right bottom;
新增边框属性：
1.边框圆角:border-radius:2px;
单独设置，左上-》右上-》右下-》左下
2.outline外边框
新增文本属性
1.文本阴影text-shadow:10px 10px;
值
可选。阴影的颜色。可以在偏移量之前或之后指定。如果没有指定颜色，则使用用户代理自行选择的颜色，因此需要跨浏览器的一致性时，应该明确定义它。
必选。这些
2.文本换行white-space
这个属性指定了两件事：
空白字符是否合并，以及如何合并。
是否换行，以及如何换行。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space
3.文本溢出
text-overflow CSS 属性用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串
https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-overflow
注意：块容器必须显式定义overflow的值为非visible
且white-space:nowrap
4.text-decoration
该属性是以下 CSS 属性的简写：
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration
5.文本描边
CSS 属性 -webkit-text-stroke 指定了文本字符的笔触宽度和笔触颜色。此属性为全称属性 -webkit-text-stroke-width 和 -webkit-text-stroke-color 的简写属性。
新增渐变
1.线性渐变
background: linear-gradient(#e66465, #9198e5);
/* 渐变轴为 45 度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 色标：从下到上，从蓝色开始渐变，到高度 40% 位置是绿色渐变开始，最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
/* 颜色提示：从左到右的渐变，由红色开始，沿着渐变长度到 10% 的位置，然后在剩余的 90% 长度中变成蓝色 */
linear-gradient(.25turn, red, 10%, blue);
/* 多位置色标：45% 倾斜的渐变，左下半部分为红色，右下半部分为蓝色，中间有一条硬线，在这里渐变由红色转变为蓝色 */
linear-gradient(45deg, red 0 50%, blue 50% 100%);
https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient
2.径向渐变
radial-gradient() CSS 函数创建一个图像，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成，其形状可以是圆形或椭圆形。函数的结果是 类型。
3.重复渐变
CSS 函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的 ，类似于 linear-gradient，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器。这个函数的结果是
类型。
web字体。
@font-face{
//定义
font-family:"哈哈";
src：url("./font1/方正.ttf");
}
//使用
body{
font-family:"哈哈";
}
1.渐变
.box1{
width:200px;
height:200px;
background-color:orange;
transition-property:height;//设置哪个属性需要过渡效果
transition-duration:5s;//过渡时间
transition-delay:2s;//延迟2s开始过渡
}
.box1:hover{
height=400px;
}
<body>
<div class="box1></div>
</body>
不平滑过度
.box1{
transition-timing-function:ease;//慢，快，慢
}
.box2{
transtion-timing-function:linear;//匀速
}
/* Keyword values */
transition-timing-function: ease;
transition-timing-function: ease-in;//慢 快
transition-timing-function: ease-out;//快-慢
transition-timing-function: ease-in-out;//慢 快 慢
transition-timing-function: linear;
transition-timing-function: step-start;//不考虑时间直接抵达终点
transition-timing-function: step-end;//等过渡时间结束时直接抵达终点，无过渡效果
transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);//贝塞尔曲线
列式布局
column-count:3;//列数为3
column-width:200px；//每列200px宽，自动计算列数
column-gap:20px；//列与列的空隙。
column-rule-width:2px;//调整边框样式，宽度颜色
column-rule-style:dashed;
column-rule-color:red;
column-span:all;//横跨列数
浙公网安备 33010602011771号