零基础教你学前端——70-CSS边框综合案例

打开css文件，定义#square选择器，声明样式：width:150px,height:150px,border-top:50pxsolidred,border-right:50pxsolidyellow,border-bottom:50pxsolidblue,border-left:50pxsolidgreen.在浏览器中查看效果，我们发现在每条边的交界处，边框各占一半。打开浏览器开发者工具，在Elements选项卡下，将鼠标滑到div元素上，我们发现这个元素显示的宽高都是250。在CSS中，给div设置的宽度是150，再加上twoborders恰好是250。因此可以断定，样式中为元素设置的宽高不包括元素边框的宽高，而只包括元素内容的宽高。如果div在不改变边框宽度的情况下将内容区域缩小到内容消失，这就是我们想要的效果。要实现这个效果，只需将div中样式的宽高属性设置为0即可，大家看看，效果实现了！以此为基础，三角形的实现也很容易。添加另一个div元素并定义等于triangle的id属性。再次声明一个#triangle选择器，复制正方形的样式代码，保持上边框样式不变，其他边的颜色设置为透明。这样，三角形就做好了。当然这三行代码可以简化为border:50pxsolidtransparent。咦，三角形怎么不见了？原来是后一种风格把所有的边框都设置成了透明的，覆盖了上面的风格。我们只需要颠倒他们的顺序。此时对于上边框，重新定义样式，覆盖上面定义的上边框样式。三角形又出现了！如何实现这个梯形？其实并不难。添加另一个div元素并定义等于梯形的id属性。再次声明一个#trapezium选择器，再次复制正方形的样式代码，注释掉顶边样式，设置左边框颜色为透明，右边框颜色设置为蓝色。大功告成，梯形就做好了！增加难度，做出风车效果。分析一下，这个风车其实是由四个三角形组成的。创建另一个div并定义等于windmills的属性id。在这个div中写emmet命令：div中的bracketclass等于box$乘以4（div[class=box$]*4），回车，创建四个div。定义选择器#windmills，并声明外部div的样式：width:200px,height:200px,border:2pxsolidgray。定义#windmills.box1选择器，声明样式：width:0,height:0,border:50pxsolidtransparent,border-bottom:50pxsolidred。将这组样式复制三次，修改选择器为box2、box3、box4。让我们给四个风车叶片编号。第一个是底部三角形，显示的边框应该是border-bottom。以此类推，第二个是左边的三角形，第三个是右边的三角形，第四个是上面的三角形。显然，还不是风车的效果。仔细观察，四个div各占一行，需要横向排列。定义一个新的选择器#windmillsdiv，并声明四个div的样式：float:left。太神奇了，风车的效果就完成了！浮动的强大功能将在后续课程中详细介绍。这里我们先来了解一下它的作用，容器可以左右排列。回到样式，我们发现这三个句子重复了四次，所以我们可以把它们放在#windmillsdiv的选择器中。代码参考：#square{width:0px;高度：0px；border-top：50px纯红色；右边框：50px纯黄色；border-bottom:50px纯蓝色；border-left:50pxsolidgreen;}#triangle{width:0px;高度：0px；边框：50px实心透明；border-top：50px纯红色；/*border-right:50pxsolidtransparent;border-bottom:50pxsolidtransparent;左边框：50px实心透明；*/}#trapezium{宽度：0px；高度：0px；/*border-top:50px纯红色;*/border-right:50pxsolidblue;border-bottom:50px纯蓝色；border-left:50pxsolidtransparent;}#windmills{width:200px;高度：200px；border:2pxsolidgray;}#windmillsdiv{float:left;宽度：0；高度：0；border:50pxsolidtransparent;}#windmills.box1{border-bottom:50pxsolidred;}#windmills.box2{border-left:50pxsolidred;}#windmills.box3{border-right:50pxsolidred;}#windmills.box4{border-top:50pxsolidred;}文章配视频链接：https://www.bilibili.com/视频...