css3
狐七 5/13/2022 css
# 1. css3 新增的特性
查看答案
# 边框
- border-radios 添加圆角边框
- border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴 影尺寸，阴影颜色，inset（内/外部阴影））
- border-image：设置边框图像
- border-image-source 边框图片的路径
- border-image-slice 图片边框向内偏移
- border-image-width 图片边框的宽度
- border-image-outset 边框图像区域超出边框的量
- border-image-repeat 图像边框是否平铺（repeat 平铺 round 铺满 stretch 拉伸）
# 背景
- background-size 背景图片尺寸
- background-origin 规定background-position属性相对于什么位置定位
- background-clip 规定背景的绘制区域（padding-box，border-box， content-box）
# 渐变
- linear-gradient 线性渐变
- radial-gradient 径向渐变
# 文本效果
- word-break：定义如何换行
- word-wrap：允许长的内容可以自动换行
- text-overflow：指定当文本溢出包含它的元素，应该干啥
- text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
# 转换
- transform 应用于 2D/3D 转换，可以将元素旋转，缩放，移动，倾斜
- transform-origin 可以更改元素转换的位置，（改变 xyz 轴）
- transform-style 指定嵌套元素怎么样在三位空间中呈现
# 2D 转换方法
- rotate 旋转
- translate（x，y）指定元素在二维空间的位移
- scale（n） 定义缩放转换
# 3D 转换方法
- perspective（n）为 3D 转换
- translate
- rotate
- scale
# 过渡
- transition-proprety 过渡属性名
- transition-duration 完成过渡效果需要花费的时间
- transition-timing-function 指定切换效果的速度
- transition-delay 指定什么时候开始切换效果
# 动画
- animation Animation-name 为@keyframes 动画名称
- animation-duration 动画需要花费的时间
- animation-timing-function 动画如何完成一个周期
- animation-delay 动画启动前的延迟间隔
- animation-iteration-count 动画播放次数
- animation-direction 是否轮流反向播放动画
# 2. box-sizing中的 Border-box与content-box 的区别
查看答案
- Content-box 标准盒模型：width 不包括 padding 和 border
- Border-box 怪异盒模型：width 包括 padding 和 border