CSS的圆角和定位实现太极

最新推荐文章于 2021-11-05 02:29:53 发布
最新推荐文章于 2021-11-05 02:29:53 发布
阅读量276 收藏 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 279
效果 原理 解说： 利用一个大的盒子，利用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 103
圆角：用border-radius：10px 半径为10px的圆弧；正方形中，半径为宽的一半即是圆 position相对定位与绝对定位 相对定位：position：relative相对自己原本位置来移动的。且移动之后其他的元素不能占用你原来的位置.比如相对自己的顶top移动多少像素；相对自己原本位置的左边移动。 绝对定位：position：absolute ，...
CSS之定位以及圆角边框
撒野的博客
08-08 681
day06定位 position 两个大布局：盒模型 浮动 定位 定位：可以放到anywhere 1、定位类型： 静态定位:static 标准流下的默认值 一动不动 相对定位:relative 绝对定位:absolute 固定定位：fixed 2、定位方位值： left:当前定位元素距离父元素左侧边界的值 top:当前定位元素距离父元素上侧边界的值 right:当前定位元素距离父元素右侧边界的...
CSS 圆角处理图片和旋转动画
busyboy
07-07 1229
#container:hover{ transform:rotate(360deg); -moz-transform:rotate(360deg); /* Firefox 4 */ -webkit-transform:rotate(360deg); /* Safari and Chrome */ -o-transform:rotate(360deg); /* Opera */ } #con
css画太极图(阴阳八卦)
09-25
总结起来，这个CSS太极图的实现主要涉及以下几个知识点： 1. CSS选择器：`id`选择器用于选中特定元素，伪元素`:before`和`:after`用于添加额外内容。 2. 盒模型：`border`属性设置边框，`border-radius`创建圆角，`...
利用CSS3的border-radius绘制太极及爱心图案示例
01-21
太极图border-radius 除了做边框圆角效果之外，把它用在画图示上的话，其实能产生出很多不同的创意哩。笔者今天要继续使用它来教各位画-太极图。 检视原始码 HTML XML/HTML Code复制内容到剪贴板 <body>  ...
纯css实现太极阴阳鱼动画
weixin_42686892的博客
01-12 510
昨天看到一个有意思的效果，闲来无事做一个： 把2d静态的太极图改成了3d，阴极和阳极分到了两个平面里实现旋转效果，这个好实现，重点是实现它的透明效果，平面太极图显示出两极是用另加的块元素挡住底面的颜色，但如果上图的两极用遮挡来实现效果的话并不能实现透明，将遮挡的块设为透明又会显示出底面原本的样子，所以这个思路不对。那就只能将底面本身变为透明，但怎么实现既透明又能出现这种样子呢？渐变，而且为了能出现圆的样子选择了径向渐变。 效果： 思路明确，开始操作 一个极分成四个块，圆...
利用css圆角及动画实现旋转的太极图
weixin_46385658的博客
06-27 834
今天给大家分享一下利用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 1307
纯css实现太极图动画概览步骤划分区域绘制样式动画源码 概览 这是最终的效果 如何通过纯粹的css样式去实现这一动画呢？让我们一步一步来完成。 步骤 划分区域 我们先需要在html中绘制一个静止的太极图，这就需要将太极图划分成不同的区域，然后为每个区域添加相应的样式。 我们可以按照下图的方式来划分太极图区域： 其中，每个不同的区域以不同的颜色填充，这样一来可以看出，我们将太极图划分为了六个区域，为了方便区分，我们为每个区域添加独特的class名称，分别为：taichi–left、taichi–right
通过CSS实现太极图案例
xu_yuxuyu的博客
11-05 4635
概述： 所谓太极即是阐明宇宙从无极而太极，以至万物化生的过程。其中的太极即为天地未开、混沌未分阴阳之前的状态。太极也指：“一阴一阳之谓道”也正是对太极的解释。 话不多说，先让我们看看太极图的形状~ 乍看好像挺难的，其实通过我们CSS是可以实现的，我们需要用到圆角边框属性和径向渐变、线性渐变属性就可以了，如果对这两个属性不是很熟悉的话，建议您先移步看下我的前面CSS的第八章和第九章的讲解，还是讲的比较仔细的，零基础的也能看得懂。 思路 先准备一个正方形的盒子，把这个盒子分成上下两个部分，这两个部分都是设置一
CSS3实现太极图教程
小鑫の随笔
12-23 3577
我们先来看效果： 制作步骤： 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 1197
看了为昨天一篇博文【asp.net,对于一个有点经验的猴子,我的要求高么?】做点解释 才发现也不会玩圆角，楼主的2个题目也搞不出来，于是查阅后总结一下，学习学习，不过这玩意是不是不支持ie8啊 反正在哥机器上 就没成功显示过 圆角效果，首先我们应该来创建一个DIV和简单的CSS吧。 css3 圆角 <body><div id="box"></div&g...
使用HTML+CSS画太极八卦图
wangwangshuibingbing的博客
07-16 4689
使用HTML+CSS画太极八卦图 基本语法 CSS基本语法格式: 选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......} 选择符: 1.元素选择器:找到同名一系列 2.类选择器:找到同类名一系列 定义:<div class="div1">web前端开发1</div> 调用:.div1{属性1:属性值1;属性2:属性值2;属性3:属性值...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值