圆角矩形一向是设计师最倾心的一种设计，因为他们可以让整个网页生动起来，不那么死板，所以，作为一个优秀的网页设计师，学会一种或多种编辑圆角矩形的方法是必不可少的，而且圆角矩形应用范围极广，一个网页内的所有矩形基本上都需要设计为圆角矩形，这样网页才不会那么死气沉沉！

工具/原料

  • 一些简洁、直观、强悍的前端开发框架，如bootstrap

方法/步骤

  1. 1

    我们先来看一下圆角矩形和普通矩形的区别。

    虽然第二个是某知名搜索引擎，而且我天天要用，但是他的设计我还是想吐槽，直直的框真的很难看啊。。。=_=

    相比来说，第一个就比较人性化，看得舒服。

  2. 2

    圆角矩形可以用在输入框中、导航栏中、相框上、弹出框上。总之，任何有矩形的地方都可以改成圆角矩形，也许只是小小的改动，但却会让你的网页生机盎然！

    看腾讯的注册表单，全部是圆角的，如果是纯矩形的话，会很丑！！

  3. 3

    接下来看看全是矩形的表单

  4. 4

    再看看同一张表单，把矩形换成圆角矩形会怎么样？

  5. 5

    接下来就介绍第一种编辑圆角矩形的方法！

    原理是四张圆角的图片放在四个角上，就是圆角矩形的四个角，但这种方法只适合当做菜单栏背景，或是相框背景，输入框的圆角不适合用，当然，这种方法对图片要求比较高！！如果你切图很好的话，这种方法可以用在一切圆角矩形上，缺点很明显，即使图片可以重复利用，也需要大量图片。

    优点：图片可以自适应，技术简单，只做网站主页的话，图片就可以大量重复利用，效果相当不错。

  6. 6

    第二种方法！

    简化第一种方法。将四个图片变成两个图片，上下各一个。

    缺点：还是需要图片。而且自适应能力变差，左右不能自适应！！图片需求比较高，需要很好的切图技术！

    优点：简化第一种方法，图片数量变小。技术简单，容易操作，更改时只需要换图片，效果就全换了！利用这种方法，建站后维护、更新很方便。

  7. 7

    第三种方法！不用图片，纯css+div制作圆角矩形！！

    而且对ie也支持！

    原理是用8个高度、宽度很小的div块放在上下四角，并且这些div块相互并列，在最外面还有一个div块作为边框包含住这些小的div块，这些小的div块呈白色,其他背景、边框呈黑色，这样看起来矩形的四角就好像圆了。

    这个方法非常实用，但是技术难度较高，需要对div+css较熟悉的人才能做到，在这里贴上代码！

  8. 8

    代码：

    <style>

    #mid{ margin:0px 20px; background:#000; font-size:20px;}

    div.rtop{ display:block; background:#fff;}

    div.rtop div { display:block; height:1px; overflow:hidden; background:#000;}

    div.r1{ margin:0 3px;}

    div.r2{ margin:0 2px;}

    div.r3{ margin:0 1px;}

    div.rtop div.r4 { margin:0 1px; height:1px;}

    </style>

    </head>

    <body>

    <div id="mid">

     <div class="rtop">

       <div class="r1"></div>

       <div class="r2"></div>

       <div class="r3"></div>

       <div class="r4"></div>

     </div>

    一些内容

     <div class="rtop">

       <div class="r4"></div>

       <div class="r3"></div>

       <div class="r2"></div>

       <div class="r1"></div>

      </div>

    <!--       由8个div放在上上下四角做成的圆角矩形。注意div顺序！！        -->

    </div>

  9. 9

    第四种方法！效果十分好，只是对ie浏览器不兼容。也是纯css+div制作圆角矩形，不需要图片。

    颜色渐变是谷歌的一个属性，Firefox也支持，但与圆角无关，就不再叙述。

    原理：谷歌浏览器支持一种属性：-webkit-border-radius、-moz-border-radius。

    -webkit-border-radius：苹果、谷歌等一些浏览器有，因为他们都用的是webkit内核。webkit内核浏览器都支持此属性。-moz-border-radius：moz这个属性主要专门支持Firefox浏览器的CSS属性。这种方法可以设置任何矩形变成圆角矩形！

    比如bootstrap的输入框、按钮、导航菜单的圆角效果，都是这样做成的！

    但缺点很明显：在IE下不能用，这就需要设计者进行CSS HACK，为IE专门设计一套圆角样式（前三种方法）。

    所以将这四种方法结合起来用才是最好的！

  10. 10

    代码如下：

    <style type='text/css'>

     div{

                text-align: center;

                font-size: 32px;

                width: 500px;

                color: white;

                padding: 10px;

                margin: 10px;

                -webkit-border-radius: 15px;

                -moz-border-radius: 15px;

    }

    </style>

    <body>

    <div>

    一些内容

    </div>

    </body>

    }

  11. 11

    最后再次来看看效果图吧！！

    END

注意事项

  • 所有的方法结合起来才是最好的！
  • 第四种方法看起来很好，可是浏览器兼容性不好；但第一、二种看起来麻烦，浏览器兼容性非常好，实际上各有利弊，需要结合使用！！

css+div制作圆角矩形的四种方法的更多相关文章

  1. 让一个图片在div中居中（四种方法）

    第一种方法: <div class="title"> <div class="flag"></div> <div cl ...

  2. CSS三栏布局的四种方法

    总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...

  3. [Web 前端] 018 css 清除浮动的四种方法

    清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...

  4. 实现三个div，固定左右两边的div宽为200，中间的div宽度自适应的四种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. CSS系列，三栏布局的四种方法

    三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...

  6. iOS设置圆角的四种方法

    小小圆角问题,正常情况下,我们不需要过多关心,但当屏幕内比较多的时候,还是有必要了解下性能问题的 一.设置CALayer的cornerRadius 这是最常用的,也是最简单的. cornerRadiu ...

  7. div垂直水平居中的四种方法总结

    5.利用弹性布局 与 margin: <style> .container{ height: 600px; width: 600px; border:1px solid black; di ...

  8. CSS垂直居中的四种方法

    写在前面的话 最近在Stack Overflow上看到 一个不错的回答 ,以下是我对其的总结,分享给大家. 垂直居中的四种方法 ①基础的方法 设置父元素的line-height等于height,这种方 ...

  9. 使用imageMagick 制作圆角矩形和图片加水印

    制作圆角矩形好图片水印都是图片合成的操作 composite -gravity southeast mask175.png  src.jpg  dest.jpg -gravity southeast ...

随机推荐

  1. 3.15课·········out传值(传址)

    public void Hs(out int a, out int b) { a = 4; b = 6; a = b++;//a=6,b=b+1=7//b先赋值给a,然后b+1 b = ++a;//a ...

  2. HDU - 1176 免费馅饼 【DP】

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1176 思路 因为刚开始的起点是固定的 但是终点不是固定的 所以我们可以从终点往起点推 dp[i][j] ...

  3. Android Theme主题

    •android:theme="@android:style/Theme.Dialog" 将一个Activity显示为能话框模式 •android:theme="@and ...

  4. [原创]java WEB学习笔记18：java EE 中的MVC 设计模式(理论)

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  5. Delphi回调函数的使用－例子

    Delphi回调函数的使用-例子 功能大体描述:Form1中有一个Edit和一个Button,当点击BUTTON时弹出FORM2,FORM2中也有一个EDIT和一个BUTTON,当点击FORM2中的B ...

  6. 织梦dedecms 扩展channel栏目标签 获取交叉栏目名称和链接

    channel栏目标签默认有调用顶级栏目(top).子栏目(son).同级栏目(self),那想获取交叉栏目的名称和链接怎么获取呢? 其实在原来的代码上改一下就可以了.下面是具体代码.打开文件chan ...

  7. Tab支持的DHTML Window控件

    带有Tab标签支持的DHTML Window控件.它使用cookies来“记忆”窗体大小,位置,哪个Tab选项被选中,window堆叠顺序.​代码下载地址:http://www.huiyi8.com/ ...

  8. SQL嵌套子查询和相关子查询的执行过程有什么区别(推荐)

    SQLServer子查询可以分为 相关子查询 和 嵌套子查询 两类.前提, 假设Books表如下: 类编号 图书名 出版社 价格 ----------------------------------- ...

  9. hdu 1864 最大报销额（01背包）

    最大报销额 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  10. Tomcat_总结_02_单机多实例

    一.tomcat下载及环境变量配置 1.tomcat下载 下载地址:tomcat官网 2.环境变量配置 只用配置一个CATALINA_HOME就可以了 二.CATALINA_HOME 与 CATALI ...