css图形——椭圆
在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图形——椭圆的更多相关文章
- 奇妙的 CSS shapes(CSS图形)
CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outsid ...
- 美丽的CSS图形和HTML5
1.HTML5基础 文档类型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...
- 奇妙的 CSS shapes(CSS图形) 【css 图形,绘图,CSS 几何图形)】
http://www.cnblogs.com/coco1s/p/6992177.html <!DOCTYPE html> <html> <head> <met ...
- 有趣的css图形实现
css通过 border .border-radius .transform,实现各种图形. <!DOCTYPE html> <html lang="en"> ...
- CSS图形基础:纯CSS绘制图形
为了在页面中利用CSS3绘制图形,在页面中定义 <div class="container"> <div class="shape"> ...
- css图形——三角形
1.css图形简介 在浏览网页的时候,我们经常看见各种图形的效果,而但凡涉及到图形效果,我们第一个想到的就是用图片来实现.但是在前端开发中,为了网站的性能速度,我们都是秉承着少用图片的原生质. 因为图 ...
- css实现椭圆
先实现个简单点的,用css实现一个圆,ok,直接上代码: .circle{ width: 100px; height:100px; background: red; border-radius: 50 ...
- 利用噪声构建美妙的 CSS 图形
在平时,我非常喜欢利用 CSS 去构建一些有意思的图形. 我们首先来看一个简单的例子.首先,假设我们实现一个 10x10 的格子: 此时,我们可以利用一些随机效果,优化这个图案.譬如,我们给它随机添加 ...
- css实现椭圆、半椭圆
一.自适应的椭圆 1. 椭圆 css .ellipse{ width: 250px; height: 150px; margin: 50px; background: #FFD900; border- ...
随机推荐
- win7共享打印机和防火墙配置
今天给公司一台Win7电脑连接的打印机做共享.办公司共6台电脑,其中1台是连接了打印机,并安装了打印机驱动,可以正常本机使用打印机.现在需要其他5台电脑也共享使用打印机. 1.当共享的时候,提示“无法 ...
- scrapy流程图
refer:https://blog.yongli1992.com/2015/02/08/python-scrapy-module/ 这里是一张Scrapy架构图的展示.Scrapy Engine负责 ...
- tiny6410的启动参数
bootargs=root=/dev/mtdblock2 rootfstype=yaffs2 init=/linuxrc console=ttySAC0,115200 bootcmd=nand led ...
- 微信公众号开发流程,jssdk的使用以及签名算法的实现
一 开发流程 1 基本配置-登录自己的公众号 A:新型微信认证,认证过的企业号才可以进行自定义菜单中的连接跳转: B:开发基本配置里面进行开发者iD查询,密码查询和重置和ip白名单配置: C:公众号设 ...
- QComboBox列表项高度设置
QComboBox列表项高度设置步骤: 1. 设置代理 QStyledItemDelegate *delegate = new QStyledItemDelegate(this); ui->co ...
- Python Redis list
List操作,redis中的List在在内存中按照一个name对应一个List来存储. 注:列表存入 从右到左 如图: lpush(name,values) # 在name对应的list中添加元素,每 ...
- react-router 4.0(一)
import React from 'react'; import ReactDOM from 'react-dom' import {Link,Route,HashRouter} from 'rea ...
- JavaScript-DOM(1)
DOM简介 DOM 节点分类 DOM 节点层级关系 1.文档节点 1.父节点 2.标签(元素)节点 2.子节点 3.属性节点 3.兄弟节点 4.注释节点 4.根节点 5.文本节点 DOM节点分类 DO ...
- bootstrap-select——Methods
参考资料:http://silviomoreto.github.io/bootstrap-select/methods/ Methods .selectpicker('val'):通过调用元素的val ...
- Sublime text3修改tab键为缩进为四个空格
1.打开设置界面 2.设置属性 , "translate_tabs_to_spaces": true, "expand_tabs_on_save": true ...