例子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. 一个.NET内置依赖注入的小型强化版

    前言 .NET生态中有许多依赖注入容器.在大多数情况下,微软提供的内置容器在易用性和性能方面都非常优秀.外加ASP.NET Core默认使用内置容器,使用很方便. 但是笔者在使用中一直有一个头疼的问题 ...

  2. 从源码入手详解ReentrantLock，一个比synchronized更强大的可重入锁

    写在开头 随手一翻,发现对于Java中并发多线程的学习已经发布了十几篇博客了,多线程 是Java基础中的重中之重!因此,可能还需要十几篇博客才能大致的讲完这部分的知识点,初学者对于这部分内容一定要多花 ...

  3. 云原生应用实现规范 - 初识 Operator

    简介: 本文我们将首先了解到 Operator 是什么,之后逐步了解到 Operator 的生态建设,Operator 的关键组件及其基本的工作原理,下面让我们来一探究竟吧. 作者 | 匡大虎.阚俊宝 ...

  4. 一文详解 Nacos 高可用特性

    简介: 我今天介绍的 Nacos 高可用,是 Nacos 为了提升系统稳定性而采取的一系列手段.Nacos 的高可用不仅仅存在于服务端,同时也存在于客户端,以及一些与可用性相关的功能特性中,这些点组装 ...

  5. 成中集团线下IDC迁移上云

    阿里云根据成中集团业务场景入手,提供了上云方案和迁移建议,利用这套架构,保障了公司数据的安全性并且满足了公司对于备份机制的建立的基本诉求,并且降低了业务出现中断的风险. 公司介绍 成中简介: 我们公司 ...

  6. 基于 ASK + EB 构建容器事件驱动服务

    简介:本篇文章以"在线文件解压场景"为例为大家展示经典 EDA 事件驱动与容器如何搭配使用. 作者:冬岛.肯梦 导读 EDA 事件驱动架构( Event-Driven Archit ...

  7. dotnet OpenXML 读取 PPT 形状边框定义在 Style 的颜色画刷

    本文来和大家聊聊在 PPT 形状使用了 Style 样式的颜色画刷读取方法 在开始之前,期望大家已了解如何在 dotnet 应用里面读取 PPT 文件,如果还不了解读取方法,请参阅 C# dotnet ...

  8. 2018-2-13-win10-uwp-右击选择-GridViewItem-

    title author date CreateTime categories win10 uwp 右击选择 GridViewItem lindexi 2018-2-13 17:23:3 +0800 ...

  9. 接私活利器！推荐一个基于SpringBoot3的后台管理框架

    大家好,我是 Java陈序员. 今天,给大家推荐一个后台管理框架,适合二次定制开发.接私活.源码学习等场景. 关注微信公众号:[Java陈序员],获取开源项目分享.AI副业分享.超200本经典计算机电 ...

  10. 2021~2022Apache大数据相关项目盘点

    一.晋升为Apache TLP(Top-Level Project)的大数据相关项目 1.1.Apache DataSketches (20210203) 1.2.Apache Gobblin (20 ...