CSS3 徑向漸變
徑向漸變由它的中心定義。為了創(chuàng)建一個徑向漸變,必須至少定義兩種顏色節(jié)點。顏色節(jié)點即想要呈現(xiàn)平穩(wěn)過渡的顏色。同時,可以指定漸變的中心、形狀(圓形或橢圓形)、大小。在默認(rèn)情況下,漸變的中心是center (表示在中心點),漸變的形狀是ellipse (表示橢圓形),漸變的大小是farthest-corner (表示到最遠(yuǎn)的角落),語法如下:
background: radial- gradient(center, shape size, start - color, ...,last - color);
通過一個實例來理解徑向漸變。
【例題】創(chuàng)建徑向漸變
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background:-ms-radial-gradient(pink 10%,lightblue 70%,yellowgreen 20%);
background:-webkit-radial-gradient(pink 10%,lightblue 70%,yellowgreen 20%);
background:-o-radial-gradient(pink 10%,lightblue 70%,yellowgreen 20%);
background:-moz-radial-gradient(pink 10%,lightblue 70%,yellowgreen 20%);
background:radial-gradient(pink 10%,lightblue 70%,yellowgreen 20%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
點擊加載更多評論>>