绘制四分之一圆、半圆、椭圆、半椭圆(向上）

绘制圆角矩形

    <style>.box{width: 300px;height: 300px;background-color: pink;border: 1px solid black;margin: 30px auto;border-top-left-radius: 300px;}</style>
</head>
<body><div class="box box1"></div>
</body>

效果：

半圆

    <style>.box{width: 300px;/* height: 150px;半圆 height: 300px;正圆 */height: 150px;background-color: skyblue;border: 1px solid black;margin: 30px auto;border-top-left-radius: 150px;border-top-right-radius: 150px;}</style>
</head>
<body><div class="box box1"></div>
</body>

效果：

CSS3: border-radius绘制椭圆

语法：

border-radius: 1-4 length|% / 1-4 length|%;

一般写法： border-radius: 50%;

等价于： border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; （左上，右上，右下，左下）

"/"之前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径。

绘制椭圆

    <style>.box{width: 500px;height: 300px;background-color: pink;/* 椭圆 *//* 250px --水平半径（是盒子宽度的一半）*//* 150px --垂直半径（是盒子高度的一半） *//* border-radius: 250px/150px; *//* 50% -- 水平半径 （是盒子宽度的50%）*//* 50% -- 垂直半径 （是盒子高度的50%） */border-radius: 50%/50%;}</style>
</head>
<body><div class="box box1"></div>
</body>

预览：

绘制半椭圆(向上）

    <style>.box{width: 500px;height: 150px;background-color: yellow;margin-top: 200px;/* 半椭圆 */border-radius: 50% 50% 50% 50%/0 0 100% 100%;}</style>
</head>
<body><div class="box box1"></div>
</body>

预览：

绘制四分之一圆、半圆、椭圆、半椭圆(向上）相关推荐

python画四个相切的圆_如何用python绘制四分之一圆曲线
我想为我的程序画一个红色的4瓣单位: 我需要能够分别绘制每一条曲线,这样我就可以加粗它们,使大胆的白色图案在图片中显示出来.在我在想把原点坐标放在中心,然后在圆点周围画8个四分之一圆.在希望我只有 ...
OpenCV-基本图形绘制（圆、矩形、椭圆）
作者:翟天保Steven 版权声明:著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处 circle函数原型 void circle(InputOutputArray img, Poi ...
canvas绘制四分之一圆_canvas中怎么绘制一个扇形?四分之一圆.
2016-01-13 回答在html5 canvas 中,我们可以通过 arc 方法来绘制圆形: // context.arc(x, y, r, sangle, eangle, counterclo ...
css实现三角形、圆、椭圆、半椭圆、1/4圆（扇形）
1.三角形如何使用css生成一个三角形呢? 首先,先编写一个空元素. <div class="triangle"></div> 将该元素除了三角形底边的几 ...
CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）
CSS绘制形状(三角形.四分之一圆.半圆.圆.梯形.球体.菱形) 三角形 div {width: 0;height: 0;border: 200px solid transparent;border- ...
使用Python，OpenCV进行涂鸦（绘制文字、线、圆、矩形、椭圆、多边形轮廓、多边形填充、箭头~）
使用Python,OpenCV进行涂鸦(绘制文字.线.圆.矩形.椭圆.多边形轮廓.多边形填充.箭头) 1. 效果图 2. 原理 2.1 绘制线:cv2.line(canvas, (300, 0), ( ...
C# Graphic 绘制圆、三角形、椭圆、图片
C# Graphic 绘制圆.三角形.椭圆.图片原文:C# Graphic 绘制圆.三角形.椭圆.图片在form和panel上可以绘制图形,线段,圆,文字,图形等等. 绘制代码必须放在OnPain ...
C#图像处理-OpenCVSharp教程(八) OpenCVSharp基本绘图函数：绘制线、圆、矩形、椭圆、文字等
本文作者Color Space,文章未经作者允许禁止转载! 本文将介绍OpenCVSharp基本绘图函数:绘制线.圆.矩形.椭圆.文字等! 实现效果: 代码演示: using System; usin ...
python用函数绘制椭圆_详解opencv中画圆circle函数和椭圆ellipse函数
1. void ellipse(InputOutputArray img, Point center, Size axes, double angle, double startAngle, doub ...

绘制四分之一圆、半圆、椭圆、半椭圆(向上）

绘制四分之一圆、半圆、椭圆、半椭圆(向上）相关推荐

最新文章

热门文章