Rumah > hujung hadapan web > html tutorial > 用border-radius绘制的太极图,大家看看_html/css_WEB-ITnose

用border-radius绘制的太极图,大家看看_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-24 12:25:03
asal
1239 orang telah melayarinya

<!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>
Salin selepas log masuk


回复讨论(解决方案)

相当不错,学习了

真不错!!!

Very good!

http://css-tricks.com/examples/ShapesOfCSS/ http://css-tricks.com/examples/ShapesOfCSS/

路过路过学习了

good good

太强大了,学习了

好似不错哦

楼主啊  这个要是能旋转就beautiful           外星人啊!!!!

Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan