CSS用DIV做不规则形状的环绕文字

2022-07-15 80酷酷网 80kuku.com

　　css|形状

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><HTML><head><title>不规则图片环绕文字</title><style>html, body { margin: 0px; padding: 40px 0 0 100px; background:#000;color:#fff;font-size:14px;}div{margin: 0px; padding: 0px; border: 0px;color:#fff;font-size:14px;}#content { background: url(/uploads/allimg/c090731/124Z40R45F-1D93.jpg) no-repeat; margin: 0px; padding: 0px; border: 0px; line-height:155%}.blank { float: left; clear: left; margin: 0px 25px 0px 0px; font-size:9px;font-family:arial; height:21px}</style></head><body><div id="content"><div class="blank" </div><div class="blank" </div><div class="blank" </div><div class="blank" </div><div class="blank" </div><div class="blank" </div><div class="blank" </div><div class="blank" </div><div class="blank" </div><div class="blank" </div><div class="blank" </div><div class="blank" </div><div class="blank" </div><div class="blank" </div>月色正朦胧<br />与清风把酒相送<br />太多的诗颂<br />醉生梦死也空<br />和你醉后缠绵<br />你曾记得<br />乱了分寸的心动<br />怎么只有这首歌<br />会让你轻声合<br />醉清风<br />梦镜的虚有<br />琴声一曲相送<br />还有没有情浓<br />风花雪月颜容<br /></div></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

　　下载特效中用到的图片：