在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. write RE validation

    正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式通常被用来检索.替换那些符合某个模式(规则) ...

  2. QT中显示gif图片方法

    movie = new QMovie(":/timg.gif"); movie->setScaledSize(QSize(,)); ui->giflabel->s ...

  3. java.sql.SQLException: Access denied for user 'scott'@'localhost' (using password: YES)

    今天用eclipse连接一下数据库,出现此异常. java.sql.SQLException: Access denied for user 'scott'@'localhost' (using pa ...

  4. JavaScript if 条件语句

    JavaScript if 条件语句 使用: if(条件){ }else if(条件){ }else if(条件){ }else{ } 示例: // 判断相等 if(1==1){ } // 判断不等 ...

  5. Docker Compose 一键部署多节点爬虫程序

    Docker Compose 一键部署多节点爬虫程序 目录结构 [root@localhost ~]# tree compose_crawler/ compose_crawler/ ├── cento ...

  6. 系统安装后的linux和vmware的网络配置

    一.1表示linux的版本   2表示linux内核的版本   3表示操作系统多少位  4.表示操作系统的名称 二.配置虚拟机网络 1.在办公室控制和使用服务器(机房) 2.远程连接 ###配置虚拟机 ...

  7. PHP遍历目录和文件及子目录和文件

    正常直接使用opendir方法,就可以读到所有的目录和文件 文件可以直接记录下来,目录则需要再进一步获取里边的文件信息 也就是,如果当前读出来是目录,则需要再次调用函数本身(递归),直到没有目录 循环 ...

  8. Unicode UTF-8 UTF-16的关系

    以下仅为个人学习的记录,如有疏漏不妥之处,还请不吝赐教. 关系 Unicode是一个字符集.顾名思义,字符的集合.GBK,BIG5,ISO8859-1,ASCII都是字符集. 有一点不同的是,Unic ...

  9. HBase最佳实践－写性能优化策略

    本篇文章来说道说道如何诊断HBase写数据的异常问题以及优化写性能.和读相比,HBase写数据流程倒是显得很简单:数据先顺序写入HLog,再写入对应的缓存Memstore,当Memstore中数据大小 ...

  10. Java的程序执行过程与编译原理

    百度云:https://pan.baidu.com/s/16FVPI8PSqk5O8qufljCNHg 提取码:a2vr 一,文字步骤 1.编写源代码 2.进入cmd 3.输入javac将文件编译转换 ...