CSS的圆角和定位实现太极

最新推荐文章于 2021-11-05 02:29:53 发布
最新推荐文章于 2021-11-05 02:29:53 发布
阅读量264 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46370067/article/details/104450108
版权
这篇博客介绍了如何利用CSS的圆角属性`border-radius`和定位技术来创建太极图。首先创建一个300*300的方形，然后通过设置不同颜色的边框和圆角，制作出两个半圆。接着通过相对定位将这两个半圆组合成完整的圆形。进一步添加两个圆环并使用绝对定位来完善太极图的细节，最终呈现完整的太极图案。
摘要由CSDN通过智能技术生成

逆战班第二周：CSS的圆角和定位实现太极图

主要用到的有圆角boorder-radius,定位
效果图：

先写第一个半圆
先写出一个300*300的方形，然后居中，设置边框（黑色设置黑色，白色设置白色），添加圆角，并相对定位
代码
在这里插入图片描述
第二个半圆
在这里插入图片描述
在这里插入图片描述
把两个圆定位合成一个圆，给白色定位
在这里插入图片描述

最低0.47元/天 解锁文章
weixin_46370067
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2021-06-01太极图实现（定位+动画）
qq_45287715的博客
06-01 264
效果 原理 解说： 利用一个大的盒子，利用border-radius:50%;设置为一个圆，在大的盒子里面放一个1号盒子（宽是大盒子一半，高度等同大盒子）在左边，利用border-radius左上和左下设值右上右下为0；右边在放一个2号盒子（宽是大盒子一半，高度等同大盒子）在右边，利用border-radius右上和右下设值左上左下为0。 利用子绝父相原理，大盒子相对定位，3号盒子和4号盒子都利用绝对定位（宽高都为父盒子的一半），在3号盒子里面再放一个5号盒子，实现垂直水平居中。在4号盒子里面放5号盒子
CSS实现太极图（3个div实现）
weixin_34109408的博客
11-29 283
使用三个div实现太极图的步骤如下： HTML部分 <div class="box"> <div class="yin"></div> <div class="yang"></div> </div> 第一步，画一个宽高为300px的圆，并为其加上阴影（为了看起来...
圆角和定位position
weixin_38167847的博客
08-24 90
圆角：用border-radius：10px 半径为10px的圆弧；正方形中，半径为宽的一半即是圆 position相对定位与绝对定位 相对定位：position：relative相对自己原本位置来移动的。且移动之后其他的元素不能占用你原来的位置.比如相对自己的顶top移动多少像素；相对自己原本位置的左边移动。 绝对定位：position：absolute ，...
CSS之定位以及圆角边框
撒野的博客
08-08 674
day06定位 position 两个大布局：盒模型 浮动 定位 定位：可以放到anywhere 1、定位类型： 静态定位:static 标准流下的默认值 一动不动 相对定位:relative 绝对定位:absolute 固定定位：fixed 2、定位方位值： left:当前定位元素距离父元素左侧边界的值 top:当前定位元素距离父元素上侧边界的值 right:当前定位元素距离父元素右侧边界的...
CSS 圆角处理图片和旋转动画
busyboy
07-07 1215
#container:hover{ transform:rotate(360deg); -moz-transform:rotate(360deg); /* Firefox 4 */ -webkit-transform:rotate(360deg); /* Safari and Chrome */ -o-transform:rotate(360deg); /* Opera */ } #con
用js实现CSS圆角生成更新
10-30
2. JavaScript的应用：JavaScript是实现圆角生成的核心语言，它可以通过DOM操作和CSS样式来实现圆角的生成。JavaScript可以动态地改变网页的样式和结构，从而实现圆角生成的更新。 3. 横向和纵向圆角生成：圆角生成...
纯css 圆角实现代码
09-25
在CSS世界里，实现圆角效果曾经是个挑战，特别是在不依赖图片的情况下。本文将探讨一种纯CSS实现圆角的方法，这种方法基于"无限接近"的概念，虽然并非完美，但能为开发者提供一个思路。 首先，我们要了解CSS圆角的...
CSS实现反方向圆角的示例代码
09-22
主要介绍了CSS实现反方向圆角的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
百度有啊 CSS圆角实现代码
09-25
百度有啊的CSS圆角实现方案利用了CSS中的背景定位属性来创建圆角效果，这种方法与通过一张图片实现圆角效果的原理类似，都是使用背景图像，并通过精确的定位来形成圆角的视觉效果。 在技术实现上，主要分为HTML结构...
使用css实现圆角图形绘制
09-25
在现代网页设计中，圆角图形的应用非常广泛，它们让界面看起来更加...通过这些知识点，开发者可以更加灵活地使用CSS来实现各种圆角效果，同时对于性能和兼容性问题有一个清晰的认识，以实现既美观又高效的网页设计。
利用css圆角及动画实现旋转的太极图
weixin_46385658的博客
06-27 805
今天给大家分享一下利用csss圆角及动画实现旋转的太极图 首先是介绍一下在编辑过程中利用到的知识点： 1.css圆角： css圆角是利用给盒子做边框倒角来实现圆形的制作，及在设定好盒子宽高之后添加boder-radios:50%; 2.动画： 动画在这里是设置太极图的旋转 ...
CSS制作太极图案
让世界更美好！
03-17 2227
太极 制作一个太极图案只需要一个&lt;div&gt;标签即可。先说下大概思路。 因为太极是圆的， 但是&lt;div&gt;是方的，那么如何通过&lt;div&gt;做出一个太极图案呢？ 这要用到border-radius属性，这个属性是用来设置边框圆角， 通过设置不同的border-radius值， 可以改变边框的弧度。 太极是有两种颜色的， 深色可以用border来设置， 浅色设置与否...
纯css实现太极图
我一点也不皮的博客
04-04 1249
纯css实现太极图动画概览步骤划分区域绘制样式动画源码 概览 这是最终的效果 如何通过纯粹的css样式去实现这一动画呢？让我们一步一步来完成。 步骤 划分区域 我们先需要在html中绘制一个静止的太极图，这就需要将太极图划分成不同的区域，然后为每个区域添加相应的样式。 我们可以按照下图的方式来划分太极图区域： 其中，每个不同的区域以不同的颜色填充，这样一来可以看出，我们将太极图划分为了六个区域，为了方便区分，我们为每个区域添加独特的class名称，分别为：taichi–left、taichi–right
通过CSS实现太极图案例
xu_yuxuyu的博客
11-05 4520
概述： 所谓太极即是阐明宇宙从无极而太极，以至万物化生的过程。其中的太极即为天地未开、混沌未分阴阳之前的状态。太极也指：“一阴一阳之谓道”也正是对太极的解释。 话不多说，先让我们看看太极图的形状~ 乍看好像挺难的，其实通过我们CSS是可以实现的，我们需要用到圆角边框属性和径向渐变、线性渐变属性就可以了，如果对这两个属性不是很熟悉的话，建议您先移步看下我的前面CSS的第八章和第九章的讲解，还是讲的比较仔细的，零基础的也能看得懂。 思路 先准备一个正方形的盒子，把这个盒子分成上下两个部分，这两个部分都是设置一
CSS3实现太极图教程
小鑫の随笔
12-23 3561
我们先来看效果： 制作步骤： 1、先画个半圆 .box{ width: 300px; height: 150px; margin: 10em auto; border-width: 150px 0 0 0; border-style: solid; border-color: #000; border-radius: 50%; position: relat...
css圆角属性
weixin_30911451的博客
07-19 1196
看了为昨天一篇博文【asp.net,对于一个有点经验的猴子,我的要求高么?】做点解释 才发现也不会玩圆角，楼主的2个题目也搞不出来，于是查阅后总结一下，学习学习，不过这玩意是不是不支持ie8啊 反正在哥机器上 就没成功显示过 圆角效果，首先我们应该来创建一个DIV和简单的CSS吧。 css3 圆角 <body><div id="box"></div&g...
使用HTML+CSS画太极八卦图
wangwangshuibingbing的博客
07-16 4684
使用HTML+CSS画太极八卦图 基本语法 CSS基本语法格式: 选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......} 选择符: 1.元素选择器:找到同名一系列 2.类选择器:找到同类名一系列 定义:<div class="div1">web前端开发1</div> 调用:.div1{属性1:属性值1;属性2:属性值2;属性3:属性值...
使用CSS实现圆角边框设计
"本文将深入探讨CSS圆角边框设计，如何使用CSS实现美观的圆角效果，并通过示例代码展示具体的实现方法。" 在网页设计中，CSS（层叠样式表）圆角边框是一种常见且重要的设计元素，它可以为网页元素添加柔和的视觉...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值