CSS3繪製圖形圖案效果

admin發表於2018-07-20
CSSS3

使用CSS2繪製圖形圖案几乎是不可能的，或者說費好大的勁也只能夠得到簡單的圖案。

CSS3的出現將繪製複雜的圖形這個目標成為可能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<head>
<style type="text/css">
div{ 
  width:170px; 
  height:140px; 
  background-image: 
    radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%), 
    linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%), 
    radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%), 
    radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), 
    radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), 
    linear-gradient(to bottom, #ef0015 20%, #b2000c 100%); 
  border-radius:140px 140px 80px 80px; 
} 
</style>
</head>
<body>
<div></div>
</body>
</html>

上述程式碼實現了繪製圖案的效果。

相關閱讀：

（1）.radial-gradient參閱CSS3 radial-gradient()徑向漸變一章節。

（2）.border-radius參閱CSS3 border-radius一章節。

相關文章