Heim > Artikel > Web-Frontend > 用border-radius绘制的太极图，大家看看_html/css_WEB-ITnose
用border-radius绘制的太极图，大家看看_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:25:031148Durchsuche
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> new document </title><style type="text/css">body { background: #9999cc;}.as1 { width: 400px; height: 400px; /* 太极图大小 */ box-shadow: 0px 0px 10px 1px #ffff00;}.as1 , .ar2 , .at1{ background: #ffffff;}.as2 , .ar1 , .at2 { background: #000000;}.as1 , .as1 div { position: relative; border-radius: 8000px;}.as2.as2 { width: 50%; height: 100%; border-radius: 8000px 0px 0px 8000px;}.ar1 , .ar2 { left: 50%; width: 100%; height: 50%;}.at1 , .at2 { left: 35%; top: 35%; width: 30%; height: 30%;}</style></head><body>用border-radius绘制太极图<br /><br /><div class="as1"><div class="as2"> <div class="ar1"><div class="at1"></div></div> <div class="ar2"><div class="at2"></div></div></div></div></body></html> 回复讨论(解决方案)
相当不错,学习了
真不错！！！
Very good!
http://css-tricks.com/examples/ShapesOfCSS/ http://css-tricks.com/examples/ShapesOfCSS/
路过路过学习了
good good
太强大了，学习了
好似不错哦
楼主啊 这个要是能旋转就beautiful 外星人啊！！！！
Stellungnahme：
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
Vorheriger Artikel：input 取值，并计算，_html/css_WEB-ITnoseNächster Artikel：江湖纠结啦。。哥哥姐姐们_html/css_WEB-ITnose