在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. 查看 chrome 浏览器中的 Headers

    查看 chrome 浏览器中的 Headers, Response 信息:

  2. websocket 二合一

    server from flask import Flask, request, render_template from geventwebsocket.handler import WebSock ...

  3. hdu5029 Relief grain

    题目链接 树剖+线段树 将区间修改转化为单点修改,因为如果按DFS序进行修改,那么一定会对DFS序更大的点造成影响 #include<iostream> #include<vecto ...

  4. [转载]get、post异同

    1. get是从服务器上获取数据,post是向服务器传送数据. 2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过 ...

  5. Python数据分析Pandas库方法简介

    Pandas 入门 Pandas简介 背景:pandas是一个Python包,提供快速,灵活和富有表现力的数据结构,旨在使“关系”或“标记”数据的使用既简单又直观.它旨在成为在Python中进行实际, ...

  6. 扩容 swap 分区

    扩容 swap 分区 题:添加一个 swap 分区在您的系统中添加一个大小为 512 MiB 的 swap 分区.当您的系统启动时,swap 分区应 该可以自动挂载.不要移除或者修改其他已经存在于您的 ...

  7. Docker Weave 应用部署

    Docker Weave 应用条件 官方文档:https://www.weave.works/docs/net/latest/install/installing-weave 使用前提: 1. 确保L ...

  8. Docker Swarm 高可用详解

    Docker Swarm 高可用详解 Manager管理节点宕机后其他管理节点仍然可以使用管理 intermal distributed state store:内部分布式状态存储同步共享到每个节点. ...

  9. 通过 UC2000-VG-32G设备呼叫不进号问题排查

    1.登陆设备管理页面: 呼叫发起时,呼叫状态显示振铃,但是不进号. 2.查看设备cdr. 3.得出结论:NO CARRIER 由于号码频繁呼叫次数太多运营商对其死锁.

  10. [转载]Windows系统的错误报告保存在哪个文件夹里？

    转自:http://www.xitonghe.com/jiaocheng/xp-786.html   Windows系统的错误报告保存在哪个文件夹里? 发布时间:2014-10-31 20:52:20 ...