Web前端学习 09 css3实现太极图

昨天学习了CSS3基础的部分知识，并用所学的内容做出了一个旋转的太极图。
先总结所学的内容吧！
css3基础
1.边框

border-radius：用于创建圆角
border-image：使用图片创建边框
box-shadow：用来添加阴影

2.背景

background-size: 300px 300px;
background-size: 50% 100%;
background-size: cover;
background-size: contain;

练习：div撑满整个屏幕 1.撑满全屏 2.背景设置全屏

设置背景开始的位置

     background-origin: padding-box/border-box/content-box ;
    background-clip:   padding-box/border-box/content-box;
    
     background: linear-gradient(0deg,black 50%, white 50%);
     background: linear-gradient(to bottom,black 1%, white 99%) no-repeat;

1.渐变的方向
2.颜色

 background: radial-gradient(circle,red , green , blue );
 opacity:

圆角边框，阴影，背景大小，背景渐变
练习：太极图，形状

3.文本
text-shadow：向文本添加阴影
word-wrap：允许长单词换到下一行

text-overflow：当文本溢出包含元素时发生的事情
超出容器长度时,显示…：

   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;

4.字体:

5.透明:

background:rgba(1,1,1,0.5)

---

太极图的实现代码：
html部分：

<div class="box">  </div>

css部分：

*{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            margin: 50px auto;
            width: 500px;
            height: 500px;
            box-shadow:1px 1px 10px 10px gray;
            border-radius: 50%;
            background: linear-gradient(0deg,black 50%,white 50%);
            border: 1px solid rosybrown;
            transition: all linear 5s;
        }
        .box:hover{
            transform: rotate(3000deg);
        }
        .box:before,.box:after{
            position: absolute;
            content: "";
            width: 50%;
            height: 50%;
            top: 25%;
            border-radius: 50%;
            box-sizing: border-box;
        }