主题：眼睛

你们谁知道你已经创建了多少个社交媒体资料？为了获得令人耳目一新的转折，您也可以自己创建一个。

技术：flex布局

难点：当给一个盒子设置圆角边框为50%后，边框颜色还可通过上右下左的顺序来设置，如下图

 .box {width: 300px;height: 300px;border-radius: 50%;border-width: 20px;border-style: solid;border-color: blue green red gold;}

说实话，这个圆形边框之前并没有考虑到。我以为，鼠标移动到头像上旋转的圆弧使用svg技术画上去的，因为像这种上下左右颜色都不一样的边框一般只会应用给正方形，当应用给圆形时，我们好像大脑会忽略css好像还有这个功能，通过练习，发现圆形也有这个功能，get到了！！！

 <div class="box"><div class="card"><div class="left"><div><img src="./1.png" alt=""><div></div><div></div></div><div><h3>Jessica Potter</h3><span> Visual Artist</span></div><div><button>Follow</button><button>Message</button></div></div><div class="right"><div><h3>523</h3><span>Posts</span></div><div><h3>1387</h3><span>Likes</span></div><div><h3>146</h3><span>Follower</span></div></div></div></div>

//out:./
@brown:#796551;
* {margin: 0;padding: 0;box-sizing: border-box;
}
.box {width: 400px;height: 400px;background: linear-gradient(to right,#ecb96a,#d18b54);display: flex;.card {width: 300px;height: 270px;background-color: #fff;margin: auto;display: flex;border-radius: 3px;.left {width: 190px;height: 100%;/* background-color: pink; */border-radius: 3px 0 0 3px;display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;div:nth-child(1),div:nth-child(1) img{width: 60px;height: 60px;border-radius: 50%;}div:nth-child(1) {position: relative;top: 15px;div:nth-child(2) {width: 64px;height: 64px;border-radius: 50%;position: absolute;top: -2px;left: -2px;border-width: 1px;border-style: solid;border-color: @brown @brown @brown transparent;transition: all 1s ease-in-out;}div:nth-child(3) {width: 68px;height: 68px;border: 1px solid @brown;border-radius: 50%;position: absolute;top: -4px;left: -4px;border-color: @brown transparent @brown @brown;transition: all 1s ease-in-out;}&:hover div:nth-child(2){transform: rotate(360deg);}&:hover div:nth-child(3){transform: rotate(-360deg);}}div h3,div span,button {color: @brown;font-size: 14px;}div:nth-child(2){display: flex;flex-direction: column;align-items: center;span {font-size: 2px;transform: scale(0.8);font-weight: 300;}}div:last-child {display: flex;flex-direction: column;button {width: 105px;height: 22px;border-radius: 20px;border: 1px solid @brown;background-color: transparent;font-weight: 600;margin-bottom: 10px;font-size: 2px;&:hover {background-color: @brown;color: #fff;cursor: pointer;}}button:last-child {margin: 0;}}}.right {width: 110px;height: 100%;display: flex;flex-direction: column;border-radius:  0 3px 3px 0;div:first-child {border-radius: 0 3px 0 0;}div {background-color: #f5e8df;flex: 1;margin-bottom: 2px;display: flex;flex-direction: column;justify-content: center;align-items: center;&:hover {background-color:rgb(225,207,194);cursor: pointer;}h3{font-size: 16px;color: @brown;}span {font-weight: 300;font-size: 2px;transform: scale(0.8);color: @brown;}}div:last-child {margin: 0;border-radius: 0 0 3px 0;}}}
}

当然，本挑战鼠标移动到头像上边框会进行旋转，今天就不录屏啦！