边框案例
.box1{
width: 0px;
height: 0px;
border: green solid 100px;
border-color: blue pink purple cadetblue;
}
用边框实现三角形的规律: 盒子大小宽高为0。
最后页面呈现的画面是这样的:
接下里我们做另外一种案例效果
.box2{
width: 100px;
height: 100px;
border: 100px solid palevioletred;
border-color: blue pink purple cadetblue;
这就是我要说的只是在宽高上做了改变,最后变成了梯形 。
那么如果我专门就出一个三角或者梯形该怎么做呢,如下
.box3{
width: 100px;
height: 100px;
border: 100px solid greenyellow;
border-top: none;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
这边我想要一个下方的三角形,所以我隐藏了对边,然后设置左右两边为透明色。
然后是三角形
.box4{
width: 0px;
height: 0px;
border: 100px solid purple;
border-right: none;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
}
一定注意盒子的宽高
围绕内容和内填充的曲线
1.border-width:边框的宽度单位:像素注意:只写一个border-width设置不上边框的宽的,得写上边框的线型2.border-style:边框的线型1.solid 单实线2.double 双实线3.dashed 条状虚线4.dotted 点状边框5.none 没有边框3.border-color:边框的颜色1.关键词2.十六进制色值3.rgb()4.rgba()默认边框的颜色为元素本身的前景色4.复合写法例子:border-color: pink; 一个值:四个边框border-color: pink gold; 两个值:上下边框 左右边框border-color: pink gold greenyellow; 三个值:上边框 左右边框 下边框border-color: pink gold greenyellow purple;上边框 右边框 下边框 左边框(顺时针方向)border-width和border-style同样效果5.单独设置例子:/* 上边框 */border-top-width: 50px;border-top-style: solid;border-top-color: yellow;/* 下边框 */border-bottom-width: 50px;border-bottom-style: dashed;border-bottom-color: brown;单边框复合写法:border-left: 50px solid cyan;边框的宽度 边框的线型 边框的颜色6.边框的复合写法border:边框的宽度 边框的线型 边框的颜色border: 100px solid purple;7.去掉边框border:0;border:none;