用php的for循环画椭圆,如何快速简单的使用css3画出各种各样的椭圆

2024-06-08 01:59:41

以前前端开发的时候，对于那些特殊的图形，前端开发人员大部分的时候会使用图片的剪裁来插入特殊的图形，而现在随着css3的发展，很多形状可以通过css3画出，本篇文章给大家带来的内容是关于如何快速简单的使用css3画出各种各样的椭圆，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

使用css3画出各种各样的椭圆的原理

我们需要使用css3中的border-radius属性，修改width值为200px，然后把border-radius改成100px / 50px;“/”之前的是水平半径，”/”之后的是垂直半径，所以 100px / 50px就让div成了椭圆border-radius: 100px/50px;

我们既然需要使用css3中的border-radius属性，那么今天我们将带大家详细了解一下border-radius属性。

border-radius属性含义：border-radius属性简写属性为元素添加圆角边框。

语法：border-radius: 1-4 length|% / 1-4 length|%;

浏览器兼容性：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

使用css3画出各种各样的椭圆的代码

菜鸟教程(runoob.com)

#rcorners1 {

border-radius: 50px/15px;

background: #8AC007;

padding: 20px;

width: 200px;

height: 150px;

}

#rcorners2{

border-radius: 15px/50px;

background: #8AC007;

padding: 20px;

width: 200px;

height: 150px;

}

#rcorners3 {

border-radius: 50%;

background: #8AC007;

padding: 20px;

width: 200px;

height: 150px;

}

实例效果如图所示

应用：使用css3画出椭圆后插入图片

img {

border-radius: 50%;

}

椭圆形图片

使用 border-radius 属性来创建椭圆形图片：

实例效果如图所示

用php的for循环画椭圆,如何快速简单的使用css3画出各种各样的椭圆相关推荐

python画熊猫头_超简单的熊猫头简笔画原创教程步骤
导读:小编根据大家的需要整理了一份关于<超简单的熊猫头简笔画原创教程步骤>的内容,具体内容: 熊猫生活在海拔2600-3500米的茂密竹林里,那里常年空气稀薄,云雾缭绕,气温低于20℃.那 ...
简笔画花边边框超简单_花边简笔画简单又漂亮手抄报的边框图片大全
导语:今天小编就给大家教授一个技能,怎样画花边简笔画简单又漂亮还容易上手.估计有朋友是不相信的,哪里有简单还好看的呢,当然小编也要承认,要画出顶级的优秀的手抄报是不可能简单的,但是我们又不是去参加国家 ...
css3画一个三角形,css3 画三角形
/*箭头向上*/ .arrow-up { width:0; height:0; border-left:20px solid transparent; border-right:20px solid ...
简笔画花边边框超简单_简单花边边框简笔画高清图片
简笔画当中有些人想要画简单的花边图.你知道花边的简笔有哪些吗?今天先和学习啦小编一起欣赏这些简单花边边框简笔画高清图片,希望你会有所收获的. 简单花边边框简笔画高清图片欣赏简单花边边框简笔画高清图片 ...
Windows程序设计——Ellipse函数画圆及不用Windows自带的画椭圆函数画椭圆
Ellipse函数的用法函数功能:该函数用于画一个椭圆,椭圆的中心是限定矩形的中心,使用当前画笔画椭圆,用当前的画刷填充椭圆. 函数原型:BOOL Ellipse(HDC hdc, int nLef ...
lisp 圆柱螺旋线_AUTOCAD中的螺旋线怎么画?(椭圆的上下两面圆的不同象限点如何在椭圆表面用曲线连接)...
AUTOCAD中的螺旋线怎么画?(椭圆的上下两面圆的不同象限点如何在椭圆表面用曲线连接) AUTOCAD中的螺旋线怎么画?(椭圆的上下两面圆的不同象限点如何在椭圆表面用曲线连接) 我的是2005版本 ...
HTML关于机器猫的小游戏,完美起航-用HTML5+CSS3画一个简易的机器猫头像
用HTML5+CSS3画一个机器猫的头像,原图如下: 代码实现效果如下: 布局使用了绝对定位.相对定位以及浮动,鼻子使用了背景图像渐变的效果, 笑脸的嘴巴使用椭圆的下边框实现,胡须部分的细节处理得还是 ...
python3画圆、直线_Bresenham直线算法与画圆算法
在我们内部开发使用的一个工具中,我们需要几乎从 0 开始实现一个高效的二维图像渲染引擎.比较幸运的是,我们只需要画直线.圆以及矩形,其中比较复杂的是画直线和圆.画直线和圆已经有非常多的成熟的算法了,我 ...
18怎么确定板子形状_板绘怎么画线条排线？板绘小白画线不稳怎么办？
想学习绘画去找不到方法?小编为大家提供一套学习素材~~领取方式在文章最后~~ 很多初学者在刚刚接触板绘的时候经常会因为手不稳而无法控制线条的运用,导致画面显得粗糙,形状或结构不标准,画面花等等问题. ...

最新文章

热门文章