css之边框

最新推荐文章于 2025-05-16 17:04:32 发布

Embrace__

最新推荐文章于 2025-05-16 17:04:32 发布

阅读量210

点赞数

CC 4.0 BY-SA版权

文章标签： css之边框

本文链接：https://blog.youkuaiyun.com/Embrace__/article/details/97692353

什么是边框？

边框就是环绕在标签宽度和高度周围的线条

边框的属性格式
连写（同时设置四条边的边框）
border: 边框的宽度边框的样式边框的颜色
连写（分别设置四条边的边框）

	border-top: 边框的宽度 边框的样式 边框的颜色;
	border-right: 边框的宽度 边框的样式 边框的颜色
	border-bottom: 边框的宽度 边框的样式 边框的颜色
	border-left: 边框的宽度 边框的样式 边框的颜色;

我们可以用css边框实现各种图形

1）梯形

div{
    width:100px;
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
    border-bottom:100px solid orange;
    border-left:100px dashed transparent;
    border-right:100px dashed transparent;
}

2）三角形

/*等腰三角形*/
div{
    width:0;
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
    border-bottom:100px solid orange;
    border-left:100px dashed transparent;
    border-right:100px dashed transparent;
}

/*直角三角形*/
div{
    width:0;
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
    border-bottom:100px solid orange;
    border-left:100px dashed transparent;
}

3）对话框

.box{
    width:300px;
    padding:30px 20px;
    border:5px solid #beceeb;
    position:relative;
}
.box:after,.box:before{
    content:'';
    width:0;
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
    position:absolute;
}
.box:after{
    border-top:20px solid #beceeb;
    border-left:20px dashed transparent;
    border-right:20px dashed transparent;
    left:80px;
    bottom:-20px;
    z-index:1;
}
.box:before{
    border-top:20px solid #ffffff;
    border-left:20px dashed transparent;
    border-right:20px dashed transparent;
    left:80px;
    bottom:-13px;
    z-index:2;
}