在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. Unity性能优化之特效合并

    特效合并,意思是说将粒子所用的零碎图片,以shader为单位合并成一张图集,好处就是可以降低draw call.试想,合并前每个粒子使用一个material,而每一个material就要占用一个dra ...

  2. PyQT的安装和配置

    安装pythonQt 操作系统:Windows 7 64位 python版本:3.4 PyQt5使用PIP安装 测试是否安装成功 导入PyQt5 没报错说明安装成功 pythonQt Designer ...

  3. 【2017-05-18】WebForm的Repeater控件及简单控件

    <%@ %> - 这里面写一些声明和引用的 <%  %> - 编写C#代码的 <%= %> - 往界面上输出一个变量的值 <%# Eval("属性名 ...

  4. request.getParameter()获取不到数据

    HTML中的form表单有一个关键属性 Content-Type＝application/x-www-form-urlencoded 或multipart/form-data. 1. Content- ...

  5. dva构建react项目

    第一步:安装 dva-cli 1 cnpm install dva-cli -g 第二步:采用dva来创建项目: 1 dva new react_two 2 cd react_two 用webstor ...

  6. QComboBox列表项高度设置

    QComboBox列表项高度设置步骤: 1. 设置代理 QStyledItemDelegate *delegate = new QStyledItemDelegate(this); ui->co ...

  7. ElasticSearch(七) Elasticsearch在Centos下搭建可视化服务

    要想可视化ElasticSearch,就需要安装一些插件,安装插件的前提是安装所依赖的环境,比如java,maven等,本篇博文就不再走那些流程了.没安装的童鞋可以看我的ElasticSearch栏目 ...

  8. Html select、option、optgroup 标签

    Html select 标签 </body> </html> <!-- select外部下拉选择框.name="xxx"标识后端获取名称 --> ...

  9. Docker Kubernetes YAML文件常用指令

    YAML文件常用指令 配置文件说明: 定义配置时,指定最新稳定版API(当前为v1). 配置文件应该存储在集群之外的版本控制仓库中.如果需要,可以快速回滚配置.重新创建和恢复. 应该使用YAML格式编 ...

  10. vue_elementUI_ tree树形控件 获取选中的父节点ID

    el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...