位置：首頁(yè) > 軟件操作教程 > 編程開(kāi)發(fā) > CSS > 問(wèn)題詳情

CSS3 徑向漸變

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-19

    徑向漸變由它的中心定義。為了創(chuàng)建一個(gè)徑向漸變，必須至少定義兩種顏色節(jié)點(diǎn)。顏色節(jié)點(diǎn)即想要呈現(xiàn)平穩(wěn)過(guò)渡的顏色。同時(shí)，可以指定漸變的中心、形狀（圓形或橢圓形）、大小。在默認(rèn)情況下，漸變的中心是center (表示在中心點(diǎn)），漸變的形狀是ellipse (表示橢圓形），漸變的大小是farthest-corner (表示到最遠(yuǎn)的角落），語(yǔ)法如下：

    background: radial- gradient(center, shape size, start - color, ...，last - color);

    通過(guò)一個(gè)實(shí)例來(lái)理解徑向漸變。

    【例題】創(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>

image.png

繼續(xù)查找其他問(wèn)題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部