例子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. Device Partner平台合作伙伴认证和数据安全保护

     Device Partner平台是面向AIoT产业链伙伴的一站式服务平台,伙伴可以通过平台获取最新的产品.服务与解决方案,实现智能硬件产品的开发.认证.量产和推广等全生命周期的管理,加入Harmon ...

  2. sql 语句系列(加减乘除与平均)[八百章之第十四章]

    avg的注意事项 一张t2表: select * from t2 select AVG(sal) from t2 得到的结果是: 本来我们得到的结果应该是10的.但是得到的结果确实15. 这是因为忽略 ...

  3. Mysql安装和远程登录--Centos7

    在Centos7中使用的包管理工具是yum,当然使用包管理工具安装也是最方便的. 本文操作内容需要在root用户下,否则有些步骤无法成功执行. 系统环境信息展示 安装 MySQL 提供的 RPM wg ...

  4. 浏览器端实现类似input限制输入两位小数，输入时光标从输入位置移动到最后

    1.问题描述展示 示例代码所做限制为不允许输入字母d,其他限制规则可以根据需求自己调整,使用React编写,其他框架或原生均可根据该代码理解原理进行转变,特意使用了中文键盘可以看到输入框下面白色框闪出 ...

  5. 安装Visual Studio 2010 教程

    1.下载软件 方法一:关注[ 火耳软件安装 ]公众号获取软件,里面还有很多类型的其他软件 或者: 方法二:我的分享链接:https://pan.baidu.com/s/1_Ow2YR-kbnbSc6o ...

  6. 暑期集训 Day12 —— 模拟赛复盘

    ${\color{Green} \mathrm{Problem\ 1 :Subarray }} $ Map. ${\color{Green} \mathrm{Problem\ 2 :小z玩游戏 }} ...

  7. ARMS实践｜日志在可观测场景下的应用

    简介: 在实际生产中,通过灵活组合文内几种使用方式,运维团队可以很好地排除日常观测.故障定位过程中的干扰因素,更快的定界甚至定位问题根因. 作者:陈陈   日志在可观测场景下的应用   随着 IT 架 ...

  8. 【走进RDS】之SQL Server性能诊断案例分析

    简介: 数据库性能诊断不仅对其数据库技能要求较高,而且需要大量的前期准备工作,如收集各种性能基线.性能指标和慢SQL日志等,尤其是面对多数据库性能调优时,往往事倍功半. 客户的困扰 前几天某程序员小王 ...

  9. 深度干货｜云原生分布式数据库 PolarDB-X 的技术演进

    简介: 深入解读PolarDB-X的产品架构,以及分布式事务.透明分布式.水平扩展等技术内幕. 一.PolarDB-X是什么 PolarDB-X最早起源于阿里集团2009年提出用分布式架构替代传统商业 ...

  10. Unity3D OpenVR 虚拟现实 保龄球打砖块游戏开发

    据说水哥买了 Valve Index 设备,既然这个设备这么贵,不开发点有(zhi)趣(zhang)游戏就感觉对不起这个设备.本文将来开始着手开发一个可玩性不大,观赏性极强的保龄球打砖块游戏.这仅仅只 ...