漸層程式

HTML程式碼

<!DOCTYPE html>

<html>

<head>

<title>Linear Gradient</title>

</head>

<body>

<ul>

<li><a href="#">About Us</a></li>

<li><a href="#">Products</a></li>

<li><a href="#">Login / Signup</a></li>

</ul>

</div>

</body>

</html>

CSS程式碼

@import url(reset.css);

body{

padding-top: 50px;

font-family: Arial, Verdana;

}

.wrapper{

width: 1000px;

margin: 0 auto;

background-color: #fff;

padding: 10px;

}

ul{

overflow: hidden;

/*background-image: linear-gradient(to bottom, green, black);*/

/*background-image: linear-gradient(0deg, yellow, black);*/

/*background-image: linear-gradient(0deg, #666 0%, #e5e5e5 100%);*/

/*background-image: linear-gradient(0deg, #333 0%, #999 10%, #333 15%, #333 90%, #666 100%);*/

/*background-image: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(125,90,117) 100%);*/

}

li{

float: left;

position: relative;

}

li:not(:last-child):after{

content: '';

display: block;

width: 1px;

height: 10px;

background-color: #ccc;

position: absolute;

right: 0;

top: 0;

bottom: 0;

margin: auto;

}

a{

display: block;

width: 200px;

line-height: 150px;

text-align: center;

text-decoration: none;

}

img{

display: block;

}

HTML程式碼

<!DOCTYPE html>

<html>

<head>

<title>Radial Gradient</title>

</head>

<body>

<ul>

<li><a href="#">About Us</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Products</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</div>

<ul>

</ul>

<h2>Businessman with arms</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo dolores laudantium voluptas ducimus beatae illum at quae corporis molestiae sunt rerum iusto soluta itaque in, consectetur, facere quam tempora minima!</p>

</div>

</body>

</html>

CSS程式碼

@import url('reset.css');

body{

font-family: Verdana;

}

.wrapper{

height: 600px;

padding-top: 50px;

overflow: hidden;

background-image: linear-gradient(0deg, #bad2da 0%, #e4e8ea 60%, #fff 60%, #fff 100%);

}

.main-top{

width: 1200px;

overflow: hidden;

margin: 0 auto;

padding-bottom: 20px;

}

.main-top img{

float: left;

}

.main-top ul{

float: right;

padding-top: 50px;

}

.main-top li{

float: left;

margin-left: 10px;

}

.main-top li a{

display: block;

line-height: 30px;

padding: 0 20px;

color: #333;

text-decoration: none;

font-size: 13px;

border: 1px solid #999;

background-image:

linear-gradient(0deg, #ccc 0%, #ccc 3%, #e5e5e5 4%, #e5e5e5 6%, #ccc 95%, #f6f6f6 95%, #ccc 100%);

}

.main-bottom{

width: 1200px;

overflow: hidden;

margin: 0 auto;

}

.main-bottom > img{

float: left;

}

.main-bottom_right{

float: right;

padding-top: 50px;

}

.main-bottom_right ul{

overflow: hidden;

padding-bottom: 30px;

}

.main-bottom_right li{

width: 200px;

height: 200px;

float: left;

border-radius: 50%;

background-color: #e5e5e5;

margin-left: 20px;

border: 1px solid #ccc;

text-align: center;

line-height: 250px;

}

.main-bottom_right li:nth-child(1){

}

.main-bottom_right li:nth-child(2){

}

.main-bottom_right li:nth-child(3){

}

.main-bottom_right h2{

font-size: 2em;

padding-bottom: 10px;

font-weight: bold;

}

.main-bottom_right p{

max-width: 700px;

line-height: 1.7;

}

.gradient-test{

height: 300px;

background-color: #e5e5e5;

background-image:

radial-gradient(ellipse 300px 200px, #000 0%, #f29c9f 10%, #f29c9f, #00479d);

/*background-image: radial-gradient(100px 100px at 100px 100px, #ccc, #666);*/

/*background-image: repeating-radial-gradient(50px 30px, red, black);*/

}

/* radial-gradient: (形狀尺寸(主要半徑[水平]寬/次要半徑[垂直]高) at 位置 / 起始顏色 / 結束顏色); */