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

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

WBOY
Release: 2016-06-24 11:28:41
Original
915 people have browsed it

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>
Copy after login

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

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template