0803 NOTE

0803 NOTE

边框线和背景

border-radius

/*border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性*/
border-radius			/*圆角边框*/
border-left-radius		/*圆角左边框*/
border-top-radius		/*圆角上边框*/
border-right-radius		/*圆角右边框*/
border-bottom-radius	/*圆角下边框*/
/*
语法：border-radius: 1-4 length|% / 1-4 length|%
length定义弯道的形状，%定义角落的形状
*/
border-top-left-radius: 2em 0.5em;		/*左上角边框*/
border-top-right-radius: 1em 3em;		/*右上角边框*/
border-bottom-right-radius: 4em 0.5em;	/*右下角边框*/
border-bottom-left-radius: 1em 3em;		/*左下角边框*/

box-shadow

/*
用于设置一个或多个下拉阴影的框
语法：
box-shadow: h-shadow v-shadow blur spread color inset

h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影
*/

border-image

/*图片创建边线*/
div {
	-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
	-o-border-image:url(border.png) 30 30 round; /* Opera */
	border-image:url(border.png) 30 30 round;
	}
/*
语法：
border-image: source slice width outset repeat|initial|inherit

border-image-slice  图片边框向内偏移。                                           
border-image-width   图片边框的宽度。                                             
border-image-outset  边框图像区域超出边框的量。                                   
border-image-repeat  图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched
)。
*/

background-clip

/*规定背景的绘制区域。 */ 
/*
语法：
background-clip: border-box|padding-box|content-box

border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。
*/

background-origin

/*规定背景图片的定位区域。*/
/*
语法：
background-origin: padding-box|border-box|content-box

padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框
*/

background-size

/*指定背景图片大小*/
/*
语法：
background-size: length|percentage|cover|contain

length	
设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	
将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
*/

div{
    background-image: url("./img/IMG_20170529_115817.jpg");
    width: 800px;
    height: 600px;
    background-size: 100% 100%;
    border: 10px dashed #ccc;
    padding: 20px;
    }
div:nth-child(1){
    background-clip: content-box;
    }
div:nth-child(2){
     background-clip: padding-box
    }
div:nth-child(3){
      background-clip: border-box;
      ackground-origin: border-box;
    }

文本

hanging-punctuation

/*规定标点字符是否位于线框之外。*/
/*
语法：
hanging-punctuation: none|first|last|allow-end|force-end

none	不在文本整行的开头还是结尾的行框之外放置标签符号。
first	标点附着在首行开始边缘之外。
last	标点附着在首行结尾边缘之外。
allow-end	
force-end
*/

punctuation-trim

/*规定是否对标点字符进行修剪。*/
/*
语法：
punctuation-trim: none|start|end|allow-end|adjacent

none	请勿修剪打开或关闭标点符号
start	在每一行的开头放置开头标点符号
end	在每一行的末尾修剪结束标点符号
allow-end	如果另有不适合之前的理由，修剪每行末尾的结束标点符号。
adjacent	若以前相邻字符修剪开口punctuation是一个全形开口，中间或结束标点符号，或表意文字空间。修剪结束标点符号，如果下一个相邻的字符是一个全形关闭或中间punctuation，或表意文字空间
*/

text-align-last

/*设置如何对齐最后一行或紧挨着强制换行符之前的行。*/

/*
语法：
text-align-last: auto|left|right|center|justify|start|end|initial|inherit

auto	默认值。最后一行被调整，并向左对齐。	
left	最后一行向左对齐。	
right	最后一行向右对齐。	
center	最后一行居中对齐。	
justify	最后一行被调整为两端对齐。	
start	
最后一行在行开头对齐（如果 text-direction 是从左到右，则向左对齐；如果 text-direction 是从右到左，则向右对齐）。	
end	
最后一行在行末尾对齐（如果 text-direction 是从左到右，则向右对齐；如果 text-direction 是从右到左，则向左对齐）。	
initial	设置该属性为它的默认值。请参阅 initial。	
inherit	从父元素继承该属性。请参阅 inherit。
*/

text-emphasis

/*向元素的文本应用重点标记以及重点标记的前景色。*/

/*
语法：
text-emphasis: text-emphasis-style text-emphasis-color

text-emphasis-style	向元素的文本应用重点标记。
text-emphasis-color	定义重点标记的前景色。
*/

