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

结果：

css图形——椭圆的更多相关文章

  1. 奇妙的 CSS shapes(CSS图形)

    CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outsid ...

  2. 美丽的CSS图形和HTML5

    1.HTML5基础 文档类型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  3. 奇妙的 CSS shapes(CSS图形) 【css 图形，绘图，CSS 几何图形)】

    http://www.cnblogs.com/coco1s/p/6992177.html <!DOCTYPE html> <html> <head> <met ...

  4. 有趣的css图形实现

    css通过 border .border-radius .transform,实现各种图形. <!DOCTYPE html> <html lang="en"> ...

  5. CSS图形基础：纯CSS绘制图形

    为了在页面中利用CSS3绘制图形,在页面中定义 <div  class="container"> <div class="shape"> ...

  6. css图形——三角形

    1.css图形简介 在浏览网页的时候,我们经常看见各种图形的效果,而但凡涉及到图形效果,我们第一个想到的就是用图片来实现.但是在前端开发中,为了网站的性能速度,我们都是秉承着少用图片的原生质. 因为图 ...

  7. css实现椭圆

    先实现个简单点的,用css实现一个圆,ok,直接上代码: .circle{ width: 100px; height:100px; background: red; border-radius: 50 ...

  8. 利用噪声构建美妙的 CSS 图形

    在平时,我非常喜欢利用 CSS 去构建一些有意思的图形. 我们首先来看一个简单的例子.首先,假设我们实现一个 10x10 的格子: 此时,我们可以利用一些随机效果,优化这个图案.譬如,我们给它随机添加 ...

  9. css实现椭圆、半椭圆

    一.自适应的椭圆 1. 椭圆 css .ellipse{ width: 250px; height: 150px; margin: 50px; background: #FFD900; border- ...

随机推荐

  1. -bash: 未预期的符号 `(' 附近有语法错误

    [1]问题现象 -bash: 未预期的符号 `(' 附近有语法错误 [2]解决方案 给括号前面加反斜杠即可 Good Good Study, Day Day Up. 顺序 选择 循环 总结

  2. Dvelopment descriptor

    部署描述符是JavaEE程序常见的一部分,但是之前都没有较为全面的学习过,这里就较为全面的记录一下部署描述符中的元素.部署一个Servlet 3 或以上应用程序是一件轻而易举的事.通过Servlet注 ...

  3. Linux mail 邮件发送

    Linux mail 邮件介绍 在Linux系统下我们可以通过”mail“命令,发送邮件,在运维中通常我们它来实现邮件告警. 安装 (方案1) 一.安装邮件服务 yum install -y send ...

  4. socket实现文件传输

    server:===========================================import socketimport structimport jsonsk = socket.s ...

  5. loj2353. 「NOI2007」 货币兑换

    loj2353. 「NOI2007」 货币兑换 链接 https://loj.ac/problem/2353 思路 题目不重要,重要的是最后一句话 提示 输入文件可能很大,请采用快速的读入方式. 必然 ...

  6. 【Bilinear interpolation】双线性插值详解（转）

           最近在做视频拼接的项目,里面用到了图像的单应性矩阵变换,在最后的图像重映射,由于目标图像的坐标是非整数的,所以需要用到插值的方法,用的就是双线性插值,下面的博文主要是查看了前辈的博客对双 ...

  7. 关系数据库、NoSQL和NewSQL数据库产品分类

  8. Centos7 安装并配置redis

    一. 安装 操作系统:Centos 7. 最小化安装 redis版本: 4.0.2 服务器地址:*** 安装过程: 安装wget, yum -y install wget 2.  下载redis wg ...

  9. linux使用代理进行apt安装 以 nord 为例

    我的环境:(不必完全一样,只是提一下)----------- linux系统:kali 桌面:xface ----------------------------------------------- ...

  10. 2017 Russian Code Cup (RCC 17), Elimination Round D - Acute Triangles

    D - Acute Triangles 思路: 极角排序+点积叉积 在一个三角形中,如果它是直角或者顿角三角形,那么直角和顿角只会出现一次 所以直角和顿角三角形的个数等于直角和顿角的个数 所以锐角三角 ...