CSS

零散属性

outline: 轮廓线 例:outline: #00ff00 dotted thick; (设置轮廓线的颜色、样式、宽度)

描述
none 去掉聚焦边框颜色以及所有轮廓线设置
outline-color 边框的颜色。
outline-style 规定边框的样式。
outline-width 规定边框的宽度。
outline-style所有样式
描述
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
outline-width所有宽度
描述
thin 规定细轮廓。
medium 默认。规定中等的轮廓。
thick 规定粗的轮廓。
length 允许您规定轮廓粗细的值。单位“PX”。

white-space: 设置如何处理元素内的空白。例:white-space: normal (默认,自动换行)   

所有参数如下:

描述
normal 默认。空白会被浏览器忽略。
pre 所有空格和换行都会被浏览器保留。
nowrap 文本不会换行
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

padding: 设置文字与边框之间的间距。 例:padding: 10px;  亦可:padding-left: 10px; (上边距设置10px)

position: 规定元素的定位类型。 例positon: relative; (变为相对定位的元素)

描述
absolute

生成绝对定位的元素,相对于 relative 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成固定定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

top、bottom、left、right: 上下左右移动标签。需要与position联动使用。 例:top: 10px;

z-index: 元素的堆叠顺序,数值越大越靠上。需要与position联动使用。例:z-index: 1;