text-justify

/*规定当 text-align 设置为 "justify" 时所使用的对齐方法。*/
/*
语法:
text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim

auto	浏览器决定齐行算法。
none	禁用齐行。
inter-word	增加/减少单词间的间隔。
inter-ideograph	用表意文本来排齐内容。
inter-cluster	只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。
distribute	类似报纸版面，除了在东亚语系中最后一行是不齐行的。
kashida	通过拉伸字符来排齐内容。
*/

text-outline

/*规定文本的轮廓。*/
/*
语法：
text-outline: thickness blur color;

thickness	必需。轮廓的粗细。
blur	可选。轮廓的模糊半径。
color	必需。轮廓的颜色。参阅 CSS 颜色值 。
*/

text-overflow

/*规定当文本溢出包含元素时发生的事情。*/
/*
语法：
text-overflow: clip|ellipsis|string;

clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。
*/

text-shadow

/*向文本添加阴影。*/
/*
语法：
text-shadow: h-shadow v-shadow blur color;

h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。
*/

text-wrap

/*规定文本的换行规则。*/
/*
语法：
text-wrap: normal|none|unrestricted|suppress

normal	只在允许的换行点进行换行。
none	不换行。元素无法容纳的文本会溢出。
unrestricted	在任意两个字符间换行。
suppress	压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。
*/

word-break

/*规定非中日韩文本的换行规则。*/
/*
语法：
word-break: normal|break-all|keep-all

normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。
*/

word-wrap

/*允许对长的不可分割的单词进行分割并换行到下一行。*/	
/*
语法：
word-wrap: normal|break-word	

normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。
*/

弹性盒模型

/*
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

注：
弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
*/

flex-direction

/*
属性指定了弹性子元素在父容器中的位置。
flex-direction: row | row-reverse | column | column-reverse

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

justify-content

/*
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content: flex-start | flex-end | center | space-between | space-around

flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
*/

align-items

/*
设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：
如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
*/

flex-wrap

/*
属性用于指定弹性盒子的子元素换行方式。
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit

nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。
*/

align-content

/*
用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
align-content: flex-start | flex-end | center | space-between | space-around | stretch

stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
*/

弹性子元素属性

排序

order：<integer>		设置弹性容器内弹性子元素的属性:
<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值。

对齐

margin:auto 居中

align-self

/*
用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
align-self: auto | flex-start | flex-end | center | baseline | stretch

auto：
如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：
如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
*/

flex

/*
用于指定弹性子元素如何分配空间。
flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。
*/

媒体查询

​ CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情，例如：

• viewport(视窗) 的宽度与高度
• 设备的宽度与高度
• 朝向 (智能手机横屏，竖屏) 。
• 分辨率

语法

@media not|only mediatype and (expressions) {
    /*CSS 代码...;*/
}
/*
如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。
除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all: 所有设备，这个应该经常看到。

*/

css3多媒体类型

all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

/*在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色*/
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
/*在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧*/
@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}
/*实例在屏幕可视窗口尺寸小于600像素时将div元素隐藏*/
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

动画

CSS3 @keyframes 规则

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

• 规定动画的名称
• 规定动画的时长

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

/*改变背景色和位置*/
@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

@keyframes 规则和所有动画属性：

@keyframes	规定动画。
animation	所有动画属性的简写属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

/*运行myfirst动画，设置所有的属性*/
div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 与 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}
/*简写*/
div
{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

变换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

2D变换

translate()

/*根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。*/
div
{
transform: translate(50px,100px);
/*translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。*/
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

rotate()

/*在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。*/
div
{
transform: rotate(30deg);
/*rotate值（30deg）元素顺时针旋转30度。*/
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

scale()

/*该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数*/
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
/*scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。*/

skew()

/*
transform:skew(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
*/
div
{
transform: skew(30deg,20deg);
/*skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。*/
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

matrix()

/*matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。*/
/*利用matrix()方法旋转div元素30°*/
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

3D变换

rotateX()

/*围绕其在一个给定度数X轴旋转的元素。*/
div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}

rotateY()

/*围绕其在一个给定度数Y轴旋转的元素。*/
div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

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

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

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...)

/*从上到下的线性渐变*/
#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);
}

如果想要在渐变的方向上做更多的控制，可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）

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

0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

/*带有指定的角度的线性渐变*/
#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

/*设置多个颜色节点*/
#grad {
  background-image: linear-gradient(red, yellow, green);
}
#grad {
  /* 标准的语法 */
  background-image: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
}

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

