如何在HTML做出渐变？

html-css019

如何在HTML做出渐变？,第1张

1、HTML实现渐变

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

#week{

width: 600px

height: 600px

background: linear-gradient(red, yellow, blue)

border-radius: 300px

}

</style>

</head>

<body>

<div id="week">

</div>

</body>

</html>

2、实现效果

你看看demo，css上有注释，再结合一下手册

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<style type="text/css">

* {

margin: 0

overflow: hidden

}

i,

em,

strong {

font-style: normal

}

.sndli em {

display: block

float: right

height: 30px

border-right: 1px dashed #666

margin: 5px 0 0 0

}

a {

text-decoration: none

height: 40px

width: 150px

line-height: 40px

color: #000000

display: block

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#3695d5))/*颜色渐变设置*/

}

ul,

li {

margin: 0

padding: 0

}

.outli>li {

list-style: none

float: left

box-sizing: border-box

text-align: center

position: relative

}

</style>

<body>

<div class="bar">

<ul class="outli">

<li class="sndli">

<a href="javascript:void(0)">1<em></em></a>

</li>

<li class="sndli">

<a href="javascript:void(0)">2<em></em></a>

</li>

<li class="sndli">

<a href="javascript:void(0)">3</a>

</li>

</ul>

</div>

</body>

</html>

有两种实现的方法。第一种就是最常用的插入背景图片（做个渐变图就可以了） 第二种就是在<body>内 加入 style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#7CBE42', endColorStr='#84C34A', gradientType='0')" 演示： www.rockshop.cn/new/images/wenwen.html