css3基础知识点

从html开始重新复习了一遍，今天主要复习一下css3，整理一些个人觉得常用的知识点，陆续会更新js，jq，vue，react等

CSS3 是最新的 CSS 标准。

CSS3 边框

border-radius：用于创建圆角

box-shadow：用来添加阴影

border-image：使用图片创建边框

CSS3 背景

background-image：添加背景图片

background-size：指定背景图像的大小

background-origin：指定了背景图像的位置区域

background-clip：背景剪裁属性是从指定位置开始绘制

CSS3 渐变（Gradients）

CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}
左上角到右下角

也可定义角度

background-image: linear-gradient(angle, color-stop1, color-stop2);

径向渐变：

#grad {
  background-image: radial-gradient(red, yellow, green);
}

也可以设置形状

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

CSS3 文本效果

text-shadow

box-shadow

text-overflow

word-wrap

word-break

CSS3 2D 转换

translate()：根据X轴和Y轴位置给定的参数，从当前元素位置移动

rotate()：给定度数顺时针旋转。负值是逆时针旋转。

scale()：元素增加或减少的大小

skew()：X轴和Y轴倾斜的角度

matrix()：六个参数，旋转，缩放，移动和倾斜

CSS3 3D 转换

rotateX()

rotateY()

CSS3 动画

@keyframes 规则是创建动画

@keyframes myblog
{
    from {background: red;}
    to {background: yellow;}
}
from to 可以用百分比替换

div
{
    animation: myblog 5s;
   
}

CSS3 多列属性

column-count：需要分割的列数。

column-gap：列与列的间隙

column-rule-style：列与列之间的边框样式

column-rule-width：列与列的宽度

column-rule-color：列与列的边框颜色

column-rule：所有属性的简写

column-span：跨越多少列

column-width：指定列的宽度

CSS3 弹性盒子(Flex Box)

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

6个属性 设置在容器上

• flex-direction
• flex-wrap
• flex-flow:是flex-direction属性和flex-wrap属性的简写形式
• justify-content
• align-items
• align-content

弹性容器内包含了一个或多个弹性子元素。

flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。

flex-direction: row | row-reverse | column | column-reverse
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content 属性

justify-content: flex-start | flex-end | center | space-between | space-around
flex-start：
弹性项目向行头紧挨着填充。

flex-end：
弹性项目向行尾紧挨着填充。

center：
弹性项目居中紧挨着填充。

space-between：
弹性项目平均分布在该行上。

space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

align-items

align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：起点对齐。
flex-end：终点对齐。
center：中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性

align-content: flex-start | flex-end | center | space-between | space-around | stretch

flex-grow属性

flex-grow属性定义项目的放大比例

flex-shrink属性

flex-shrink属性定义了项目的缩小比例

CSS 网格布局

通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。

• grid-column-gap
• grid-row-gap
• grid-gap
• 调整网格间距
• grid-template-columns 属性用于指定列的宽度
• grid-template-rows 属性设置每一行的高度。
• align-content 属性用于设置垂直方向上的网格元素在容器中的对齐方式
• grid-column 属性定义了网格元素列的开始和结束位置。
• grid-area 属性是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写。