html_css_四分之一圆

需求:

效果:

代码:

<!DOCTYPE html>
<html>
<head><title>四分之一圆</title><style type="text/css">.class_div_bg {width: 400px;height: 200px;background-color: #ccc;/*设置div垂直居中*/position: absolute;margin: auto;/*注意: top bottom left right四者数值相同即可*/top: 0;bottom: 0;left: 0;right: 0;}.class_div_arc1 {width: 50px;height: 50px;background-color: #fc0;/*四分之一圆*/border-radius: 0 0 100% 0;/*定位*/position: absolute;left: 0;top: 0;}.class_div_arc2 {width: 50px;height: 50px;background-color: #fc0;/*四分之一圆*/border-radius: 100% 0 0 0;/*定位*/position: absolute;right: 0;bottom: 0;}</style>
</head>
<body>
<div class="class_div_bg"><div class="class_div_arc1"></div><div class="class_div_arc2"></div>
</div>
</body>
</html>

核心内容:

1. div屏幕居中:

/*设置div垂直居中*/
           position: absolute;
           margin: auto;
           /*注意: top bottom left right四者数值相同即可*/
           top: 0;
           bottom: 0;
           left: 0;
           right: 0;

2. CSS画四分之一圆

border-radius: 100% 0 0 0; // 左上1/4圆

border-radius: 0 0 100% 0; // 右下1/4圆

border-radius: 左上右上右下左下

3. 绝对定位相关知识点

3.1 绝对定位的元素的位置相对于最近的已定位父元素，

如果元素没有已定位的父元素，那么它的位置相对于<html>:

3.2 相对定位元素经常被用来作为绝对定位元素的容器块。

3.3 HTML元素的默认没有定位，元素出现在正常的流中。

html_css_四分之一圆相关推荐

CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）
CSS绘制形状(三角形.四分之一圆.半圆.圆.梯形.球体.菱形) 三角形 div {width: 0;height: 0;border: 200px solid transparent;border- ...
CSS画出半圆，四分之一圆，三角等图形
圆形 .icon{width: 100px;height: 100px;background: red;border-radius: 50%;} 半圆 .icon{width: 100px;heigh ...
CSS学习之圆、半圆、四分之一圆以及三角形的创建
1.圆的创建下面这段代码用来实现圆的创建 <style>div.cri {background-color: red;width: 200px;height: 200px;border- ...
css多种方法画四分之一圆曲线
写这道题是之前面试时碰到的题目,在这给大家分享几种画四分之一圆曲线方法: 1.设置上.右边框,然后对右上角设置圆角 width: 100px;height: 100px;border-top:1px ...
CSS中四分之一圆的写法
关于百度前端学院中task4四分之一圆的画法(基于CSS中画圆角的方法) 方法一: 设置宽高为100px,border-radius设置为50%(当然这里也可以设置为50px) width:100px ...
【CSS】实现圆、二分之一、四分之一圆
最近项目重构,其中有个模块涉及到的交互全改了,跟css挂钩的点很多,这里简单做个记录. 要实现圆首先得知道border-radius这个属性,引用MDN上的解释: CSS 属性 border-radi ...
css 实现半圆与四分之一圆
半圆的css 控制 border-radius 与宽高,来设置圆的方向. div {width:10px;height: 20px;background-color: pink;border-ra ...
python画四个相切的圆_如何用python绘制四分之一圆曲线
我想为我的程序画一个红色的4瓣单位: 我需要能够分别绘制每一条曲线,这样我就可以加粗它们,使大胆的白色图案在图片中显示出来.在我在想把原点坐标放在中心,然后在圆点周围画8个四分之一圆.在希望我只有 ...
css3实现完整圆、半圆、四分之一圆
这篇文章主要是利用css3的border-radius属性完成完整圆.半圆.四分之一圆的实现,希望对你们有所帮助. 对于border-radius属性: .test {border-radius: ...

html_css_四分之一圆

html_css_四分之一圆相关推荐

最新文章

热门文章