在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. Bukkit之yaml动态读取

    在使用bukkit框架写插件的时候会经常使用到yml格式的文件来存储配置或者玩家数据,这里来说一下实现yml中数据的动态读写: 先来看一下yml文件中的内容结构 public boolean addB ...

  2. Eclipse Error Reporting Welcome to the Eclipse Error Reporting Service.Do you want to help Eclipse? Enable Disable

    在开发的时候,使用Eclipse IDE,提示如下信息, 这是Eclipse的错误报告,如果不想发送,可以关闭掉,关闭方法: 选择Preferences -> General -> Err ...

  3. linux iptables详解（转）

    概述 netfilter/iptables(简称为iptables)组成Linux平台下的包过滤防火墙,与大多数的Linux软件一样,这个包过滤防火墙是免费的,它可以代替昂贵的商业防火墙解决方案,完成 ...

  4. 第八篇——Struts2的处理结果类型

    Struts2处理结果类型 1.SUCCESS:表示Action正确的执行完成,返回相应的视图,success是name属性的默认值: 2.ERROR:表示Action执行失败,返回到错误处理视图: ...

  5. 记录在tiny6410平台上采用4GＳＤ卡来启动uboot和烧写nand flash uboot

    下面这种方法是从网上转的 没有验证 环境:ubuntu 13.04一.首先制作sd启动盘: 插入SD卡    sudo dd iflag=dsync oflag=dsync if=tiny210v2- ...

  6. 计算一个字符串的每个字符出现的次数案例——Map集合

    其中,字符的包装类是Character;字符串包装类是String: 遍历字符串转换的数组,每个元素都是一个字符,看创建的这个集合有木有,一开始肯定是没有的其实,字符作为key,所以判断的是这个创建的 ...

  7. Hdu2015 偶数求和

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2015 偶数求和 Time Limit: 2000/1000 MS (Java/Others)    M ...

  8. micropython驱动sh1106点亮oled

    继上一帖给esp32刷入micropython之后,忍不住给以esp12e也刷了micropython 这里先说一下webrepl: 通过wifi可以和esp8266交互,以及便携的传输文件 首次使用 ...

  9. ERROR 1290 (HY000): The MySQL server is running with the --secure-file-priv option so it cannot execute this statement

    centos7.5 使用into outfile备份失败 问题: mysql> select * from world.city into outfile '/tmp/world_city.da ...

  10. MySQL基础和JDBC

    第一章 命令行工具 mysqladmin:MySQL服务器管理工具 mysql:MySQL客服端链接工具 mysqldump 演示链接到服务器host=127.0.0.1,用户名为root,密码为空 ...