CSS+DIV制作页面圆角效果

2016-02-19 14:18 5 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能实现的，

来源:https://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...

如何学习DIV CSS制作网页

标签： Web开发

我接触的很多人都问，如何学习Web标准制作网页呢？我想每一个刚刚接触web标准的人都会问这样的问题，我就根据自己的经验总结。 1.不要一味使用DW等工具设计网页，去熟悉(X)HTML语言和CSS语言因为web标准对代码的要求提高了，没有对xhtml代码没有一定的了解是无法通过校检的。DW工具也可以使用，但是要看着代码写网页了。 ...

DIV+CSS相册制作教程

标签： Web开发

以前用FLASH作过一个FLASH相册—网络版这个效果有点学这个的意思。为了一行了的代码，我已经花了两个晚上来想了，结果下来就是感觉IE有点变态。用正常的想法去作，FIREFOX 等浏览器都没有问题，只有IE不可以。只有加那么一行垃圾代码，IE才能正常显示。以下就是效果： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E...

查看更多精彩>>