例子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. Bash与shell的区别

    Bash 与 shell 的区别 介绍 常见的 shell 解释器有 sh.bash 这两种,其他的 ksh.csh 和 zsh 等是不常见的.Mac OS 中默认安装了以上所有类型,Windows ...

  2. 【资料包】HDC.Together 2023精选Codelabs指南现已上线（内有活动）

     今年HDC.Together 2023的Codelabs挑战系列活动如期而至,众多开发者齐聚一堂,积极参与.本次赛题中部分Codelabs已在官网上线详细操作指南,让我们与众多coders一起探索代 ...

  3. HUAWEI DevEco Studio 3.1版本发布，配套ArkTS声明式开发全面升级

     原文:https://mp.weixin.qq.com/s/ap5gH7vm3BUm0nU2WOzAzw,点击链接查看更多技术内容.     今年开发者大会发布了HarmonyOS应用开发套件Dev ...

  4. chrome浏览器代理插件SwitchyOmega使用

    第一步:下载SwitchyOmega插件 Proxy_SwitchyOmega_2.5.21.crx 第二步:安装插件, 1,在chrome扩展程序开启开发者模式: 2,将插件拖过来: 第三步:设置代 ...

  5. 深入分析 Flutter 渲染性能

    简介: Flutter 有很多优点,特别是对于开发者来说,跨平台多端支持,丰富的 UI 组件库和交互效果,声明式 UI,React 的更新方式,Hot-reload 提高开发效率等等.虽然它在渲染性能 ...

  6. 一文详解Redis中BigKey、HotKey的发现与处理

    简介: 在Redis的使用过程中,我们经常会遇到BigKey(下文将其称为"大key")及HotKey(下文将其称为"热key").大Key与热Key如果未能及 ...

  7. Go 语言网络库 getty 的那些事

    简介: Getty 维护团队不追求无意义的 benchmark 数据,不做无意义的炫技式优化,只根据生产环境需求来进行自身改进.只要维护团队在,Getty 稳定性和性能定会越来越优秀. 个人从事互联网 ...

  8. 2019-10-31-win10-uwp-录制任意应用屏幕

    title author date CreateTime categories win10 uwp 录制任意应用屏幕 lindexi 2019-10-31 09:10:38 +0800 2019-10 ...

  9. 优秀的 Modbus 主站（主机、客户端）仿真器、串口调试工具

    目录 优秀的 Modbus 主站(主机.客户端)仿真器.串口调试工具 主要功能 软件截图 优秀的 Modbus 主站(主机.客户端)仿真器.串口调试工具 modbus master,modbus,串口 ...

  10. SAP HANA计算视图

    Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. 越来越多的SAP用户正在将SAP HANA实施为现有SAP BW的基础和数据库. ...