border的几个用法。
程序员文章站
2022-05-04 10:54:43
...
1.三等分
2.传统的十字添加
3.定义块状元素的高度，边界
4.三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
/*设置出事边距为0*/
}
html,body{
width: 100%;
height: 100%;
}
.con{
width: 100px;
height: 20px;
border-top:60px double;/*高度为20，但是设置60px double
进行三等分，形成20px,20px的空格。*/
border-bottom: 20px solid blue;
}
/*border-hover利用border的默认color属性来设置边框，例如传统的十字添加*/
.add{
width: 100px;
height: 100px;
color:#ccc;
transition: color .25s;/*演示250毫秒*/
border:1px solid;
position: relative;
top:0px;
left: 50%;
}/*做出一个块状元素，正方形*/
.add:before{
content: '';
width: 60px;
border-top: 10px solid;/*利用border边框来画十字*/
position: absolute;/*使其居中，利用position的absolute绝对位置进行判断*/
top:45px;/*向下偏移45像素，加上自身10px下方45px，正好100px*/
left:20px;/*同理*/
}
.add:after{
content: '';
height: 60px;/*高度为60px*/
border-left: 10px solid;
position:absolute;
top: 20px;
left: 45px;
}
/*点击变色*/
.add:hover{
color: blue;
}
.bkp{
height: 400px;/*定义块状元素的高度，边界*/
width: 600px;
background: url(../img/mooc2.png) no-repeat;
border: 1px solid;
/*没有利用position的absolute绝对位置，加上top，left来居中等操作
而是利用background-position的默认属性来确定*/
background-position: 40px 40px;/*默认保持距离左边边框50像素*/
}
.bkright{
height: 400px;/*定义块状元素的高度，边界*/
width: 400px;
background: url(../img/mooc2.png) no-repeat;
/*没有利用position的absolute绝对位置，加上top，left来居中等操作
而是利用background-position的默认属性来确定*/
border-right: 40px solid transparent;
position: absolute;
background-position: 100% 40px;/*默认保持距离左边边框50像素*/
position: absolute;
}
.triangle{
width: 100px;
height: 100px;
border:100px solid;
border-color: red orange blue chartreuse;
margin-left: auto;
margin-right: auto;
}
.triangle2{
width: 0px;
height: 0px;
border:50px solid;
border-color: red red transparent transparent;
margin-left: auto;
margin-right: auto;
}
.triangle3{
width: 300px;
border: 100px solid;
border-color: transparent transparent red;
}
.123{
height: 30px;/*定义块状元素的高度，边界*/
width: 30px;
background: url(../img/mooc2.png) no-repeat;
border: 1px solid;
}
/*增加复选框面积*/
.checkbox{
border:2px solid transparent;/*border透明来增加点击区域*/
box-shadow: insert 0 1px,insert 1px 0,insert -1px 0,insert 0 -1px;
background-color: #fff;
background-clip: content-box;
color:#d0d0d5;
}
</style>
</head>
<body>
<div class="con"></div>
<div class="add"></div>
<div class="bkp"></div>
<div class="bkright"></div>
<div class="triangle">
</div>
<div class="triangle2">
</div>
<div class="triangle3">
</div>
</body>
</html>