/*从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色*/
#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

repeating-linear-gradient() 函数用于重复线性渐变：

#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

径向渐变由它的中心定义。

为了创建一个径向渐变，必须至少定义两种颜色节点。颜色节点即想要呈现平稳过渡的颜色。同时，也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

/*颜色节点均匀分布的径向渐变*/
#grad {
  background-image: radial-gradient(red, yellow, green);
}
/*颜色节点不均匀分布的径向渐变*/
#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

/*形状为圆形的径向渐变*/
#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

size 参数定义了渐变的大小。它可以是以下四个值：

• closest-side
• farthest-side
• closest-corner
• farthest-corner

/*带有不同尺寸大小关键字的径向渐变*/
#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
 
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

repeating-radial-gradient() 函数用于重复径向渐变：

/*重复的径向渐变*/
#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

其他

<style>
        .div1,.div2{
            width: 400px;
            height: 400px;
            border:1px solid #000;
            float: left;
            margin: 20px;
            
        }
</style>

 <div class="div1"></div>
    <div class="div2"></div>
    <img src="./img/Other10.png"  draggable="true" id="img">
    <button>上传</button>

    <button id="fullBn">全屏</button>
    <script>

        /* var img=document.querySelector("img");
        var div1=document.querySelector(".div1");
        var div2=document.querySelector(".div2");
        var bn=document.querySelector("button");
        var arr=[];

        img.addEventListener("dragstart",dragHandler);
        div1.addEventListener("dragover",dragoverHandler);
        div2.addEventListener("dragover",dragoverHandler);
        div1.addEventListener("drop",dropHandler);
        div2.addEventListener("drop",dropHandler);
        bn.addEventListener("click",clickHandler);

        function dragHandler(e){
            // console.log(e);
            e.dataTransfer.setData("txt",this.id);
        }

        function dragoverHandler(e){
            // console.log(e);
            e.preventDefault();
        }

        function dropHandler(e){
        //    var id=e.dataTransfer.getData("txt");
        //    this.appendChild(document.getElementById(id));
        //    console.log(e.dataTransfer.files);
        e.preventDefault();
        console.log(e.dataTransfer.files[0]);
            arr.push(e.dataTransfer.files[0]);
            var txt=document.createElement("p");
            txt.textContent=e.dataTransfer.files[0].name;
            this.appendChild(txt);
        }


        function clickHandler(e){
            // console.log(arr);
            var render=new FileReader();
            render.readAsArrayBuffer(arr[0]);
            render.addEventListener("load",loadHandler);
        }

        function loadHandler(e){
          var data=this.result;
         
        //   var xhr=new XMLHttpRequest();
        //   xhr.addEventListener("load",loadHandler1);
        //   xhr.open("POST","...");
        //   xhr.send(data);
        }

        function loadHandler1(e){

        } */


       /*  var fullBn=document.querySelector("#fullBn");
        var bool=false;
        fullBn.addEventListener("click",clickHandler);

        function clickHandler(){
            bool=!bool;
            if(bool){
                document.documentElement.requestFullscreen();
                fullBn.textContent="取消全屏";
            }else{
                document.exitFullscreen();
                fullBn.textContent="全屏";
            }
        } */


        // var wk=new Worker("./a.js");
        // wk.addEventListener("message",messageHandler);

        // function messageHandler(e){
        //     console.log(e.data);
        // }
    </script>

案例

