在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. Session, Token and SSO 有什么区别

    Session, Token and SSO 有什么区别 Basic Compareation Session-based Authentication In Session-based Authen ...

  2. spring boot + vue + element-ui全栈开发入门——主页面开发

    目的 开发一个后台管理的前端,顶部是标题,左侧是菜单导航栏,中间是要显示的内容.而内容可以是各种图表,也可以是数据列表. 一.准备工作 1..修改App.vue文件 代码如下: <templat ...

  3. [openjudge-搜索]城堡问题(The Castle)

    题目描述 描述 图1是一个城堡的地形图.请你编写一个程序,计算城堡一共有多少房间,最大的房间有多大.城堡被分割成mn(m≤50,n≤50)个方块,每个方块可以有0~4面墙. 输入 程序从标准输入设备 ...

  4. IP通信基础学习第二周

    此周的课程学习应该算是我对此科目真正学校生涯的开始吧,尽管我对该科目仍感到很陌生. 课程一开头,老师就给我们简单的介绍了网络的定义.发展及其分类,重点讲了网络拓扑结构及其在局域网上具体的分层情况.该部 ...

  5. Python之循环

    目标 程序的三大流程 while 循环基本使用 break 和 continue while 循环嵌套 一 程序的三大流程 在程序开发中,一共有三种流程方式: 顺序 —— 从上向下,顺序执行代码 分支 ...

  6. systemd 服务介绍

    CentOS7自定义系统服务 CentOS7的服务systemctl脚本存放在:/usr/lib/systemd/,有系统(system)和用户(user)之分,需要开机不登陆就能运行的程序,存在系统 ...

  7. Bugku-CTF之看看源代码吧

    Day13 看看源代码吧 http://123.206.87.240:8002/web4/   本题要点:url解码   首先看到文本框,我们还是要习惯性输入一下

  8. springboot配置cxf

    1.引入两个需要的jar <dependency> <groupId>org.apache.cxf</groupId> <artifactId>cxf- ...

  9. hduoj 1002 A + B Problem II

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1002 题目描述如下: A + B Problem II Time Limit: 2000/1000 M ...

  10. 虚拟现实外包公司—VR游戏你不知道的以及你该知道的WebVR

    VR基础——原理其实很简单 我们地球人之所以能够看到立体的景物,是因为双眼可以各自独立看东西,也就是左眼只能看到左眼的景物,而右眼只能看到右眼的景物.因为人类左右两眼有间距,造成两眼的视角有些细微的差 ...