js333 > 计算机互联网 > Css背景渐变,css3渐变详解

原标题:Css背景渐变,css3渐变详解

浏览次数:68 时间:2019-11-20

css3圆角和渐变2种常用功能详解,css3圆角渐变详解

Css3圆角讲解:想必大家对于图片,背景圆角,都不陌生吧,

圆角语法:border-radius:圆角值;

这个值可以使用:em ,ex,pt,px,百分比;

Border-radius跟margin,padding差不多

Border-radius:lefttop,righttop,rightbottom,leftbottom。

<div class="box1"></div>

.box1{width:200px;height:100px;border-radius:30px 5px;background:#f66f17;margin-top:30px;}

  

金沙js333娱乐场 1

<div class="box2"></div>

.box2{width:200px;height:100px;border-radius:30px 20px 10px 0px;background:#f66f17;margin-top:30px;}

  

金沙js333娱乐场 2

对于圆角理解起来应该,很简单。

对于百分比:目前最安全的做法,就是将每个圆角边框的风格和宽度,都设为一样的值,并且避免使用百分比值。

IE9以下是不支持此属性

线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色);

Linear:渐变的类型(线性渐变);

渐变的形式:可选参数 有两种方式-1、设置旋转角度,0度代表水平从左到右,90度就是从上到下啦,从0度开始逆时针变换。

2、使用关键字,left代表从左到右,top代表从上到下,同理right就是从右到左,lefttop-从坐上到右下,同理leftbottom,righttop,rightbottom。

中间颜色与中间颜色位置为可选参数。

不过要考虑浏览器的兼容,咱们这样写:

-webkit-gradient(linear,0  0,0  100%,from(起始颜色,to(结束颜色));  /*for Safari4+,Chrome 2+*/

-webkit-linear-gradient(起始颜色, 结束颜色);  /*for Safari 5.1+,Chrome 10+*/

-moz-linear-gradient(起始颜色, 结束颜色);  /*for firefox*/

-o-linear-gradient(起始颜色, 结束颜色);  /*Opera*/

linear-gradient(起始颜色, 结束颜色);  /*标准属性*/

对于IE来说是个麻烦事,老办法

Filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’ 起始颜色’,endColorstr=” 结束颜色”);  /*IE6,IE 7*/

-ms-linear-gradient(起始颜色, 结束颜色);  /*IE8*/

<div class="content1"></div>

.content1{width:500px;height:300px;border-radius:10%;background:#ade691;
background:-webkit-linear-gradient(left,#88cfc3,#329e8c 30%,#096e5d);background:-moz-linear-gradient(left,#88cfc3,#329e8c 30%,#096e5d);background:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#88cfc3', endColorstr='#096e5d'); /* IE6,IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#88cfc3', endColorstr='#096e5d')";background:linear-gradient(lleft,#88cfc3,#329e8c 30%,#096e5d;float:left;}
.tit1{font-size:3em;font-weight: bold;color:#f00;}

  

金沙js333娱乐场 3

重复性线性渐变:repeating-linear-gradient属性来代替线性渐变linear-gradient;

<div class="content2"></div>

.content2{width:500px;height:200px;
background-image: -webkit-repeating-linear-gradient(red,green 40px, orange 80px);
background-image: repeating-linear-gradient(red,green 40px, orange 80px);}

  

金沙js333娱乐场 4

 

 

径向渐变:radial-gradient(设置渐变的中心,渐变形状 渐变大小,起始颜色值,中间颜色值 中间颜色位置,终点颜色)

渐变中心,可选参数,如30px 20px指距离左侧30px距离上侧20px,可以是像素,可以是百分比,也可以是关键字,默认为中心位置。

渐变形状,可选参数,可以取值circle或eclipse【默认】

渐变大小,可循环参数,可以取值

closest-side:

指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner:

指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side:

指定径向渐变的半径长度为从圆心到离圆心最远的边

farthest-corner:

指定径向渐变的半径长度为从圆心到离圆心最远的角

contain:

包含,指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side

cover:

覆盖,指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner

 circle farthest-corner圆形渐变,ellipse farthest-corner椭圆渐变

<div class="content3"></div>

.content3{width:500px;height:200px;
background-image: -webkit-radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
background-image: radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));margin-top:20px;}

  

金沙js333娱乐场 5

 

Css3圆角讲解:想必大家对于图片,背景圆角,都不陌生吧, 圆角语法:border-radius:圆角...

css3渐变详解,css3渐变

今天总结渐变的问题,渐变分为线性渐变、径向渐变。呼呼,废话少说,

线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色);

Linear:渐变的类型(线性渐变);

渐变的形式:可选参数 有两种方式-1、设置旋转角度,0度代表水平从左到右,90度就是从上到下啦,从0度开始逆时针变换。

2、使用关键字,left代表从左到右,top代表从上到下,同理right就是从右到左,lefttop-从坐上到右下,同理leftbottom,righttop,rightbottom。

中间颜色与中间颜色位置为可选参数。

不过要考虑浏览器的兼容,咱们这样写:

-webkit-gradient(linear,0  0,0  100%,from(起始颜色,to(结束颜色));  /*for Safari4+,Chrome 2+*/

-webkit-linear-gradient(起始颜色, 结束颜色);  /*for Safari 5.1+,Chrome 10+*/

-moz-linear-gradient(起始颜色, 结束颜色);  /*for firefox*/

-o-linear-gradient(起始颜色, 结束颜色);  /*Opera*/

linear-gradient(起始颜色, 结束颜色);  /*标准属性*/

对于IE来说是个麻烦事,老办法

Filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’ 起始颜色’,endColorstr=” 结束颜色”);  /*IE6,IE 7*/

-ms-linear-gradient(起始颜色, 结束颜色);  /*IE8*/

<div class="content1"></div>

.content1{width:500px;height:300px;border-radius:10%;background:#ade691;
background:-webkit-linear-gradient(left,#88cfc3,#329e8c 30%,#096e5d);background:-moz-linear-gradient(left,#88cfc3,#329e8c 30%,#096e5d);background:filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#88cfc3', endColorstr='#096e5d'); /* IE6,IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#88cfc3', endColorstr='#096e5d')";background:linear-gradient(lleft,#88cfc3,#329e8c 30%,#096e5d;float:left;}
.tit1{font-size:3em;font-weight: bold;color:#f00;}

金沙js333娱乐场 6

重复性线性渐变:repeating-linear-gradient属性来代替线性渐变linear-gradient;

<div class="content2"></div>

.content2{width:500px;height:200px;
background-image: -webkit-repeating-linear-gradient(red,green 40px, orange 80px);
background-image: repeating-linear-gradient(red,green 40px, orange 80px);}

金沙js333娱乐场 7

 

 

径向渐变:radial-gradient(设置渐变的中心,渐变形状 渐变大小,起始颜色值,中间颜色值 中间颜色位置,终点颜色)

渐变中心,可选参数,如30px 20px指距离左侧30px距离上侧20px,可以是像素,可以是百分比,也可以是关键字,默认为中心位置。

渐变形状,可选参数,可以取值circle或eclipse【默认】

渐变大小,可循环参数,可以取值

closest-side:

指定径向渐变的半径长度为从圆心到离圆心最近的边

closest-corner:

指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side:

指定径向渐变的半径长度为从圆心到离圆心最远的边

farthest-corner:

指定径向渐变的半径长度为从圆心到离圆心最远的角

contain:

包含,指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side

cover:

覆盖,指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner

 circle farthest-corner圆形渐变,ellipse farthest-corner椭圆渐变

<div class="content3"></div>

.content3{width:500px;height:200px;
background-image: -webkit-radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
background-image: radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));margin-top:20px;}

金沙js333娱乐场 8

对于css3渐变还在更深研究中~~

如有问题,请提出,谢谢,(*^__^*) 嘻嘻……

参数说明:

背景平铺
repeating-linear-gradient

CSS3中怎实现渐变效果

要得上面的线性渐变效果,我们这样去定义CSS3样式:background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。-webkit-gradient是webkit引擎对渐变的实现参数,一共有五个。第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。线性渐变使用from()以及to()方法指定过渡颜色点:background: -webkit-gradient(linear, left top, left bottom, from(#96ff00), color-stop(0.5, orange), to(rgb(255, 0, 0)));线性渐变多个过渡点在同一位置:background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));径向渐变综合效果演示:  

今天总结渐变的问题,渐变分为线性渐变、径向渐变。呼呼,废话少说, 线性渐变: background:linear-gradient(设置渐变...

(错误)linear-gradient(180deg 90deg,#000,#FFF);

background: radial-gradient(100px 50px,red,blue);不关心形状,只关心大小
background: radial-gradient(100px 50px at 0 0,red,blue);设置圆心的位置

css3 渐变怎实现?

针对不同浏览器有不同的前缀,基本还是相似的,下面的意思是线性渐变,从上方开始,从黑色渐变到白色
-webkit-linear-gradient(top,#000,#fff);
-moz-linear-gradient(top,#000,#fff);
-o-linear-gradient(top,,#000,#fff);
也可以加一些渐变中间的颜色
-webkit-linear-gradient(top,#000,#eee 20%,#fff);
也可以使用color stop,跟上面的意思相同
-webkit-linear-gradient(top,#000,color-stop(0.2, #eee),#fff)  

形状尺寸:可选值,指定渐变形状的尺寸,若不指定默认值为farthest-side:

背景平铺
background: repeating-radial-gradient(red 10px,blue 20px);

 
使用多个颜色值

css3新增背景

参数说明:

背景线性渐变
background: linear-gradient();
第一个参数: (角度 或者是一个线性的方向)可选的 默认的是(to bottom) 旋转的方向是顺时针的
第二个参数: 开始颜色 color 或者是百分比 或者是长度
第三个参数: 结束颜色

指定颜色停止位置

background: radial-gradient(closest-side,red,blue);离圆心最近的那条边 圆要经过这4个边
background: radial-gradient(circle,red,blue);
当一个圆没有设置大小的时候是以是最远的角 farthest-corner为准
background: radial-gradient(circle 100px,red,blue);
background: radial-gradient(red,blue);
当椭圆的相对位置是对于原点(0,0)来说,且椭圆经过farthest-corner这个点,那么椭圆x轴半径和y轴半径的比例等于圆心到closest-side的距离

渐变方向:可以使用top,left,或者指定具体的角度(deg为单位),比如top是自上而下渐变,left是自左向右渐变。同时也可将两者结合起来,比如top left表示自左上方向右下方渐变。

背景裁剪
background-clip: border-box;默认值 content-box padding-box
Background-size:大小|| 百分比|| cover|| contain
background-size: cover;尽可能大,让图片撑满整个容器
background-size: contain;尽可能大,宽度和高度不能超过容器的宽高

#gradient1{   
    width:200px;   
    height:300px;   
    background:radial-gradient(circle closest-corner at 20% 20%,#000,#FFF)}   
#gradient2{   
    width:200px;   
    height:300px;   
    background:radial-gradient(circle farthest-corner at 20% 20%,#000,#FFF)}  

关键字:
extent-keyword=closest-side|farthest-side|closest-corner|farthest-corner

radial-gradient([ [ 形状] || [形状尺寸] [ at 位置 ] ,起始颜色,结束颜色)

径向渐变
background: radial-gradient()
圆形(椭圆) 半径大小 圆心位置 color color+
圆或者椭圆 关键字 圆心位置 color color+

代码:

Background-origin
Box=border-box|padding-box|content-box背景图片的坐标
background-origin: padding-box;默认
金沙js333娱乐场,background-origin: border-box;边框的位置
background-origin: content-box;内容的位置

语法:

#gradient1{   
    width:400px;   
    height:200px;   
    background:radial-gradient(circle,#000,#FFF)}   
#gradient2{   
    width:400px;   
    height:200px;   
    background:radial-gradient(ellipse,#000,#FFF)}  

起始位置和结束位置:同线性渐变

举例:

#gradient1{   
    width:200px;   
    height:200px;   
    background:linear-gradient(top,#000,#FFF);/*自上向下渐变*/}   
#gradient2{   
    width:200px;   
    height:200px;   
    background:linear-gradient(left,#000,#FFF);/*自左向右渐变*/}   
#gradient3{   
    width:200px;   
    height:200px;   
    background:linear-gradient(top left,#000,#FFF);/*自左上角向右下角渐变*/}  

        
closest-side与farthest-side

                

数值型:如果指定一个长度值,则表示为圆的半径,如果是两个值则第一个表示水平半径,第二个表示垂直半径(px或百分比)

形状:可选值,可以指定渐变形状为圆形(circle)或者椭圆(ellipse),默认值为圆形。

语法:

代码:

background:linear-gradient( 渐变方向,起点颜色,终点颜色 )

                
可以看出使用角度就可实现任意角度的线性渐变,可以这样理解使用角度渐变时的坐标系,如下图,箭头方向就是渐变方向(自*向*),角度呈顺时针变化,大家可以自己试一试验证一下。

举例

                
closest-corner与farthest-corner

起点颜色,终点颜色:这不是固定的两个参数,其中可以插入多个颜色值.

不同的形状

#gradient1{   
    background:linear-gradient(left,#000 20%,#FFF);}  

举例

farthest-corner:通过离渐变中心最远的的角来确定圆的半径或者椭圆的垂直半径和水平半径;

线性重复渐变最后一个颜色必须指定颜色的停止位置,不然就无法重复,因为默认单位停止位置是100%,如下:

closest-side:通过离渐变中心最近的边来确定圆的半径或者椭圆的垂直半径和水平半径;

语法:

#gradient1{   
    background:linear-gradient(left,#F00, #0F0, #00F, #FF0, #0FF, #F0F);}  

closest-side与closest-corner

                
我们可以通过百分比来设置颜色的停止点,默认值为0%,终点为100%;如上图所示。如果设置100%,这不会出现渐变效果

 

                
代码

 

#gradient1{   
    background:linear-gradient(0deg,#000,#FFF);}   
#gradient2{   
    background:linear-gradient(60deg,#000,#FFF);}   
#gradient3{   
    background:linear-gradient(90deg,#000,#FFF);}   
#gradient4{   
    background:linear-gradient(180deg,#000,#FFF);}   
#gradient5{   
    background:linear-gradient(270deg,#000,#FFF);}  

        
代码

#gradient1{   
    width:200px;   
    height:300px;   
    background-image: repeating-linear-gradient(#000,#FFF)}   
#gradient2{   
    width:200px;   
    height:300px;   
    background-image: repeating-linear-gradient(#000,#FFF 10%)}  

        
代码:

位置:以at开头,用法同background-position,若不指定默认值为center;

closest-corner:通过离渐变中心最近的角来确定圆的半径或者椭圆的垂直半径和水平半径;

使用关键字

#gradient1{   
    width:200px;   
    height:300px;   
    background-image:repeating-radial-gradient(circle closest-corner,#000,#FFF)}   
#gradient2{   
    width:200px;   
    height:300px;   
    background-image:repeating-radial-gradient(circle closest-corner at 20% 20%,#000,#FFF)}  

代码

 

(正确)linear-gradient(top left,#000,#FFF);

径向渐变

        
组合使用

        
使用角度

repeating-linear-gradient(语法同上);

Top,left,right,bottom可以组合以实现不同的角度,但是角度与角度之间是不可以的,不要理所当然角度可以替代关键字。

 
同样径向渐变的半径必须在可视的范围之内不然也看不到效果

重复渐变

repeating-radial-gradient(语法同上);

farthest-side:通过离渐变中心最远的的边来确定圆的半径或者椭圆的垂直半径和水平半径;

本文由js333发布于计算机互联网,转载请注明出处:Css背景渐变,css3渐变详解

关键词:

上一篇:清华大学出版的事半功倍系列,动态生成文本框

下一篇:没有了