目录
新增长度单位
box-size怪异盒模型
resize调整盒子大小
box-shadow盒子阴影
opcity不透明度·
背景属性
1. background-origin
2. background-clip
3. background-size
4. backgorund 复合属性
5. 多背景图
边框圆角
边框外轮廓
文本
渐变
线性渐变
径向渐变
重复渐变
web字体
2D变换
3D变换
过渡
动画
多列布局
伸缩盒模型
响应式布局
BFC
新增长度单位
1. vw 视口宽度的百分之多少 10vw 就是视口宽度的 10% 。
2. vh 视口高度的百分之多少 10vh 就是视口高度的 10% 。
box-size怪异盒模型
content-box: width 和 height 设置的是盒子内容区的大小。(默认值)
border-box :width 和 height 设置的是盒子总大小。(怪异盒模型)
resize调整盒子大小
none 不允许用户调整元素大小。 (默认)
both 用户可以调节元素的宽度和高度。
horizontal 用户可以调节元素的宽度 。
vertical 用户可以调节元素的高度。
box-shadow盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
/* 写六个值,含义:水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow: 10px 10px 20px 3px blue inset;
opcity不透明度·
值是 0 到 1 之间的小数, 0 是完全透明, 1 表示完 全不透明。
背景属性
1. background-origin
作用:设置背景图的原点。
语法
1. padding-box :从 padding 区域开始显示背景图像。—— 默认值
2. border-box : 从 border 区域开始显示背景图像。
3. content-box : 从 content 区域开始显示背景图像。
2. background-clip
作用:设置背景图的向外裁剪的区域。
语法
1. border-box : 从 border 区域开始向外裁剪背景。 —— 默认值
2. padding-box : 从 padding 区域开始向外裁剪背景。
3. content-box : 从 content 区域开始向外裁剪背景。
4. text :背景图只呈现在文字上。
注意:若值为 text ,那么 backgroun-clip 要加上 -webkit- 前缀
3. background-size
作用:设置背景图的尺寸。
语法:
1. 用长度值指定背景图片大小,不允许负值。
2. 用百分比指定背景图片大小,不允许负值。
3. auto : 背景图片的真实大小。 —— 默认值
4. contain : 将背景图片等比缩放,使背景图片的宽或高,与容器的宽或高相等,再将完整 背景图片包含在容器内,但要注意:可能会造成容器里部分区域没有背景图片。
5. cover :将背景图片等比缩放,直到完全覆盖容器,图片会尽可能全的显示在元素上,但要
注意:背景图片有可能显示不完整。—— 相对比较好的选择
4. backgorund 复合属性
语法:
background: color url repeat position / size origin clip
注意:
1. origin 和 clip 的值如果一样,如果只写一个值,则 origin 和 clip 都设置;如 果设置了两个值,前面的是 origin ,后面的 clip 。
2. size 的值必须写在 position 值的后面,并且用 / 分开。
5. 多背景图
CSS3 允许元素设置多个背景图片
/* 添加多个背景图 */
background: url(../images/bg-lt.png) no-repeat,
url(../images/bg-rt.png) no-repeat right top,
url(../images/bg-lb.png) no-repeat left bottom,
url(../images/bg-rb.png) no-repeat right bottom;
边框圆角
同时设置四个角的圆角:
border-radius:10px;
分开设置每个角的圆角,综合写法(几乎不用):
border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y
边框外轮廓
outline-width:宽度
-color:颜色
-style:风格
复合属性:outline:50px solid blue;
outline-offset 设置外轮廓与边框的距离,正负值都可以设置
文本
阴影:text-shadow: h-shadow v-shadow blur color;
换行:white-space:
溢出:text-overflow:
修饰
渐变
线性渐变
默认从上到下渐变:
background-image: linear-gradient(red,yellow,green);
使用关键词设置线性渐变的方向:
background-image: linear-gradient(to top,red,yellow,green);
background-image: linear-gradient(to right top,red,yellow,green);
使用角度设置线性渐变的方向:
background-image: linear-gradient(30deg,red,yellow,green);
调整开始渐变的位置:
background-image: linear-gradient(red 50px,yellow 100px ,green 150px);
径向渐变
多个颜色之间的渐变, 默认从圆心四散。(注意:不一定是正圆,要看容器本身宽高比)
background-image: radial-gradient(red,yellow,green);
使用关键词调整渐变圆的圆心位置;
background-image: radial-gradient(at right top,red,yellow,green);
使用像素值调整渐变圆的圆心位置:
background-image: radial-gradient(at 100px 50px,red,yellow,green);
调整渐变形状为正圆 :
background-image: radial-gradient(circle,red,yellow,green);
调整形状的半径 :
background-image: radial-gradient(100px,red,yellow,green);
background-image: radial-gradient(50px 100px,red,yellow,green);
调整开始渐变的位置:
background-image: radial-gradient(red 50px,yellow 100px,green 150px);
重复渐变
无论线性渐变,还是径向渐变,在没有发生渐变的位置,继续进行渐变,就为重复渐变。
web字体
可以通过 @font-face 指定字体的具体地址,浏览器会自动下载该字体
定制字体
中文的字体文件很大,使用完整的字体文件不现实,通常针对某几个文字进行单独定制。
可使用阿里 Web 字体定制工具:https://www.iconfont.cn/webfont
字体图标
阿里图标官网地址:https://www.iconfont.cn/
2D变换
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
3D变换
过渡
在线制作贝赛尔曲线:https://cubic-bezier.com
动画
多列布局
伸缩盒模型
响应式布局
完整列表请参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media