css图形——椭圆

最新推荐文章于 2022-12-22 11:21:18 发布

weixin_30836759

最新推荐文章于 2022-12-22 11:21:18 发布

阅读量253

点赞数

原文链接：http://www.cnblogs.com/masanhe/p/8359084.html

版权

在css中，我们也使用border-radius属性来实现椭圆

语法

border-radius:x/y;

说明：

x表示圆角的水平半径，y表示圆角的垂直半径。

例如：border-radius:30px相当于border-radius:30px/30px

想要实现椭圆，原理如下：高度和宽度不相等，其中四个圆角水平半径定义为宽度的一半，垂直半径定义为高度的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .tc{
            width: 60px;
            height: 100px;
            border: 1px solid black;
            border-radius: 30px/50px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="tc"></div>
</body>
</html>