csslinear-gradient的简单介绍

本篇文章给大家谈谈csslinear-gradient，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、如何CSS实现网页背景三种颜色渐变效果？
• 2、css如何实现真正的网页渐变背景
• 3、细说css的渐变属性（conic-gradient+linear-gradient+radial-gradient）
• 4、css color之线性linear-gradient()函数

如何CSS实现网页背景三种颜色渐变效果？

页面背景颜色渐变可以分为四个部分

一、从上戚大宽往下渐变：

body{

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);

}

二、从左上至右下渐变：

body{

FILTER: Alpha( style=1,opacity=25,finishOpacity=100,

startX=50,finishX= 100,startY=50,finishY=100);

background-color: skyblue;

}

三、从左往右渐变高亮：

body{

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);

}

四、从上往下渐变：

style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"

下面是整合的完整格式：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

仿悄meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title背景渐变/title

style type="text/css"

!--

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

--

/style/head

body

table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"

tr

td height="600" style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"nbsp;/td

/tr

/table

/body

/html

如果是在同一个页面里面显示多重渐变效果，可以定义每个渐变的width和height。

css如何实现真正的网页渐变背景

方法：根据浏览者的分辨率自动调用样式表

1、新建两个样式表分别命名为：1024.css 800.css（当然有更多分辨率，可以增加样式表）

2、在样式表中分别定义肆坦好图片穗雹逗作为网页背景。

3、新建一个网页文件，把下面代码复制过去。

script language="JavaScript"

!--

function test(){

var a=screen.width+".css"

//alert(a)

//测试变量a的值

document.getElementById("eric").href =a;

}

//--

/script

html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

title无标题文猜卖档/title

link href="" rel="stylesheet" type="text/css" id="eric"

/head

body onLoad="test()"

/body

/html

搞定！

[img]

细说css的渐变属性（conic-gradient+linear-gradient+radial-gradient）

conic-gradient是圆锥渐变，以一个点为中心起始点，沿着圆周变陪衫巧化。

语法： conic-gradient( from 起始角度 at 中心点位置, 渐变断点 )

兼容性：

一个简单的例子：看清他的渐变方向，起始点是图形中心，然后以顺时针方向绕中心实现渐变效果。

linear-gradient 线性渐变的方向是一条直线，可以是任何角度，向下/向上/向左/向右/对角方向。看一个简单的例子芦键。repeating-linear-gradient（）表示重复的线性渐变。

语法塌晌： background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

径向渐变是从圆心点以椭圆形状向外扩散。

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

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

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

css color之线性linear-gradient()函数

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于gradient数据类型，是一种特别的image厅李激数据类型。

linear-gradient( [ angle | to side-or-corner ,]? color-stop-list )

  \---------------------------------/ \----------------------------/

    Definition of the gradient line   扰码     List of color stops 

where side-or-corner = [ left | right ] || [ top | bottom ]

  and color-stop-list = [ linear-color-stop [, color-hint扮袜? ]? ]#, linear-color-stop

  and linear-color-stop = color [ color-stop-length ]?

  and color-stop-length = [ percentage | length ]{1,2}

  and color-hint = [ percentage

栗子：

div {

  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

}

关于csslinear-gradient和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。