CSS3 Gradient Background

The gradient of CSS3 is divided into two types: linear gradient (linear) and radial gradient (radial).

First, linear gradient linear-gradient

1. Introduction

Linear-gradient ([Set direction],[set start color],[set various over color],[set End color])

Parameters:

First parameter: Specifies the direction of the gradient, which can be expressed as the "angle" keyword or "English":

The first parameter defaults to: 180deg, which is the same as "to bottom".

The color behind is at least 2, which is the start color and end color.

2. Use

A, for example:

<style type= "Text/css" >p{    width:300px;    height:100px;    Background-image:linear-gradient (to right, red, orange, yellow, green, blue, indigo, violet);} </style><p> left-to-right linear gradient background </p>

b, a very cool feature: Use the gradient to make the navigation split line

Background:linear-gradient (to bottom, #dd2926, #a82724, #dd2926) no-repeat right/1px 15px; The meaning background uses the gradient color, then does not repeat, the right, the slash behind is actually the background-size setting, Width 1px,height 15px

View Code

Effect:

C, Google search low-key linear gradient background

Check out a Google search code and write an example

View Code

Two, radial gradient radial-gradient

Cond

CSS3 gradient written in the desert

Http://www.w3cplus.com/content/css3-gradient

CSS3 Gradient Background