立方体

 <style>
    img{
      width: 200px;
      height: 200px;
    }
    #box{
      perspective: 800px;
      transform-style: preserve-3d;
      transition: 5s infinite;
      transform: rotateX(0deg) rotateY(0deg);
    }
    .cube_box{
      width: 200px;
      height: 200px;
      margin: 100PX auto;
      position: relative;
      transform-style: preserve-3d;
      transition: 50s;
      transform:rotateX(0deg) rotateY(0deg);
    }
    .cube_box:hover{
      transform:rotateX(3600deg) rotateY(3600deg);
    }
    .cube{
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
      position: absolute;
    }
    /*原来这六个面的div是叠加在一起的通过旋转 移动来让他们形成正方体*/
    .left{
      transform:rotateY(90deg) translateZ(-100px);
    }
    .right{
      transform:rotateY(90deg) translateZ(100px);
    }
    .top{
      transform:rotateX(90deg) translateZ(100px) rotateZ(360deg);
    }
    .buttom{
      transform:rotateX(90deg) translateZ(-100px) rotateZ(180deg);
    }
    .back{
      transform:rotateX(0deg) translateZ(-100px) rotateZ(180deg);
    }
    .front{
      transform:rotateX(0deg) translateZ(100px);
    }
  </style>
  
  <div id="box">
    <div class="cube_box" id="cube_box">
      <div class="cube front"><img src="img/a.jpeg"></div>
      <div class="cube back"><img src="img/b.jpg"></div>
      <div class="cube left"><img src="img/c.jpg"></div>
      <div class="cube right"><img src="img/d.jpg"></div>
      <div class="cube top"><img src="img/e.jpg"></div>
      <div class="cube buttom"><img src="img/2-.jpg"></div>
    </div>
  </div>

轮播图

 <style>
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            width: 200px;
            height: 24px;
            justify-content: space-evenly;
            position: absolute;
            bottom: 30px;
            left:50%;
            transform: translate(-50%);
            z-index: 10;
         
        }
        li{
            width: 18px;
            height: 18px;
            border:2px solid #FF0000;
            border-radius: 18px;
        }
        .crousel{
            width: 1410px;
            height: 470px;
            position: relative;
            overflow: hidden;
        }
        .imgCon>img{
            width: 1410px;
            height: 470px;
            position: absolute;
        } 

        .move0{
       
            animation: left_move0 1s;
        }
        .move1{
      
            animation: left_move1 1s;
        }
        .move2{
          
            animation: left_move2 1s;
        }
        .move3{
          
            animation: left_move3 1s;
        }
      

        @keyframes left_move0{
            0%{
               transform: translate(0px);
            }
            100%{
               transform: translate(-1410px);
            }

        }
        @keyframes left_move1{
            0%{
               transform: translate(1410px);
            }
            100%{
               transform: translate(0px);
            }

        }

        @keyframes left_move2{
            0%{
               transform: translate(0px);
            }
            100%{
               transform: translate(1410px);
            }

        }
        @keyframes left_move3{
            0%{
               transform: translate(-1410px);
            }
            100%{
               transform: translate(0px);
            }

        }
    </style>
    
    <div class="crousel">
        <div class="imgCon">
            <img src="./img/a.jpeg" alt="">
            <img src="./img/b.jpg" alt="">
            <img src="./img/c.jpg" alt="">
            <img src="./img/d.jpg" alt="">
            <img src="./img/e.jpg"  alt="">
        </div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script>
        var ul,imgs,prev,dirc,prevImg;
        var pos=0,bool=false;
        init();
        function init(){
            ul=document.querySelector("ul");
            imgs=Array.from(document.querySelectorAll("img"));
            imgs[0].style.zIndex=1;
            prevImg=imgs[0];
            prevChange();
            ul.addEventListener("click",clickHandler);
        }

        function clickHandler(e){
            if(bool) return
            if(e.target.nodeName!=="LI") return;
            var index=Array.from(ul.children).indexOf(e.target);
            if(index===pos) return;
            if(index>pos)dirc="left";
            else dirc="right";
            pos=index;
            bool=true;
            changeImg();
            prevChange()
            
        }

        function changeImg(){
            
            if(dirc==="left"){
                prevImg.className="move0";
                imgs[pos].className="move1"
                imgs[pos].style.zIndex=1;
            }else{
                prevImg.className="move2";
                imgs[pos].className="move3"
                imgs[pos].style.zIndex=1;
            }


            setTimeout(function(){
                    prevImg.style=""
                    prevImg.className="";
                    imgs[pos].className=""
                    prevImg=imgs[pos];
                    bool=false;
                    prevImg.style.zIndex=1;
                },1000);
        }


        function prevChange(){
            if(prev){
                prev.style.backgroundColor="rgba(255,0,0,0)";
            }
            prev=ul.children[pos];
            prev.style.backgroundColor="rgba(255,0,0,1)";
           
        }
    </script>