Rumah > Artikel > hujung hadapan web > 用border-radius绘制的太极图，大家看看_html/css_WEB-ITnose
用border-radius绘制的太极图，大家看看_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 12:25:031185semak imbas
<!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 外星人啊！！！！
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：input 取值，并计算，_html/css_WEB-ITnoseArtikel seterusnya：江湖纠结啦。。哥哥姐姐们_html/css_WEB-ITnose