CSS3知识

浅浅的花香味﹌ 2022-01-17 06:23 180阅读 0赞

**CSS3知识**

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：将播放的动画停下来。