在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. 框架——flask知识点回顾

    1. flask--轻量级Web开发框架 2. Flask 没有默认使用的数据库,你可以选择 MySQL,也可以用 NoSQL 3. Web程序框架的意义: 用于搭建Web应用程序 免去不同Web应用 ...

  2. CentOS 7 keepalived+LVS

    LVS架构中 , 不管是NAT模式还是DR模式 , 当后端的RS宕机了 , 调度器还是会把请求转发到宕掉的RS上 , 然而keepalived可以解决该问题 , 它不仅仅有高可用的功能 , 还有负载均 ...

  3. 杨韬的Python/Jupyter学习笔记

    Python语法学习 https://zhuanlan.zhihu.com/p/24162430 Python 安装库 安装Jupyter Notebook 先安装Python cmd 进入K:\Ju ...

  4. Java Hello World源代码notepad++版

    Notepad++中写Java Hello World代码并运行,步骤如下: 1. 在E:\CodeDemo\Java文件夹下(你也可以选择自己的文件夹)新建一个txt文本文件. 如果没有NotePa ...

  5. C#简单打印出LIST集合

    循环打印集合,打印数组,随手写写,新手可以看看, 结果是不是有一些多余的0,把  int [][] ints =new int[3][];  改为new int[2][]; 运行出错,哈哈.  int ...

  6. np.meshgrid(）用法+ np.stack()用法

    A,B,C,D,E,F是6个网格点,坐标如图,如何用矩阵形式(坐标矩阵)来批量描述这些点的坐标呢?答案如下 这就是坐标矩阵——横坐标矩阵X XX中的每个元素,与纵坐标矩阵Y YY中对应位置元素,共同构 ...

  7. jquery首页图片轮播

    css样式 .bannerBox {position: relative;width: 100%;height: 348px;margin:0px auto;}.bannerBox .bannerLi ...

  8. nginx 番外----添加第三方模块

    #第三方模块需要先进行下载,然后再编译时指定文件目录 1.查看当前编译模块 root@nginx sbin]# ./nginx -V #查看当前添加模块 nginx version: nginx/ b ...

  9. CSS 使用技巧

    CSS 使用技巧 1.CSS代码重用,解决同一类样式下相同冲突点 <style> .c { 共有 } .c1 { 独有 } .c2 { 独有 } </style> <di ...

  10. charles License

    ubuntu charles 配置 Ubuntu16.04系统Charles的配置   key1: Registered Name: https://zhile.io License Key: 488 ...