线性渐变：
1.linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果
a)语法：
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
b)参数说明：
第一个参数表示线性渐变的方向，
1.to left：设置渐变为从右到左。相当于: 270deg;
2.to right：设置渐变从左到右。相当于: 90deg;
3.to top：设置渐变从下到上。相当于: 0deg;
4.to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。也可以直接指定度数，如45deg
第二个参数是起点颜色,可以指定颜色的位置
第三个参数是终点颜色，你还可以在后面添加更多的参数，表示多种颜色的渐变
c)示例：
div{
/*添加渐变：渐变不是一个单一钩，它产生的是图像，所以需要使用background*/
/*linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...);*/
/*方向：
to top:0deg
to right:90deg
to bottom:180deg --默认值
to left:270deg*/
/*background: linear-gradient(to right,red,blue)*/;
width: 400px;
height: 400px;
margin: 100px auto;
background: linear-gradient(0deg,red,orange,yellow,green, #00ffff,blue,purple);
}
径向渐变：
2.radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
a)语法：
<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
b)取值：
i.<position> 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center
ii.shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样
iii.size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner
iv.<color>：指定颜色。Rgba hsla
c)一些案例示例代码：
.div1{
width: 200px;
height: 200px;
margin: 10px auto;
/*设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色*/
background: radial-gradient(circle at center,red,blue);
}
.div2{
width: 200px;
height: 200px;
border-radius: 100px;
margin: 10px auto;
/*设置径向渐变效果:从指定坐开始，从一种颜色到另外一种颜色*/
background: radial-gradient(circle at 50px 50px,#eeffff,#334455);
}
.div3{
width: 200px;
height: 200px;
border-radius: 100px;
margin: 10px auto;
/*设置径向渐变效果:从指定坐标开始，从一种颜色到另外一种颜色，同时指定颜色的位置*/
background: radial-gradient(circle at 50px 50px,#eeffff 0%,#666 70%,rgba(33,33,33,0.8) 80%);
}
/*指定渐变的形状*/
.div4{
width: 200px;
height: 100px;
margin: 10px auto;
/*设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色*/
background: radial-gradient(ellipse at center,red,green,blue);
}
/*指定渐变的size*/
.div5{
width: 200px;
height: 100px;
margin: 10px auto;
/*设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色,同时指定了大小为渐变到最近的边*/
background: radial-gradient(circle closest-side at center,red,green,blue);
}
/*使用系统提供的位置设置*/
.div6{
width: 200px;
height: 100px;
margin: 10px auto;
/*设置径向渐变效果:从右上角点开始，从一种颜色到另外一种颜色*/
background: radial-gradient(circle at top right,red,green,blue);
}
</style>
/*添加径向渐变：产生也是图像*/
/*background: radial-gradient(red,blue);*/
/*语法：radial-gradient(形状 大小 坐标,颜色1，颜色2...)：
形状shape:circle:产生正方形的渐变色 ellipse:适配当前的形状,如果是正方形的容器，两者效果一样.如果宽高不一样，默认效果切换到ellipse
at position:坐标，默认在正中心。可以赋值坐标（参照元素的左上角），也可以赋值关键字(left center right top bottom)
大小size: closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner*/
/*background: radial-gradient(circle,red,blue);*/
/*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/
/*background: radial-gradient(at left top,red,blue);*/
重复渐变demo：
<style>
body{
background-color: #ccc;
}
div:first-of-type{
width: 300px;
height: 300px;
/*background: radial-gradient(
#fff 0%,#fff 10%,
#000 10%,#000 20%,
#fff 20%,#fff 30%,
#000 30%,#000 40%);*/
background: repeating-radial-gradient(circle closest-side at center center,
#fff 0%,#fff 10%,
#000 10%,#000 20%);
}
div:last-of-type{
width: 200px;
height: 800px;
background: repeating-linear-gradient(45deg,
#fff 0%,#fff 10%,
#000 10%,#000 20%);
}
</style>
</head>
<body>
<div></div>
<div></div>
background(背景样式)：
<style>
div{
width: 500px;
height: 500px;
border: 1px solid red;
overflow: scroll;
/*1.添加背景颜色*/
/*background-color: skyblue;*/
/*2.添加背影图片
如果图片大于容器，那么默认就从容器左上角开始放置
如果图片小于容器，那么图片默认会平铺*/
/*background-image: url("../images/bg-img.jpg");*/
background-image: url("../images/share1.png");
/*3.设置背景平铺
round:会将图片进行缩放之后再平铺
space:图片不会缩放平铺，只是会在图片之间产生相同的间距值*/
/*background-repeat: space;*/
/*4.设置在滚动容器的背景的行为：跟随滚动/固定
fixed:背景图片的位置固定不变
scroll:当滚动容器的时候，背景图片也会跟随滚动*/
/*local和scroll的区别：前提是滚动当前容器的内容
local:背景图片会跟随内容一起滚动
scroll:背景图片不会跟随内容一起滚动*/
background-attachment: scroll;
}
</style>
</ead>
<body>
<div>
<p style="height: 800px;"></p>
</div>
<span style="height: 800px;display: block"></span>
background-size属性：
1.设置数值：
设置背景图片的大小 宽度/高度 宽度/auto(保持比例自动缩放)
建议：在使用这个属性之前衔确定宽高比与容器的宽高比是否一致，否则会造成图片失真变形：
//设置宽高：
background-size: 300px 500px;
// 只设置宽 高度自定义
background-size: 300px;
2.设置百分比：
background-size: 50% 50%;
设置百分比，是参照父容器可放置内容区域的百分比
3.contain与cover：
设置contain:按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，使图片全部包含在容器内
1.图片大于容器：有可能造成容器的空白区域,将图片缩小
2.图片小于容器：有可能造成容器的空白区域，将图片放大
cover:与contain刚好相反，背景图片会按比例缩放自 适应整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出
1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见
2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容的溢出
总结：
a)auto：此值为默认值，保持背景图片的原始高度和宽度;
b)number：此值设置具体的值，可以改变背景图片的大小;
c)percentage：此值为百分值，可以是0%〜100%之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
d)cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小
e)contain：此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止。
f)当background-size取值为number和percentage时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而是会参照第一个参数值进行等比例缩放。
demo：
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100%;
height: 360px;
background: url("../images/slide_01_2000x410.jpg");
/*设置背景图片的大小*/
background-size: cover;
/*设置position*/
background-position: center;
}
</style>
background-origin与background-clip：
background-origin:
1.作用：background-origin 属性规定 background-position 属性相对于什么位置来定位。默认值是left top左上角
2.语法：background-origin: padding-box|border-box|content-box;
3.属性值说明：
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。
background-clip:
1.background-clip 属性规定背景的绘制区：虽然是设置裁切，但是控制的是显示。说白了，就是设置最终显示那些区域
2.语法：background-clip: border-box|padding-box|content-box;
3.属性值说明：
值 描述
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
/*设置背景偏移，参照background-origin原点，这个原点默认在容器的左上角*/
background-position: -20px 0;
/*添加padding*/
padding:14px;
/*设置背景坐标的原点
border-box:从border的位置开始填充背景，会与border重叠
padding-box:从padding的位置开始填充背景，会与padding重叠
content-box:从内容的位置开始填充背景*/
background-origin: content-box;
/*设置内容的裁切:设置的是裁切，控制的是显示
border-box:其实是显示border及以内的内容
padding-box:其实是显示padding及以内的内容
content-box:其实是显示content及以内的内容*/
background-clip: content-box;
边框图片:
border-image-source:可以指定边框图片的路径,默认只是填充到容器的四个角点:
border-image-source: url("../images/border1.png");
image.png
让它成为九宫格：border-image-slice:设置四个方向上的裁切距离.fill:做内容的内部填充 问题：如果分别设置1，2，3，4个值代表什么意思
border-image-slice: 27 fill;
border-image-width:边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。
细节：
1.边框图片的本质是背景，并不会影响元素内容的放置
2.内容只会被容器的border和padding影响
建议：一般将值设置为原始的边框的宽度
/*border-image-width: 27px;*/
/*border-image-outset:扩展边框*/
/*border-image-outset: 0px;*/
/*border-image-repeat:
repeat:直接重复平铺
round:将内容缩放进行完整的重复平铺*/
/*border-image-repeat: round;*/
缩写
border-image: source slice / width/outset repeat;
border-image: url("../images/border1.png") 27 / 27px /0px round;
demo:
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 500px;
height: auto;
border: 10px solid red;
margin:100px auto;
/*添加边框图片*/
border-image-source: url("../images/btn_bg.png");
/*设置受保护的区域大小*/
border-image-slice: 10 fill;
/*设置边框图片的宽度
1.明确圆角的大小
2.明确受保护的区域的大小*/
border-image-width: 10px;
/*设置背景平铺效果 默认是stretch：拉伸*/
border-image-repeat: stretch;
}
</style>
image.png
过渡(transition)：
通过过渡transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点，必须规定两项内容：
1.规定希望把效果添加到哪个 CSS 属性上，
2.规定效果的时长
1.语法：
transition: property duration timing-function delay;
2.参数说明：
transition 属性是一个简写属性，用于设置四个过渡属性：transition-property |transition-duration |transition-timing-function |transition-delay
image.png
image.png
image.png
为多个样式同时添加过渡效果:
transition: left 2s linear 0s,background-color 5s linear 0s;
5.使用建议：
因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀，最好在放上我们W3C的标准写法，这样标准的会覆盖前面的写法，只要浏览器支持我们的transition属性，那么这种效果就会自动加上去，如:
-moz-transition: all 5s ease 1s;
-webkit-transition: all 1s ease 1s;
-o-transition: all 1s ease 1s;
transition: all 1s ease 1s;
demo:
<style>
*{
padding: 0;
margin: 0;
}
.menu{
width: 200px;
height:auto;
margin:100px auto;
}
.item{
width: 100%;
height:auto;
}
.item > h3{
height: 40px;
line-height: 40px;
background-color: #7dffe7;
color: orange;
border-bottom: 2px solid #ccc;
padding-left:10px;
}
.item > .itemBox{
width: 100%;
height:0px;
overflow: hidden;
/*display: none;*/
/*添加过渡效果:过渡效果只能产生从某个值到另外一个具体的值的过渡*/
/*1.一定要设置为哪些css样式添加过渡效果*/
/*transition-property: display;*/
transition-property: height;
/*2.一定要设置过渡效果的耗时*/
transition-duration: 1s;
}
.item > .itemBox > ul{
list-style: none;
background-color: #eaffb6;
padding:10px;
}
/*为item添加hover伪类*/
.item:hover > .itemBox{
/*display: block;*/
height: 110px;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<h3>市内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
</ul>
</div>
</div>
<div class="item">
<h3>省内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
</ul>
</div>
</div>
<div class="item">
<h3>国内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
</ul>
</div>
</div>
<div class="item">
<h3>国际新闻</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
<li>深圳超市肉菜档遭抢</li>
</ul>
</div>
</div>
</div>
transform(2D转换):
通过 CSS3 transform转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸.
1.2D移动：translate()。使用translate()函数，你可以把元素从原来的位置移动。移动参照元素左上角原点
a)语法：translate(tx) | translate(tx,ty)
b)tx是一个代表X轴（横坐标）移动的向量长度，当其值为正值时，元素向X轴右方向移动，反之其值为负值时，元素向X轴左方向移动。
c)ty是一个代表Y轴（纵向标）移动的向量长度，当其值为正值时，元素向Y轴下方向移动，反之其值为负值时，元素向Y轴上方向移动。如果ty没有显式设置时，相当于ty=0。
d)也可以使用translateX(tx) 或者 translateY(ty)
1.移动：
使用transform实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态
div:first-of-type:active{
/*
1.如果只有一个参数就代表x方向
2.如果有两个参数就代表x/y方向*/
/*transform: translate(100px);*/
/*transform: translate(400px,500px);*/
/*transform: translate(0px,500px);*/
/*添加水平或者垂直方向的移动*/
/*transform:translateX(300px);*/
transform:translateY(300px);
}
2.缩放:
div:nth-of-type(2):active{
/*实现缩放 1指不缩放，>1.01放大 <0.99缩小 参照元素的几何中
1.如果只有一个参数，就代表x和y方向都进行相等比例的缩放
2.如果有两个参数，就代表x/y方向*/
/*transform: scale(2);*/
/*transform: scale(2,1);*/
/*缩放指定的方向 */
/*transform:scaleX(0.5);*/
transform:scaleY(0.5);
}
3.旋转:
transform-origin可以可以设置轴的方位关键字是:left top right bottom center
div:nth-of-type(3){
/*设置旋转轴心
1.x y
2.关键字：left top right bottom center*/
background-color: purple;
transform-origin: left top;
}
div:nth-of-type(3):active{
/*transform:rotate(-90deg);
transform: translateX(700px);*/
/*同时添加多个transform属性值*/
transform: translateX(700px) rotate(-90deg);
/*transform: rotate(-90deg) translateX(700px);*/
}
4.斜切:
如果角度为正，则往当前轴的负方向斜切，如果角度为，则往当前轴的正方向斜切
div:nth-of-type(4):active{
background-color: blue;
transform:skew(-30deg);
/*transform:skew(30deg,-30deg);*/
/*设置某个方向的斜切值*/
/*transform:skewX(30deg);*/
/*transform:skewY(30deg);*/
}
transform: translate实现水平垂直居中：
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 400px;
height: 400px;
border-radius: 200px;
background-color: #ccc;
margin:100px auto;
position: relative;
}
.rec{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
/*定位的百分比是参照父容器的宽高*/
left: 50%;
top: 50%;
/*使用transform实现元素的居中 百分比是参照元素本身的宽高*/
transform: translate(-50%,-50%);
/*transform: translate(-50px,-50px);*/
}
</style>
</head>
<body>
<div class="box">
<div class="rec"></div>
</div>
3D转换：
三维变换使用基于二维变换的相同属性，可以让我们基于三个坐标方向对元素进行变换。和二维变形一样，三维变形可以使用transform属性来设置
1.3D移动
translate3d(X方向的偏移，Y方向的偏移，Z方向的偏移)
a)方法：translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)
b)示例：
div:hover{
/*Y轴移动+100px*/
/*transform:translateY(100px);*/
/*X轴移动100px*/
/*transform:translateX(100px);*/
/*x轴和Y轴方向同时移动*/
transform:translate3d(100px,100px,0px);
}
2.3D缩放
scale3d(x方向上的缩放，y方向的缩放，z方向的缩放)
a)scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleZ()
b)示例
div:hover{
/*Y轴方向放大1倍*/
/*transform: scaleX(2);*/
/*X轴方向缩小0.5*/
/*transform: scaleX(0.5);*/
/*x轴和Y轴方向同时进行缩放*/
transform: scale3d(2,0.5,1);
}
3.3D旋转
a)rotate3d(x,y,z,angle)：指定需要进行旋转的坐标轴
b)rotateX(angle) 是元素依照x轴旋转；
c)rotateY(angle) 是元素依照y轴旋转；
d)rotateZ(angle) 是元素依照z轴旋转
e)示例：
div:hover{
/*Y轴方向旋转45度*/
/*transform: rotateY(45deg);*/
/*X轴方向旋转90度*/
/*transform: rotateX(90deg);*/
/*x轴和Y轴方向同时进行旋转放*/
transform: rotate3d(1,1,0,45deg);
3D透视/景深效果
左手法则：大拇指指向当前坐标轴的下方向，手指环绕的方向就是正方向
f)perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective:none/0;时，相当于没有设perspective(length)。比如你要建立一个小立方体，长宽高都是200px。如果你的perspective < 200px ，那就相当于站在盒子里面看的结果，如果perspective 非常大那就是站在非常远的地方看（立方体已经成了小正方形了），意味着perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果
g) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心
h)transform-style：使被转换的子元素保留其 3D 转换(需要设置在父元素中)：
值 描述
flat 子元素将不保留其 3D 位置-平面方式。
preserve-3d 子元素将保留其 3D 位置—立体方式。
- 案例：立方体:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
margin:100px auto;
position: relative;
opacity: 0.5;
/*设置一下默认的变换，否则由于观察角度在正面，无法看到立方体*/
transform: rotateX(-30deg) rotateY(30deg);
/*保持3D效果*/
transform-style: preserve-3d;
}
/*公共样式*/
.front,.back,.left,.right,.top,.bottom{
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
.left{
background: red;
transform: translateX(-100px) rotateY(-90deg);
}
.right{
background: green;
transform: translateX(100px) rotateY(90deg);
}
.front{
background: blue;
transform: translateZ(100px);
}
.back{
background: pink;
transform: translateZ(-100px);
}
.top{
background: orange;
transform: translateY(-100px) rotateX(90deg);
}
.bottom{
background: purple;
transform: translateY(100px) rotateX(-90deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
网友评论