定制椭圆形状
来源:互联网 发布:淘宝假冒品牌处罚 编辑:程序博客网 时间:2024/05/18 03:37
1、自适应椭圆
在创建圆形时,是通过border-radius这个属性给四个角指定一个合适的半径,当角半径大于一定值时就是圆了。
Tip : 但是,我们往往不希望设置固定的角半径,而是希望根据容器中的内容自动调整适应。
那么,怎么制作出自适应椭圆的?
border-radius特性
这个属性可以单独制定水平和垂直半径:
border-radius: 100px / 75px;
使用像素的缺点是,不能自适应。要想制作出自适应椭圆还要做一点改进,就是使用百分比替换像素作为单位。
border-radius: 50% / 50%;
因为“/”
两侧的值相同,所以 可以把上面的值合并在一起。
border-radius: 50%;
2、半椭圆
另外,border-radius还有另外一个特性,就是他可以接受四个参数(这四个角的顺序是:左上角半径、右上角半径、右下角半径、左下角半径)。看看下面的图
border-radius: 30% 50% 50% 30%;
或者,分别为四个角单独指定水平垂直半径。
border-radius: 30% 50% 50% 30% / 50% 50% 20% 20%;
下面是几个实例。
左半椭圆
border-radius: 100% 0 0 100% / 50% 0 0 50%;
1/4椭圆
border-radius: 100% 0 0 0 / 100% 0 0 0;
注意: 1/8椭圆、3/4椭圆、1/3椭圆,这些形状border-radius属性都不能生成。
糖果按钮
最后,看看通过上面说的知识可以做些什么。这里有一些通过border-radius属性制作的漂亮的糖果按钮http://simurai.com/archive/buttons/
1 0
- 定制椭圆形状
- SVG 形状_椭圆
- 自定义Button形状(圆形、椭圆)
- 自定义Button形状(圆形、椭圆)
- 自定义Button形状(圆形、椭圆)
- 画椭圆,多变型或其他形状
- 自定义Button形状(圆形、椭圆) shape
- HTML5画布定制形状教程
- 定制各种形状的ImageView
- (6)SVG中所用到的形状简介------椭圆
- Android 左右椭圆形状的ProgressBar 的自定义实现
- 6.(高级)CSS形状之:自适应椭圆
- 如何定制自己的窗体形状
- 椭圆
- OpenCV2.4.13 中 选取roi区域,任意形状(矩形,不规则多边形,圆形,椭圆,手动指定形状)
- VC6.0实现鼠标光标形状及大小的定制
- [绍棠] UIBezierPath类可以创建基于矢量的路径,可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状。
- OpenCV截取图像的任意形状区域,规则的图形(圆、椭圆、矩形),不规则鼠标自己选择
- Struts拦截器使用
- kali sources.list
- MySQL数据库常用命令
- 很多知识点c语言(单片机)
- android中双击退出程序的帮助类
- 定制椭圆形状
- 使用Servlet+jsp构建MVC体系结构的Web应用
- Different Ways to Add Parentheses 不同的添加括号的方式
- leetcode #83 in cpp
- Crossin先生的微信打飞机游戏(3)
- Struts2的配置
- 让CodeReview成为一种团队习惯
- http://my.oschina.net/u/2352897/blog
- codeforces 645C