display: none; 隐藏标签,其他值如下:

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。显示隐藏
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 ),表格前后没有换行符。)。)。)。)。)。)
table-row-group 此元素会作为一个或多个行的分组来显示(类似
table-header-group 此元素会作为一个或多个行的分组来显示(类似
table-footer-group 此元素会作为一个或多个行的分组来显示(类似
table-row 此元素会作为一个表格行显示(类似
table-column-group 此元素会作为一个或多个列的分组来显示(类似
table-column 此元素会作为一个单元格列显示(类似
table-cell 此元素会作为一个表格单元格显示(类似
table-caption 此元素会作为一个表格标题显示(类似
inherit 规定应该从父元素继承 display 属性的值。

visibility: 规定元素是否可见。例:visibility: hidden; 

描述
hidden 隐藏
visible 显示隐藏
display与visibility相比:
display

无法使用transition动画显示,

只能用opacity透视代替

visibility 可以使用transition动画显示

opacity: 设置透明度。范围在0-1之间。例:opacity: 0.5;

word-spacing: 单词之间的间距。例:word-spacing: 10px;

letter-spacing: 字符之间的距离。例:letter-spacing: 10px;

direction: 设置文字方向。例:direction: ltr; 

描述
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。

overflow: hidden; 隐藏溢出。

border-radius: 设置边框的弧度。例:border-radius: 10px;

box-sizing: border-box; 将padding和border的长度也纳入总长度。改为IE盒子类型。

box-shadow: 元素阴影。例:box-shadow: 0 10px 8px red;

最多填写六个值,分别表示为:

描述
h-skewing(必要) 阴影在水平方向的偏移,负数是向左偏移,正数是向右偏移,单位为“px”。
v-skewing(必要) 阴影在垂直方向的偏移,负数是向上偏移,正数是向下偏移,单位为“px”。
blur(可选) 阴影的“模糊距离”或“模糊程度”,单位为“px”。
spread(可选) 阴影的扩展范围,若将“blur”设为“0”,该值则相当于一个可以进行位置偏移但不具备“outline-offset”的“outline”,单位为“px”。
color(可选) 阴影的颜色,支持Web技术中的常用颜色模式:“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。
inset(可选) 将默认向外的阴影方向改为向内

clear: both; 清除左右浮动

clip-path: 裁剪图形。例:clip-path: polygon(50% 0, 25% 50%, 75% 50%);

描述
circle
ellipse 椭圆
inset 圆角
polygon 多边形,以左上角为圆点
图像裁剪
clip-path: circle(50% at 50% 50%);
椭圆 clip-path: ellipse(25% 40% at 50% 50%);
矩形 clip-path: inset(5% 20% 15% 10%);
三角形 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
菱形 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
梯形 clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
平行四边形 clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
五边形 clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
六边形 clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
七边形 clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
八边形 clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
斜角 clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
槽口 clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
左箭头 clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
右箭头 clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
星星 clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
十字架 clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);
叉号 clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
对话框 clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

calc: 计算公式。例:calc: (100px-10px);  *支持 “+”,“ - ”,“*”,“/” 运算

cursor: 要显示的光标的类型。例:cursor: pointer; 设置鼠标形状为一只手。

描述
url

需使用的自定义光标的 URL。

注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针(一只手)
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右(东)移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize 此光标指示矩形框的边缘可被向上(北)移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize 此光标指示矩形框的边缘可被向下移动(南)。
w-resize 此光标指示矩形框的边缘可被向左移动(西)。
text 此光标指示文本。
wait 此光标指示程序正忙(通常是一只表或沙漏)。
help 此光标指示可用的帮助(通常是一个问号或一个气球)。

perspective: 定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。 *当元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。 例:

/*目前浏览器都不支持 perspective 属性。
  Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
*/
div   
{
    perspective: 500;
    -webkit-perspective: 500; /* Safari 和 Chrome */
}

perspective-origin: 设置 3D 元素的基点位置。*当元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。 例:

/*目前浏览器都不支持 perspective-origin 属性。
  Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。
*/
div
{
    perspective-origin: 10% 10%;
    -webkit-perspective-origin: 10% 10%;	/* Safari 和 Chrome */
}

!important: 提高指定CSS样式的属性值的优先权。例:width: 100px !important;

@media: 媒介,可以针对不同的屏幕尺寸设置不同的样式。例:@media screen and (max-width: 768px){}

@media screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}
媒体类型
描述
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕,平板电脑,智能手机等。
speech 应用于屏幕阅读器等发声设备
媒体功能
描述
aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
color 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0
color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。
device-height 定义输出设备的屏幕可见高度。
device-width 定义输出设备的屏幕可见宽度。
grid 用来查询输出设备是否使用栅格或点阵。
height 定义输出设备中的页面可见区域高度。
max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-color 定义输出设备每一组彩色原件的最大个数。
max-color-index 定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height 定义输出设备的屏幕可见的最大高度。
max-device-width 定义输出设备的屏幕最大可见宽度。
max-height 定义输出设备中的页面最大可见区域高度。
max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution 定义设备的最大分辨率。
max-width 定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color 定义输出设备每一组彩色原件的最小个数。
min-color-index 定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width 定义输出设备的屏幕最小可见宽度。
min-device-height 定义输出设备的屏幕的最小可见高度。
min-height 定义输出设备中的页面最小可见区域高度。
min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution 定义设备的最小分辨率。
min-width 定义输出设备中的页面最小可见区域宽度。
monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
scan 定义电视类设备的扫描工序。
width 定义输出设备中的页面可见区域宽度。

 vw/vh: 屏幕浏览器视口的宽高,将屏幕均分为100个平均尺寸。例:width: 100vw;   height: 100vh;

filter: 滤镜。例:filter: blur(40px)

描述
none 默认值,没有效果。
blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;

如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。
brightness(%) 给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。
contrast(%) 调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。
drop-shadow(h-shadow v-shadow blur spread color)

给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值,除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。参数如下:

  (必须)

这是设置阴影偏移量的两个 值.  设定水平方向距离. 负值会使阴影出现在元素左边. 设定垂直距离.负值会使阴影出现在元素上方。查看可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了  and/or ,会有模糊效果).

 (可选)

这是第三个code>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值 若未设定,默认是0 (则阴影的边界很锐利).

 (可选)

这是第四个 值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小). 
注意: Webkit, 以及一些其他浏览器 不支持第四个长度,如果加了也不会渲染。

 

 (可选)

查看 该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用colorcolor属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。

grayscale(%)

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

hue-rotate(deg)

给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。

invert(%)

反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。

opacity(%)

转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。

saturate(%)

转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。

sepia(%)

将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

url()

URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。

例如:

 filter: url(svg-url#element-id)


:link:伪类选择器用于选取未被访问的链接。

*:link 选择器不会设置已经访问过的链接的样式。




    百度


:visited:伪类选择器用于选取已被访问的链接。




    W3Sschool
    Google
    Wikipedia

    

注释::visited 选择器为已被访问的链接设置样式。


:active:伪类选择器用于选择活动链接。点击的瞬间生效





    

这是一个链接。

注释:在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!

注释:在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效!


:focus:伪类选择器用于选取获得焦点的元素。




    

在文本框中点击,您会看到黄色的背景:

First name:
Last name:

注释:如果 :focus 用于 IE8 ,则必须声明 。


:after:伪类选择器在被选元素的内容之后插入新内容。


:before:伪类选择器在被选元素的内容之前插入新内容。


font属性:可以统一连写

font-size: 字体大小 例:font-size: 16px;

font-family: 字体类型 例:font-family: "微软雅黑", sans-serif;

font-style: 字体样式 例:font-style: normal; 

描述
normal 默认,普通字体
italic 斜体
oblique 倾斜字体

font-weidth: 字体粗细 例:font-weidth: normal;

描述
normal 默认,正常粗细
bold 粗体
bolder 更粗的字体
lighter 更细的字体

100

200

300

400

500

600

700

800

900

定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。


transistion属性:可以统一连写

transition: all 1s;  在规定的时间从一个大小变换到其他大小,过度时间曲线的延迟时间。all:表示所有属性

transition-property: background; 针对某一个属性进行过度,可以添加多个属性。

transition-duration: 1s; 过渡时间。

transition-timing-function: ease; 过度时间曲线,默认

描述
ease 默认值,逐渐变慢。
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速再减速
cubic-bezier([参数]) 贝塞尔曲线

transition-delay: 5s; 过度延迟时间。


text属性:文本样式

text-align: 文本对齐方式。例:text-align: center; 

描述
left 默认,左对齐
center 居中对齐
right 右对齐

text-indent: 段落首行缩进。 例:text-indent: 2em; 中文首行缩进2字符常用

text-decoration: 文本装饰线。例:text-decoration: none;

描述
none 默认,不显示任何装饰线
underline 在文本下方显示装饰线
overline 在文本上方显示装饰线
line-through 在文本中间显示装饰线,相当于删除线

text-transform: 英文字母大小写转换。例:text-transform: none;

描述
none 默认,保持文本中英文单词的默认大小写
capitalize 单词首字母大写
uppercase 全大写
lowercase 全小写

text-shadow: 文本阴影。例:text-shadow: 0 0 10 red;

四个值分别为:

描述
水平方向阴影偏移(h-shadow) “0”表示维持原位,正数为向右偏移,负数为向左偏移。单位为像素“px”。
垂直方向阴影偏移(v-shadow) “0”表示维持原位,正数为向上偏移,负数为向下偏移。单位为像素“px”。
阴影模糊距离(blur) 用正数表示阴影模糊的单位距离,距离越大模糊程度越高,单位为像素“px”。
阴影的颜色(color) 支持Web技术中的常用颜色模式:“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。

text-overflow: 当文本溢出时的设置。例:text-overflow: clip;

描述
clip 裁剪文本
ellipsis

多出来的文本用省略号代替,

需要文本设置不换行

显示三排再省略:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

background属性:背景设置

background-color: 设置背景颜色。例:background-color: red;

background-image: 设置背景图片。例:background-image: url(图片地址);

background-repeat: 设置背景图片的格式。例:background-repeat: repeat;

描述
repeat 默认,以“平铺”的方式排列图片
repeat-x 只在水平方向(X轴方向)进行重复
repeat-y 只在垂直方向(Y轴方向)进行重复
no-repeat 不平铺

background-position: 背景图定位。例:background-position: left top;

描述
方位英文单词 有“left”、“right”、“top”、“bottom”和“center”。用法如:“left top”(默认),设置背景图在元素内的“左上方”;“right bottom”,设置背景图在元素内的“右下方”;“center center”,设置背景图在元素的“中心”。
百分比单位 用法如:“0% 50%”,设置背景图在元素内“水平方向”的“左方”,垂直方向的“中心”;“50% 50%”,,设置背景图在元素内的“中心”;“100% 100%”,,设置背景图在元素内的“右下方”。
像素单位 背景图的“左上角”相对于元素“左上角”偏移的距离,如“10px 20px”,设置背景图“水平向右”偏移10像素,“垂直向下”偏移20像素。

background-attachment: 固定背景图片。例:background-attachment: fixed

描述
scroll 默认值,当页面滚动的时候,背景图也跟随页面同步滚动
fixed 页面出现滚动条后就算页面滚动,背景图也会固定在原来的位置不会跟随页面滚动。

background-clip: 背景裁切范围。例:background-clip: border-box;

描述
border-box 默认,背景的覆盖范围从“border”开始
padding-box 背景的覆盖范围从“padding”开始
content-box 背景的覆盖范围从“content”开始

background-size: 背景图片的大小。例:background-size: 100% 100%;

描述
像素值

设置两个值,一个为宽、一个为高,单位为“PX”。

亦可以一个值为固定值一个为auto,达到原始图像比例的效果

百分比值 结构与像素值一样,单位为"%"
contain 自动将背景图像填满元素的其中一边,图像的比例保持不变。
cover 在保持图像原始比例的情况下,将元素的背景区域完全覆盖,超出元素宽高的部分会自动被裁剪,是一种比较“智能”的背景图片大小设置方式,通过配合“background-position”属性使用可以将开发者认为背景图像中“更重要”的部分通过定位显示出来。

background-origin: 背景图像开始的位置。例:background-origin: content-box;

描述
border-box 默认,背景的覆盖范围从“border”开始
padding-box 背景的覆盖范围从“padding”开始
content-box

背景的覆盖范围从“content”开始 

background: 背景渐变色。例:background: linear-gradient(red, black);

线性渐变:沿着一条直线进行,必须要具有两种或以上的颜色

/*最基本的渐变*/
background: linear-gradient(#d80000,#2c2cff);

/*一个有方向的渐变*/
background: -webkit-linear-gradient(left,#bce510,#e66055);    //谷歌浏览器
background: -moz-linear-gradient(left,#bce510,#e66055);       //搜狐浏览器
background: -ms-linear-gradient(left,#bce510,#e66055);        //IE浏览器
background: linear-gradient(to right,#bce510,#e66055);        //不进行适配

/*边角方向开始的渐变*/
background: -webkit-linear-gradient(left top,#d80000,#2c2cff);
background: -moz-linear-gradient(left top,#d80000,#2c2cff);
background: -ms-linear-gradient(left top,#d80000,#2c2cff);
background: linear-gradient(to bottom right,#d80000,#2c2cff);

/*有角度的渐变*/
background: -webkit-linear-gradient(15deg,#d8b700,#0bcc6c);
background: -moz-linear-gradient(15deg,#d8b700,#0bcc6c);
background: -ms-linear-gradient(15deg,#d8b700,#0bcc6c);
background: linear-gradient(15deg,#d8b700,#0bcc6c);

/*多色渐变*/
background: -webkit-linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -moz-linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -ms-linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);

/*多重多色的渐变*/
background: -webkit-linear-gradient(0deg,rgba(126, 3, 191, 0.1),rgba(126, 3, 191, 0.8)),
            -webkit-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
background: -moz-linear-gradient(0deg,rgba(126, 3, 191, 0.1),rgba(126, 3, 191, 0.8)), 
            -moz-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
background: -ms-linear-gradient(0deg,rgba(126, 3, 191, 0.3),rgb(126, 3, 191)), 
            -ms-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
background: linear-gradient(0deg,rgba(126, 3, 191, 0.3),rgb(126, 3, 191)), 
            -linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));

/*重复线性渐变*/
background: -webkit-repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);
background: -moz-repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);
background: -ms-repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);
background: repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);

径向渐变:颜色的变化过度方式是以一个圆的圆心为参照进行的

background: -webkit-radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -moz-radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -ms-radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);

transform属性:变形转换,综合运用:translate、rotate、scale、skew

transform: translate(100px, 100px); XY平移

transform: translateX(100px); 横向平移

transform: translateY(100px); 纵向平移

transform: rotate(100deg); 按照顺时针旋转;

transform: rotateX(100deg); 按照上下旋转

transform: rotateY(100deg); 按照左右旋转

transform: scale(1.5); 放大或缩小倍数

transform: scaleX(1.2); 左右放大或缩小

transform: scaleY(1.2); 上下放大或缩小

transform: skew(15deg); 倾斜

transform: skewX(15deg); X轴倾斜

transform: skewY(15deg); Y轴倾斜

transform-origin: top left; 定义一个原点

transform-style: flat; 2d平面动画 

transform-style: preserve-3d; 3d动画


animation属性: 动画

animation-name: 定义动画的名称,使用该属性调用关键帧执行动画。例:animation-name: resizeWord;

@keyframes: 动画关键帧定义,使用animation调用。例:

/*英文单词模式*/
@keyframes resizeWord{
    from{ width: 100px }
    to{ width: 800px; }
}

/*百分数模式*/
@keyframes resizeWord{
    0%{ width: 100px }
    20%{ width: 200px; }
    40%{ width: 400px; }
    60%{ width: 600px; }
    80%{ width: 800px; }
    100%{ width: 1000px; }
}

animation-duration: 动画执行时间。例:animation-duration: 2s;

animation-timing-function: 动画事件曲线。例:animation-timing-function: ease;

描述
ease 默认值,逐渐变慢。
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速再减速
cubic-bezier([参数]) 贝塞尔曲线

animation-delay: 动画延迟时间。例:animation-delay: 2s;

animation-iteration-count: 动画播放的次数。例:animation-iteration-count: 1; 

描述
1 表示在执行某事件后只执行1次动画。
[number] 任意正整数,表示在执行某事件后只执行[numver]次动画。
infinite 表示在执行某事件后“无限次”执行动画。

animation-direction: 动画逆时针播放。例:animation-direction: alternate;

描述
normal 默认值。动画应该正常播放。
alternate 动画应该轮流反向播放。

animation-play-state: 动画的播放与暂停。animation-play-state: running; 

描述
running 播放动画
paused 暂停动画

animation-fill-mode: 设定元素动画形态,它可以预设值动画播放前的“第一帧”和保留动画播放完成后的“最后一帧”。例:animation-fill-mode: backwards

描述
backwards 让元素保持动画第一帧定义里所设置的CSS属性,直到动画开始执行。
forwards 让元素保持动画播放结束后最后一帧定义里所设置的CSS属性。
both 让元素保持动画第一帧里定义的CSS属性,直到动画开始,动画播放完成后又保持动画最后一帧的属性。

animation:组合写法:动画名称、执行时间、速度曲线、延迟时间、播放次数、周期逆向播放、播放状态(开始/暂停)、首帧预设/末帧保留


弹性盒子布局:需要将属性值添加到需要布局的父元素上面才能实现

display: flex; 弹性盒子开始代码,一切开端

行列布局:

flex-direction: row; 默认行,从左往右排列

flex-direction: row-reverse; 从右往左排列,内容也一起调换排列

flex-direction: column; 列,从上往下排列

flex-direction: column-reverse; 从下往上排列,内容也一起调换排列

水平对齐:

justify-content: flex-start; 默认,水平左对齐

justify-content: flex-end; 水平右对齐

justify-content: center; 水平居中对齐

justify-content: space-between; 水平两端分散对齐

justify-content: space-around; 水平分散对齐

垂直对齐:

align-items: flex-start; 默认,垂直顶端对齐

align-items: flex-end; 垂直底端对齐

align-items: center; 垂直居中对齐

align-items: baseline; 基线对齐

align-items: stretch; 子标签高度为auto或者没有设置时,高度自动与父元素高度同步

换行:需要多行对齐时必添加此项

flex-wrap: none; 

描述
none 不换行
wrap 换行
wrap-reverse 换行颠倒

多行对齐:

align-content: flex-start; 多行顶端对齐

align-content: flex-end; 多行底端对齐

align-content: center; 多行居中对齐

align-content: space-between; 多行两端分散对齐

align-content: space-around; 多行两端对齐

散装属性值:定义到子元素中

flex-grow: 使子元素瓜分父元素剩下的空间。例:flex-grow: 1;

flex-basis: 向父元素预约设置好的空间,并且此元素的权限大于width。如果两者有一个为auto,那么非auto的优先级更高。而且此元素受到max-width与min-width的限制。例:flex-basis: 100px;

flex-shrink: 当子元素的总宽度大于了父元素的宽度时,用此方法按比例缩减子元素的宽度。例:flex-shrink: 1;

你可能感兴趣的:(知识点回顾)