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

工具/原料

  • 一些简洁、直观、强悍的前端开发框架，如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. 3django url name详解

    打开urls.py from django.conf.urls import url from django.contrib import admin from calc import views a ...

  2. curl使用说明

    默认curl使用get请求,可以使用-d方式指定使用post方式传递数据 https://www.cnblogs.com/gbyukg/p/3326825.html

  3. c的详细学习（7）指针学习（一）

    指针是c语言的一个重要概念,指针类型是c语言最有特色的数据类型: *利用指针编写的程序可使调用函数共享变量或数据结构,实现双向数据通信: *可以实现内存空间的动态存储分配:可以提高程序的编译效率和执行 ...

  4. 前端开发笔记--flex布局

    flex布局: 个人觉得flex布局比起传统布局要优先得多(主要是容易使用),缺点是IE10及以上版本才能使用,甚至某些属性只有在IE11才能使用(而且我发现凡是不兼容主要IE的坑来的多,不是说其他浏 ...

  5. TCP相关知识总结

    参考: http://coolshell.cn/articles/11564.html http://coolshell.cn/articles/11609.html TCP头格式 接下来,我们来看一 ...

  6. 字典树 HDU 1251 统计难题

    ;} 之前写的#include<iostream> #include<algorithm> #include<stdio.h> using namespace st ...

  7. 适用grunt的注意点

    0.使用grunt可以为前端开发省去很多工作量,与git版本控制器配合起来不要太完美,一般也都是这么用的: 1.先安装node.js,下载软件安装就行了,一般自带npm管理器; 2.通过npm安装gr ...

  8. HBase启动后端口60010无法访问

    配置好HBase后,想从浏览器通过端口60010看下节点情况,但是提示无法访问 在服务器上netstat -natl|grep 60010 发现并没有60010端口 原来是因为HBase 1.0 之后 ...

  9. neutron VPC

    The goal of this document is to provide an umbrella blueprint defining how to add support for VPC in ...

  10. JQuery- JQuery学习

    jQuery与JavaScript加载页面的区别 1.JavaScript传统的方式页面加载会存在覆盖问题,加载比jQuery慢(整个页面加载完毕<包含里面的其他内容,比如图片>) 2.j ...