CSS3知识

CSS3知识

开发工具与关键技术：CSS3知识、CSS3知识
作者：黄桂康
撰写时间：2019.06.12

CSS3：
CSS3用来控制网页的样式和布局。就像人们的衣物一样，想要什么样的款式都能设计的出来，什么样的颜色都可以等样式，哪个图标应该放在哪，如何放，还要注意审美观，整洁性等布局。CSS3可以说是CSS的一个最新标准。在网页中，我们都需要用CSS来构建我们的完美样式，所以我们的CSS都会含有大量的元素及属性等。
border（边框）：
border-radius（圆角效果）：可以是像素单位或者百分比。
box-shadow（边框阴影）：水平长度、垂直长度、阴影长度、颜色。
border-image（边框的图片）：创建围绕div元素的边框（border-image是不支持IE浏览器的）。
border（边框）：边框长度、线结构（虚线dashed、直线solid）、边框颜色。
border-top（上边框）：上同（只有上边框有值）。
border-left（左边框）：上同（只有左边框有值）。
border-right（右边框）：上同（只有右边框有值）。
border-bottom（下边框）：上同（只有下边框有值）。
Background（背景）：
它可以是单单是一种颜色，也可以是一张图片或图案。才叫它背景图片、背景颜色等。
Background:rgb。
Background-size（背景图片的大小）：值（cover全屏无间隙）。
Background：url（./） px px 无重复。（url图片路径，后面可直接赋值，图片性质）。
Text（文本）：
Text-shadow（文本阴影）：单位、单位、单位、颜色。
word-wrap（自动换行）：break-word；
text-wrap（不换行）：none；
text-item（文本居中）：center（居中）；
font-size（文字大小）：单位；
font-weight（文字粗糙）：500（600/700）；
color（字体颜色）：颜色/rgb
font-famliy（文字的字体）：
font-style（字体风格）：normal（正常）、italic（斜体）、oblique（倾斜）
font-variant（大写字体格式）：normal、small-caps
text-decoration（字体修饰线）：none（无）、underline（下划线）、line-through（中划线）、overline（上划线）
绝对字体大小：像素（px）、点（pt）、皮卡（pc）、英寸（in）
相对字体大小：百分比（%）、em、rem
text-align（文本对齐）：center（垂直居中）、left（左对齐）、right（右对齐）、justify（两端对齐）
line-height（行高）：最低端与字体内部顶尖之间的距离。
text-transform（文字大小写）：none、capitalize（首字母大写）、uppercase（全部大写）、lowercase（全部小写）
letter-spacing（字符之间的间隔）：px；
word-spacing（单词之间的间隔）：px；
2D转换：
2D Transform方法：
matrix（n，n，n，n，n，n）含六个值的变换矩阵。
transform：matrix（1,0,0,1,20,40）
translate（x，y）位移：指定方向移动。水平和垂直方向同时移动。
translateX（x）：水平方向移动
translateY（y）：垂直方向移动
transform：translate（40px，30px）；//水平移动40像素，垂直移动30像素。
scale（x，y）缩放：水平、垂直方向进行放大或放小。
scaleX（x）：水平方向缩放
scaleY（y）：垂直方向缩放
transform：scale（0.8）；//缩小到原来的0.8倍
rotate（deg）旋转：正值-顺时针旋转，负值-逆时针旋转。
transform：rotate（-30deg）；//逆时针旋转30度
skew（x，y）扭曲：skew不会旋转，只会改变形状。X-水平，Y-垂直。
skewX（x）：x轴扭曲变形
skewY（y）：y轴扭曲变形
Transform：skew（10deg，10deg）；//x轴变形10度，y轴10度
transition-delay（过渡延迟时间）：
transition（“，”）：第一个时间的值为transition-duration，用来设置过渡动画的持续时间，第二个为transition-delay，用来指定一个动画开始执行的时间。
animation-timing-function（设置动画播放方式）：
ease（默认值）：开始比较慢，然后加速，到最大速再减速。
linear（线性速度）：开始和结束的速度一样（匀速）。
ease-in：开始慢，然后加速。
ease-out：开始加速，然后减速。
Ease-in-out：开始慢，然后加速，到最大在减速。
CSS3动画：（位移、旋转、缩放、倾斜）
animation-direction（动画播放的方向）：normal（默认值）：每次循环都是向播放。alternate：偶数向前播放，奇数反方向播放。
animation-direction：alternate；
animation-play-state（动画的播放状态）：running（默认值）：类似音乐播放器一样，paused：将播放的动画停下来。