开发工具与关键技术：DW border属性
作者：梁茵茵
撰写时间：2019年1月31日
哈哈，直奔主题不多说废话，先看看效果图吧！
是不是好可爱，有没有被萌到？
首先，我们来看一下 HTML 的头部结构布局：css3的样式大部分都是利用边框border的属性来实现的。在盒子上给一个边框设置一下圆角的效果，把不想要的边设置为透明的颜色，就可以出现一个半圆的效果。下面我们来看一下代码和效果图这样方便理解：
这下面就是整个头部的代码和效果图：
@charset "utf-8";
/* CSS Document */
/*---------------------头部------------------*/
.content{
width: 350px;
margin: 0 auto;
}
.phiz{
width: 283px;
height: 215px;
border: solid 3px #4F3131;
border-radius: 100px;
border-top-color: transparent;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.sbowknot{
width: 283px;
height: 126px;
}
.right,.left{
width: 50px;
height: 50px;
border: solid 3px #4F3131;
border-radius: 10px;
border-bottom-color: transparent;
margin-top: 10px;
}
.right{
border-right-color: transparent;
margin-left: 10px;
transform: rotate(13deg);
}
.left{
border-left-color: transparent;
margin-right: 10px;
transform: rotate(-13deg);
}
.thread{
width: 157px;
height: 120px;
border: solid 3px #4F3131;
border-radius: 100px;
border-bottom-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
margin-left: -25px;
margin-top: 0px;
}
.bowknot{
width: 90px;
height: 40px;
transform: rotate(31deg);
margin-left: -33px;
display: flex;
justify-content: space-between;
}
.rcircle,.lcircle{
width: 50px;
height: 37px;
border: solid 3px #4F3131;
border-radius: 25px;
}
.rcircle{
border-right-color: transparent;
margin-right: -15px;
}
.lcircle{
border-left-color: transparent;
margin-left: -15px;
}
.srcircle,.slcircle{
width: 22px;
height: 25px;
border: solid 3px #4F3131;
border-radius: 25px;
margin-top: 4px;
}
.srcircle{
border-right-color: transparent;
margin-left: 13px;
}
.slcircle{
border-left-color: transparent;
margin-left: 5px;
}
.circle{
width: 22px;
height: 25px;
border-radius: 50%;
margin: 0 auto;
border: solid 3px #4F3131;
margin-top: 5px;
}
.eye{
width: 181px;
height: 76px;
margin-top: 119px;
margin-left: 2px;
}
.reye{
width: 181px;
height: 20px;
margin-top: -66px;
display: flex;
justify-content: space-between;
}
.reye i{
width: 20px;
height: 30px;
display: block;
background: #4F3131;
border-radius: 50%;
}
.nose{
width: 27px;
height: 17px;
border: solid 3px #4F3131;
border-radius: 50%;
margin: 0 auto;
}
.beard{
width: 200px;
height: 50px;
display: flex;
justify-content: space-between;
}
.rbeard,.lbeard{
width: 50px;
height: 50px;
margin-top: -31px;
display: flex;
justify-content: space-between;
}
.rbeard{
margin-left: -77px;
}
.lbeard{
margin-right: -55px;
}
.rbeard i:first-child,.lbeard i:first-child{
height: 50px;
margin-top: -15px;
border:1px solid black;
}
.rbeard i:first-child{
margin-left: 19px;
transform:rotate(105deg);
}
.lbeard i:first-child{
margin-left: 29px;
transform:rotate(-105deg);
}
.rbeard i:nth-child(2),.lbeard i:nth-child(2){
height: 50px;
margin-top: 2px;
border:1px solid black;
}
.rbeard i:nth-child(2){
margin-left: -6px;
transform:rotate(86deg);
}
.lbeard i:nth-child(2){
margin-right: -4px;
transform:rotate(-86deg);
}
.rbeard i:last-child,.lbeard i:last-child{
height: 50px;
margin-top: 17px;
border:1px solid black;
}
.rbeard i:last-child{
margin-right: 27px;
transform:rotate(67deg);
}
.lbeard i:last-child{
margin-right: 30px;
transform:rotate(-70deg);
}
身体部分也是同样的原理
/*---------------------身体部分------------------*/
.foot{
width: 180px;
height: 200px;
margin: 0 auto;
margin-top: -31px;
display: flex;
}
.rfoot,.lfoot{
width: 90px;
height: 200px;
border: solid 3px #4F3131;
border-top-color: transparent;
}
.rfoot{
border-bottom-right-radius: 60px;
border-top-left-radius: 180px;
border-bottom-left-radius: 125px;
border-right-color: transparent;
}
.lfoot{
border-bottom-left-radius: 60px;
border-top-right-radius: 180px;
border-bottom-right-radius: 125px;
border-left-color: transparent;
}
.neck{
width: 70px;
height: 36px;
border: solid 3px #4F3131;
margin: 0 auto;
border-radius: 50%;
border-top-color: transparent;
margin-top: -180px;
}
.shoe,.sock,.rsock,.lsock{
margin: 0 auto;
background: #4F3131;
}
.shoe{
width: 177px;
height: 3px;
margin-top: 90px;
}
.sock{
width: 3px;
height: 37px;
margin-top: -2px;
}
.rsock{
width: 19px;
height: 3px;
margin-top: 3px;
margin-left: 158px;
transform: rotate(-40deg);
}
.lsock{
width: 19px;
height: 3px;
margin-top: -3px;
margin-left: 174px;
transform: rotate(40deg);
}
.hand{
width: 350px;
height: 140px;
margin-top: -152px;
display: flex;
justify-content: space-between;
}
.rhand,.lhand{
width: 90px;
height: 74px;
border: solid 3px #4F3131;
border-bottom-color: transparent;
}
.rhand{
border-top-left-radius: 67px;
border-bottom-left-radius: 125px;
border-right-color: transparent;
transform: rotate(-47deg);
margin-left: 44px;
}
.rhand p,.lhand p{
width: 39px;
height: 3px;
background: #4F3131;
margin-top: 14px;
}
.rhand p{
transform: rotate(44deg);
margin-left: 10px;
}
.lhand{
border-top-right-radius: 67px;
border-bottom-right-radius: 125px;
border-left-color: transparent;
transform: rotate(47deg);
margin-right: 44px;
}
.lhand p{
transform: rotate(-47deg);
margin-left: 41px;
}
以上就是整个凯蒂猫的全部代码，你们也可以根据自己的兴趣爱好添加背景颜色这样的效果会更好。