CSS+DIV制作页面圆角效果

2016-02-19 14:18 6 1 收藏

有了下面这个CSS+DIV制作页面圆角效果教程，不懂CSS+DIV制作页面圆角效果的也能装懂了，赶紧get起来装逼一下吧！

【 tulaoshi.com - Web开发】

样式表文件：
.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;}
.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;}
.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;}
.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}

接着看页面代码：
b class="b1"/bb class="b2"/bb class="b3"/bb class="b4"/b
b class="b4"/bb class="b3"/bb class="b2"/bb class="b1"/b
当然你也可以用其他的标签div或者spana之类，应该也是可以的

在上面两句之间加上一个左右border的content
这就是效果了：

看明白了吗？我们来仔细分析一下代码吧：

好不容易才做好这张图，也不知道怎么表现更加清楚，我相信大家应该能看得懂吧，原理就是在象素做图。是不是很有意思呢～css的功能真的好强大啊，明白原理后就能举一反三设计出许多样式了，让我们大胆的设计出各种效果吧，坚信css能实现的，

来源:http://www.tulaoshi.com/n/20160219/1606676.html

上一篇：如何快速的呈现我们的网页
下一篇：一個可以顯示CheckBox或RadioButtons的StringGrid類.

看过《CSS+DIV制作页面圆角效果》的人还看了以下文章更多>>

用DIV+CSS设计出圆角矩形的代码

标签： Web开发

很多人到处寻求个使用DIV+CSS制作出圆角矩形的方法，使用底下的一段代码你就可以轻松实现这个很拽的圆角矩形了。＜style＞div.bg{background:#ffc20e;width:50%}b{display:block;} /*将所有B标签转成块级元素*/ div b.topb b,div b.bottomb b {height:1px;overflow:hidden;background:#ffc20e;} /*div标签内类名为topb/bottomb的那个b标...

CSS+DIV设计实例：不同色链接和其下划线

标签： Web开发

以下是引用片段： style type="text/css" a{ color:#333333; text-decoration:none;} a:visited {color:#333333; text-decoration:none;} a:hover { color:#FF0000; text-decoration:underline;} a span { color:#333333;} /style a href="#"span111/span/a style type="text/css"a{ color:#333333; text-decor...

CSS+DIV:让文本字符环绕在你的图片周围

标签： Web开发

看到上面的效果，你也许以为这是一张带文字的图片而已;呵呵，用你的鼠标去选取文字看看，发现了吧，这完完全全是一张图片和文字的组合，下面我就来介绍它是怎么做的。先看看代码: 以下是引用片段： div id="info" h2TRACKING YOUR IMAGES/h2 div id="holdit" img src="/imagelist/06/24/4fnpgj5042e6.jpg" alt="Winnie the poo...

圆角-简洁型css圆角矩形

标签： Web开发

!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 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title简洁型css圆角矩形/title style type="text/css" .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b...

网页制作CSS教程:自适应圆角

标签： Web开发

前言有时候我们不得不面对圆角，也很傻很天真的认为利用 CSS3 的新特性对浏览器分级支持是最好解决方案，但现实≠理想需求3px 圆角宽度自适应（随着文字字数扩展宽度并自动换行）换肤不使用图片（对可维护性/性能均有影响）困惑经典的解决方案看起来像这样： !DOCTYPE htmlhtmlheadmeta content="text/html; charset=utf-8&qu...

查看更多精彩>>