导图社区 CSS基础
这是一篇关于CSS基础的思维导图
CSS基础思维导图包含：边框（应用于块级元素，设置边框时可以四个方向都设置、边框阴影：box-shadow）、背景、渐变（线性渐变、径向渐变）、文本、圆角：使元素边框更圆润等等。
这是一篇关于CSS3的边框、渐变、圆角的思维导图
社区模板帮助中心，点此进入>>
CSS基础
边框
应用于块级元素，设置边框时可以四个方向都设置
border-top 上边框
border-left 左边框
border-right 右边框
border-bottom 下边框
边框阴影：box-shadow
h-shadow
水平阴影的位置（必填）
v-shadow
垂直阴影的位置（必填）
blur
模糊阴影距离（可选）
color
阴影颜色（可选）
inset/outset
向内/外散播
box-shadow：10px（水平方向） 10px（垂直方向） 50px（模糊距离） color；
h-shadow和v-shadow取正值时，阴影方向是向右、向下扩散
h-shadow和v-shadow取负值时，阴影方向是向左、向上扩散
背景
background-size
设置背景图片大小
cover
覆盖
contain
适应，当宽或高有一个边达到块的最大值时，图片的大小不再变化
percentage
以父元素的百分比来设置宽高，只设置一个值时，第二个值是auto（自动）
渐变
线性渐变
沿着一个指定的方向进行渐变，如不设置方向，默认反向是从上到下
标准语法
background-image：linear-gradient（颜色，颜色，……）
带方向的语法
background-image：linear-gradient（to 方向单词，颜色，……）
background-image：linear-gradient（角度值deg，颜色，……）
角度值是正值时从屏幕的左侧开始
角度值是负值时从屏幕的右侧开始
径向渐变
以一个圆心为中心向四周进行渐变
background-image：-webkit-radial-gradient（颜色，颜色，……）
不均匀语法
background-image：-webkit-radial-gradient（颜色 百分比，颜色 百分比，……）
定义形状
background-image：-webkiit-radial-gradient（x轴位置 y轴位置，形状单词（circle 圆形、ellipse 椭圆），颜色，……）
x轴、y轴的值
代表方向的单词
left
right
top
bottom
px（像素）
数字 + %
文本
text-shadow
文本阴影
模糊距离
阴影颜色
text-overflow
文本溢出
white-space：nowrap
文本正常显示不换行（默认）
overflow：hidden
溢出隐藏
text-overflow：ellipsis
用省略号来显示溢出部分
word-warp
单词换行
normal
默认样式不换行
brek-word
对长单词或者URL地址内部进行换行
word-break
break-all
keep-all
reset.css
初始化页面样式，一定要放在最前面，否则会覆盖自己设置的样式
圆角：使元素边框更圆润
border-radios：设置四个方向
取四个值时
左上角、右上角、右下角、左下角
取三个值时
左上角、右上角和左下角、右下角
取两个值时
左上角和右下角、右上角和左下角
取一个值时
四个角一致
注：取值
数字+ px
数字+ %
数值超过块宽高的50%时，无论加多大都无效
宽高一致显示圆形
宽高不一致显示椭圆
border-left-top-radius
左上
border-right-top-radius
右上
border-right-bottom-radius
右下
border-left-bottom-radius
左下
CSS3 动效
transform：
平面2D动效
translate
移动
按照指定的反向进行移动
reanslate(x,y)
双轴平移（x和y的值为数字 + px）
translateX(数字 + px)
在x轴上进行平移
translateY(数字 + px)
在y轴上进行平移
rotate
旋转
按照指定的方向进项角度的旋转
rotate（数字 + deg）
数字为正值时顺时针旋转，数字为负值时逆时针旋转
scale
缩放
按照一定的比例进项放大、缩小
scale（x,y）
双轴缩放（x和y的值均为数字，正值时是正常缩放，负值时是镜像缩放）
只写一个值时则x和y的值相同
scaleX（数字）
x轴缩放
scaleY（数字）
y轴缩放
skew
倾斜
按照指定的角度进项位置上的偏移
skew（x,y）
双轴倾斜（x和y的值是数字 + deg）
skewX（数字 + deg）
x轴倾斜
skewY（数字 + deg）
y轴倾斜
transform-origin：x，y，z;
设置基准点
x
center
px
%
y
z