三个阶段:

1.背景图片;

2.css2.0+标签模拟圆角;

3.css3.0圆角属性(border-radius).

1.1.背景图片--宽度固定,高度自适应圆角

  为容器设置宽度

  在主体的上方加一个div,以上圆角为背景;在主体的下方加一个div,以下圆角为背景。

1.2.背景图片--宽高自适应圆角

  容器设置了相对定位,左上、右上、左下、右下div定位在四个角上,以遮盖原来直角的原理形成圆角。

2.css2.0+标签模拟圆角

  哦,我决定跳过了,直接css3好了。

3.css3.0圆角属性(border-radius)

  给需要圆角的主体,设置border-radius属性,可用像素或者百分比为单位,数值代表圆角半径越大越弧。

  上左border-top-left-radius、上右border-top-right-radius、下右border-bottom-right-radius、下左border-bottom-left-radius

  border-radius:上左弧度 上右弧度 下右弧度 下左弧度;(顺时针)

  border-radius:上左和下右弧度 上右和下左弧度;(对角)

  单独不要弧度时设置为0,而不是none;

  -moz-兼容老的火狐    -ms-兼容老ie      -webkit-兼容Safari、Chrome

比较:

  背景图片实现圆角是主流(2014年)

  css2.0增加很多无意义代码,实现效果不自然等

  css3代码少就可以实现效果,但是在ie8以下版本不支持,在移动端广泛运用,是趋势。

关于css制作圆角的更多相关文章

  1. css 制作圆角、圆形图形布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS 制作 圆角TAB选项卡下拉效果(顺便学习CSS伪元素

    CSS伪元素: 伪元素如果没有设置“content”属性,伪元素是无用的. 使用伪元素插入的内容在页面的源码里是不可见的,只能在css里可见 插入的元素在默认情况下是内联元素(或者,在html5中,在 ...

  3. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

  4. 用CSS做圆角矩形

    第一种方法:如果是CSS2.2的话,可以简单写一个制作圆角矩形,分上中下裁成三张图 <title>CSS3实现圆角</title> <style type="t ...

  5. CSS制作图形速查表

    很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...

  6. 纯Div+Css制作的漂亮点击按钮和关闭按钮

    纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.

  7. Div+Css制作圆

    Div+Css制作四分之一圆主要是使用Css3.0中的border-radius这个圆角隐藏属性.利用这一属性,我们可以画圆,画半圆,四分之三圆,四分之一圆等.以后我会更新…… 如何使用border- ...

  8. 【转】CSS制作图形速查表-存档

      http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...

  9. CSS3学习-用CSS制作立体导航栏

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 开源原生JavaScript插件-CJPCD(省市区联动)

    一.前言 上两篇博客笔者对 JavaScript Module 模式,闭包等知识点做了简单介绍之后,我们今天开始正式开发一款属于自己的 JavaScript 插件.由于最近项目刚好用到地区选择这一块的 ...

  2. MySQL Update语句用法

    用一个表的某列值更新另外一个表的某列值的sql语句: update tableA a innner join tableB b on a.column_1 = b.column_1 set a.col ...

  3. ElasticSearch中文分词(IK)

    ElasticSearch常用的很受欢迎的是IK,这里稍微介绍下安装过程及测试过程.   1.ElasticSearch官方分词 自带的中文分词器很弱,可以体检下: [zsz@VS-zsz ~]$ c ...

  4. 一个 C# 获取高精度时间类(调用API QueryP*)

    如果你觉得用 DotNet 自带的 DateTime 获取的时间精度不够,解决的方法是通过调用 QueryPerformanceFrequency 和 QueryPerformanceCounter这 ...

  5. C#多线程开发

    1.进程与线程的区别 通俗的讲,进行就是任务管理器中进行列表中看到的正在运行的程序,它是一个动态的概念,活动的实体. 线程是程序执行流的最小单元,是线程中一个实体,是系统独立调度和分派CPU基本单位. ...

  6. 检查dns服务器是否可用

    #%windir%\system32\WindowsPowerShell\v1.0\powershell.exe D:\PSScript\ERP_Production_Script\ERPRF_Upd ...

  7. 【甘道夫】HBase(0.96以上版本号)过滤器Filter具体解释及实例代码

    说明: 本文參考官方Ref Guide,Developer API和众多博客.并结合实測代码编写.具体总结HBase的Filter功能,并附上每类Filter的对应代码实现. 本文尽量遵从Ref Gu ...

  8. Html+jquery mobile

    打开VS 2013,选择[文件]-[新建]-[项目] 选择框架为.NET Framework4-[ASP.NET MVC4 Web应用程序],点击[确定] 选择[基本],点击[确定] 创建的MVC的项 ...

  9. C# 手动读写app config 的源码

    public class ConfigOperator { public string strFileName; public string configName; public string con ...

  10. TreeView

    添加项目 TreeView1.Items.Add(nil,'ABC');       删除选中的节点 TreeView1.Selected.Delete;   删除鼠标右键选中的节点   var    ...