Heim > Web-Frontend > HTML-Tutorial > css3实现的绘制图形图案效果代码实例_html/css_WEB-ITnose

css3实现的绘制图形图案效果代码实例_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:28:41
Original
912 Leute haben es durchsucht

css3实现的绘制图形图案效果代码实例:
如果使用css2实现绘制图形图案几乎是不可能的,或者说费好大的劲也只能够得到非常简单的图案,css3的出现将绘制复杂的图形这个目标成为可能,下面就是一个相关的代码实例,有这方面需要的朋友可以参考一下它的实现方式。
代码如下:

<!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>
Nach dem Login kopieren

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15389

更多内容可以参阅:http://www.softwhy.com/divcss/

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage