浅谈前端CSS中的一个硬核属性-border
前言
了解过前端的都知道,html 所有的标签都离不开border属性,Border,顾名思义,边框,给标签加个边框,就像我们生活中的窗户框子,Border除了可以设置标签的边框之外,还有很多隐藏的特殊功能,比如,可以'画'个图,可以达到和canvas一样的效果。
一、使用border画出一个太极八卦图
1.效果图如下
像这样的八卦图,除了可以使canvas画出来,我们强大的CSS的border属性也可以实现,在这里我们使用的是border的小儿子属性 border-radius ,该属性的作用的为元素添加圆角边框!
语法 :border-radius: 1-4 length|% / 1-4 length|%;
border-radius:2px;
等价于:
border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;
按此顺序设置每个 radius的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。
2.实现思路图解
3.废话不多说,直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.container{
margin: 10% 10%;
}
.tj{
width: 800px;
height: 600px;
}
.tj-left{
float: left;
width: 200px;
height:400px;
border: 1px solid #000000;
box-sizing: border-box;
border-radius:200px 0 0 200px ;
border-left: 1px solid #fff;
background-color: #F5F5F5;
position: relative;
}
.tj-right{
float: left;
width: 200px;
height: 400px;
box-sizing: border-box;
border: 1px solid #000000;
border-radius:0 200px 200px 0;
background-color: #000000;
p