马三荷

css图形——椭圆

在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>

结果：

 

posted on 2018-01-29 10:22  马三荷  阅读(682)  评论(0)  编辑  收藏  举报

导航