时间:2021-04-16
html代码:
<body>
<h1 style="color: red">css实现矩形边角加粗</h1>
<div class="main">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
css代码:
body{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.main{
position: relative;
width: 400px;
height: 200px;
border: 1px solid red;
}
.main span:nth-child(1){
position: absolute;
left: -5px;
top: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 5px 0 0 5px;
}
.main span:nth-child(2){
position: absolute;
right: -5px;
top: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 5px 5px 0 0;
}
.main span:nth-child(3){
position: absolute;
right: -5px;
bottom: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 0 5px 5px 0;
}
.main span:nth-child(4){
position: absolute;
left: -5px;
bottom: -5px;
padding: 15px;
border-style: solid;
border-color: rebeccapurple;
border-width: 0 0 5px 5px;
}
原理很简单,只要弄清position:relative,border和left,top之间的关系就可以了。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1、工具/原料htmlcss2、具体实现效果图html代码css实现矩形边角加粗css代码body{display:flex;justify-content:c
问题:如何通过div+css以及定位来实现圆角矩形?解决方法概述:内容:首先在标签内部里添加一个大层(大层用来固定整体大框架),然后大层内包含四个小层(四个小层
本文实例为大家分享了js拖拽实现图形伸缩效果的具体代码,供大家参考,具体内容如下点击矩形的四个角和四个边实现不同的效果Document*{padding:0;m
有三种方法可以实现CSS圆角。第一、直接写CSS代码:border-radius例如:border-radius:10px;第二、四个圆角贴图;制作四个圆角的图
准备四个小容器,分别放小圆圈图片的左上、右上、左下、右下四个部分,然后再分别定位到父容器的四个角上。一张图片就能实现圆角?是什么样的图片?怎样实现?其实这张图片