例子1：

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

        div {

            width: 350px;

            height: 100px;

            padding: 15px 0px 0px 25px;

        }

        .one {

            border-top-left-radius: 2em 0.5em;

            border-top-right-radius: 1em 3em;

            border-bottom-right-radius: 4em 0.5em;

            border-bottom-left-radius: 1em 3em;

            background-color: #CCC;

            margin-bottom: 10px;

        }

        .two {

            border-top-left-radius:2em;

            border-top-right-radius:2em;

            border-bottom-right-radius:2em;

            border-bottom-left-radius:2em;

            background-color: #888;

        }

    </style>

</head>

<body>

    <div class="one">

        border-top-left-radius: 2em 0.5em;<br>

        border-top-right-radius: 1em 3em;<br>

        border-bottom-right-radius: 4em 0.5em;<br>

        border-bottom-left-radius: 1em 3em;

    </div>

    <div class="two">

        border-top-left-radius:2em;<br>

        border-top-right-radius:2em;<br>

        border-bottom-right-radius:2em;<br>

        border-bottom-left-radius:2em;

    </div>

</body>

</html>

例子2：

<!DOCTYPE html>

<html>

<head>

    <style>

    ul {

        margin: 0;

        padding: 0;

    }

    li {

        list-style: none;

        margin: 10px 0 0 10px;

        padding: 10px;

        width: 200px;

        float: left;

        background: #bbb;

    }

    h2 {

        clear: left;

    }

    .test .one {

        border-radius: 10px;

    }

    .test .two {

        border-radius: 10px 20px;

    }

    .test .three {

        border-radius: 10px 20px 30px;

    }

    .test .four {

        border-radius: 10px 20px 30px 40px;

    }

    .test2 .one {

        border-radius: 10px/5px;

    }

    .test2 .two {

        border-radius: 10px 20px/5px 10px;

    }

    .test2 .three {

        border-radius: 10px 20px 30px/5px 10px 15px;

    }

    .test2 .four {

        border-radius: 10px 20px 30px 40px/5px 10px 15px 20px;

    }

    </style>

</head>

<body>

    <h2>水平与垂直半径相同时：</h2>

    <ul class="test">

        <li class="one">提供1个参数<br>border-radius:10px;</li>

        <li class="two">提供2个参数<br>border-radius:10px 20px;</li>

        <li class="three">提供3个参数<br>border-radius:10px 20px 30px;</li>

        <li class="four">提供4个参数<br>border-radius:10px 20px 30px 40px;</li>

    </ul>

    <h2>水平与垂直半径不同时：</h2>

    <ul class="test2">

        <li class="one">提供1个参数<br>border-radius:10px/5px;</li>

        <li class="two">提供2个参数<br>border-radius:10px 20px/5px 10px;</li>

        <li class="three">提供3个参数<br>border-radius:10px 20px 30px/5px 10px 15px;</li>

        <li class="four">提供4个参数<br>border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>

    </ul>

</body>

</html>

CSS——圆角的更多相关文章

  1. DIV+CSS圆角边框

    简洁型css圆角: 方法1: 简洁型css圆角矩形 code1: <style type="text/css"> .b1,.b2,.b3,.b4,.b1b,.b2b,. ...

  2. css圆角矩形及去掉空格属性

    css圆角矩形 -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; 去掉空格 white-space:nowra ...

  3. 大神写的一个纯CSS圆角框，膜拜！（支持IE9一下的低版本）

    留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. CSS圆角效果

    看了院子里一篇关于CSS圆角技巧的文章,试了一下,觉得很好,贴出练习的代码.优秀文章链接: http://www.cnblogs.com/luluping/archive/2010/06/26/176 ...

  5. CSS圆角样式

    CSS圆角: /*纯css,设置图片圆角*/ #top2 { margin-left:20px; padding:10px; width:600px; height:300px; border: 5p ...

  6. CSS圆角进化论

     CSS圆角发展过程 大致经历了3个阶段,包括: 背景图片实现圆角 CSS2.0+标签模拟圆角 CSS3.0圆角属性(border-radius属性)实现圆角 ☛背景图片实现圆角:==使用背景图片实现 ...

  7. 兼容性很好的纯css圆角

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

  8. CSS圆角框，圆角提示框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. CSS 圆角框

    转载请注明来源:https://www.cnblogs.com/hookjc/ 其实这种圆角框是靠一个个容器堆砌而成的,每一个容器的宽度不同,这个宽度是由margin外边距来实现的,如:margin: ...

  10. css圆角边框

    一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...

随机推荐

  1. 【#HDC2022】HarmonyOS体验官活动正式开启，赶快投稿赢限量奖品吧！

      1. [活动简介] HDC 2022 于11月4日线上线下正式开启.历时一年,在无数开发者的共同努力下,我们汇聚了HarmonyOS生态的新成果.新体验.新开放能力,邀你参与到HarmonyOS的 ...

  2. centos7搭建vsftpd环境详解[亲测成功]

    centos7搭建vsftpd环境详解(亲测) 标签: centos7vsftpd   分类: linux相关(关于centos)(2)  版权声明:本文为博主原创文章,未经博主允许不得转载. 初学L ...

  3. 重新点亮shell————awk函数[十五]

    前言 简单介绍一下awk函数. 正文 算术函数 字符串函数 自定义函数 例子: 结 awk就到这里了.

  4. linux ssh连接

    前言 整理以前的随笔. 正文 首先更新源 sudo apt-get update 安装ssh服务 sudo apt-get install openssh-server 检测是否已启动 ps -e | ...

  5. js es6 模板字符

    前言 es的模板字符,也就是定义了块的概念. 模板字符的二个条件: 1.必须在``中,这个`不是单引号而是反单引号,是tab的上面一个. 2.在#{}中,这个就有点意思了,里面不像后台的块级,在这里不 ...

  6. 力扣1346(java&python)-检查整数及其两倍数是否存在（简单）

    题目: 给你一个整数数组 arr,请你检查是否存在两个整数 N 和 M,满足 N 是 M 的两倍(即,N = 2 * M). 更正式地,检查是否存在两个下标 i 和 j 满足: i != j 0 &l ...

  7. 力扣575(java&python)-分糖果（简单）

    题目: Alice 有 n 枚糖,其中第 i 枚糖的类型为 candyType[i] .Alice 注意到她的体重正在增长,所以前去拜访了一位医生. 医生建议 Alice 要少摄入糖分,只吃掉她所有糖 ...

  8. 宜搭小技巧｜维护Excel太麻烦？Excel一键转应用，为你的工作减负！

    ​简介:只需6步,轻松学会「Excel一键创建应用」! 在钉钉的聊天窗口中,每天都会流转数量巨大的Excel表格,用于信息收集和数据统计,但有时这些表格并不能很好地帮助到我们的工作,相反还会带来许多不 ...

  9. 走近Quick Audience，了解消费者运营产品的发展和演变

    简介: Quick Audience产品是一款云原生面向消费者的营销产品,自诞生以来,经历了三个发展阶段.每个阶段的转变,都与互联网环境和消费者行为的变迁有着极大的关联.   Quick Audien ...

  10. WPF 已知问题 某些设备上的应用在 WindowChromeWorker 抛出 System.OverflowException 异常

    准确来说,这个不算是 WPF 的问题,而是系统等的问题.在某些设备上的使用了 WindowChrome 功能的 WPF 应用,将在运行过程,在 WindowChromeWorker 类里面抛出 Sys ...