用css和html制作太极图

css相关参数介绍

边距

边框

伪元素选择器

太极图案例实现、

代码

效果

css相关参数介绍

边距

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}div{width: 100px;height: 100px;/* margin-left: -110px; *//* 内边距 : 边框距离内容的长度*//* padding:100px; *//*    上下内边距  左右边距*//* padding: 100px 500px; *//*       上     右      下     左 *//* padding: 10px 100px  200px 300px; *//* 距离上边界的长度 *//* padding-top: 100px; *//* 距离左边界的长度 *//* padding-left: 100px; *//* 距离底边界的长度 *//* padding-bottom: 100px; *//* 距离右边界的长度 *//* padding-right: 100px; *//* 外边距 ：边界距离其他标签或者页面的长度*//* margin:100px 200px ; *//* margin: 10px 100px 200px 400px; *//* 左边距 *//* margin-left: 100px;margin-top: 100px;margin-right: 100px;margin-bottom: 100px; */border: 1px solid red;/*  默认情况下块元素的宽跟页面相同，高的默认值是0 */}</style></head><body><div>11111111111</div><p>22222222222</p></body>
</html>

边框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width: 100px;height: 100px;/* border缩略写法*//* border: dashed 1px red; *//* 以下三个属性完全等价于上面的边框 */border-width: 1px;/* border-color: red; */border-style: solid;/* 将四个角进行圆化处理 *//* border-radius: 50%; *//* 左上角圆化 *//* border-top-left-radius: 50%; *//* 右下角圆化 *//* border-bottom-right-radius: 50%; *//* 右上 *//* border-top-right-radius: 50%; *//* 左下 *//* border-bottom-left-radius: 50%; *//* 左边绿色 */border-left-color: green;border-top-color: red;border-right-color: yellow;border-bottom-color: purple;border-left-style: dashed;border-top-style: dotted;border-right-style: groove;border-bottom-style: solid;}</style></head><body><div></div></body>
</html>

伪元素选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}ul{list-style: none;}/* 	ul>li{border: 1px solid red;} *//* 标签中的文字的第一个字符做渲染 *//* ul>li::first-letter{font-size: 50px;color: rebeccapurple;} *//* ul>li::first-line{font-size: 50px;color: rebeccapurple;} */ul>li::before{/* 在写before伪元素是，content必须存在，否则整个伪元素无效 */content: "";display: inline-block;width: 10px;height: 10px;border: 1px solid blue;margin-right: 10px;margin-top: 20px;background-color: blue;border-radius: 50%;}</style></head><body><ul><li>壹234567890</li><li>贰asdasdfsdf</li><li>叁ccccccc</li></ul></body>
</html>

太极图案例实现、

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{background-color: burlywood;}div{width: 0;height: 200px;border-left-width: 100px;border-left-color: white;border-left-style: solid;border-right-width: 100px;border-right-color: black;border-right-style: solid;border-radius: 50%;			}div::before,div::after{content: "";width: 25px;height: 25px;display: block;background-color: white;border: 37.5px black solid;border-radius: 50%;margin-left: -50px;}div::after{border-color: white;background-color: black;}</style></head><body><div></div></body>
</html>