当前位置:编程学习 > JS >>

又一个纯CSS无图片圆角框

又一个不用图片实现的圆角效果,纯CSS技术实现,类似百度的圆角,值得借鉴,复制代码就可以用哦。
答案:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>又一个纯CSS无图片圆角框</title>
<style type="text/css">
body{padding: 20px;background-color: #FFF;
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ margin: 0 10%;background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>纯CSs无图片圆角</h1>
<p>欢迎你的光临</p>
<h2>精品网页特效</h2>
<p>许多精品网页特效,请访问:http://www.zzzyk.com/jscss/</p>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>

上一个:点击图片后将地址写入到Input文本框
下一个:精美CSS文章列表含标号、时间显示

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,