如何在CSS中创建边框角间距
哈马德·玛雅
如何使用CSS创建边框角间距，如下图所示？内容的高度不固定。
哈里
使用 border-image：
我们可以利用border-image来分配alinear-gradient作为所有四个侧面的边框图像。我们将需要一个伪元素（与父容器重叠），因为渐变只能在一个方向上进行。渐变可以支持基于百分比的值，因此可以适应不同的容器尺寸。可以将鼠标悬停在div代码段中的上进行验证。
这种方法的主要缺点是该border-image属性对浏览器的支持较低。但是，当只需要支持IE11 +时，它就非常有用，因为box-shadow它不需要固定的尺寸，不像它那么复杂，clip-path并且还为其他潜在用途保留了备用的伪元素。
.border-spacing{
position: relative;
height: 100px;
width: 300px;
padding: 10px;
background: rgb(187, 103, 224);
background-clip: content-box;
border-image: linear-gradient(to bottom, transparent 25%, black 15%, black 75%, transparent 75%);
border-image-slice: 4;
border-image-width: 4px;
border-image-repeat: round;
/* Just for demo */
text-align: center;
line-height: 100px;
color: white;
}
.border-spacing:after{
position: absolute;
content: '';
top: -2px; /* half of border-image-slice */
left: -2px; /* half of border-image-slice */
height: calc(100% - 20px); /* 100% - 2 * padding */
width: calc(100% - 20px); /* 100% - 2 * padding */
padding: 10px;
border-image: linear-gradient(to right, transparent 25%, black 15%, black 75%, transparent 75%);
border-image-slice: 4;
border-image-width: 4px;
border-image-repeat: round;
}
/* Just for demo */
.border-spacing{
transition: all 1s;
}
.border-spacing:hover{
height: 150px;
width: 450px;
line-height: 150px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border-spacing">Content div</div>使用 background-image：
我们可以利用background-image来指定alinear-gradient作为所有四个侧面的边框图像。我们将需要一个伪元素（与父容器重叠），因为渐变只能在一个方向上进行。渐变可以支持基于百分比的值，因此可以适应不同的容器尺寸。可以将鼠标悬停在div代码段中的上进行验证。
在linear-gradient仅IE10 +支持的意义上，这种方法的缺点也与以前的方法非常相似。优点与前面提到的相同。
.border-spacing{
position: relative;
height: 100px;
width: 300px;
padding: 10px;
background-image: linear-gradient(to bottom, transparent 25%, black 15%, black 75%, transparent 75%), linear-gradient(to bottom, transparent 25%, black 15%, black 75%, transparent 75%), linear-gradient(to right, transparent 25%, black 15%, black 75%, transparent 75%), linear-gradient(to right, transparent 25%, black 15%, black 75%, transparent 75%);
background-size: 4px 100%, 4px 100%, 100% 4px, 100% 4px;
background-position: 0px 0px, 100% 0px, 0px 0px, 0px 100%;
background-repeat: no-repeat;
/* Just for demo */
text-align: center;
line-height: 100px;
color: white;
}
.border-spacing:after{
position: absolute;
content: '';
top: 10px;
left: 10px;
height: calc(100% - 20px);
width: calc(100% - 20px);
z-index: -1;
background: rgb(187, 103, 224);
}
/* Just for demo */
.border-spacing{
transition: all 1s;
}
.border-spacing:hover{
height: 150px;
width: 450px;
line-height: 150px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="border-spacing">Content div</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Android Studio Kotlin：提取为常量
- 2
IE 11中的FormData未定义
- 3
计算数据帧R中的字符串频率
- 4
如何在R中转置数据
- 5
如何使用Redux-Toolkit重置Redux Store
- 6
Excel 2016图表将增长与4个参数进行比较
- 7
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 8
未捕获的SyntaxError：带有Ajax帖子的意外令牌u
- 9
OpenCv：改变 putText() 的位置
- 10
ActiveModelSerializer仅显示关联的ID
- 11
算术中的c ++常量类型转换
- 12
如何开始为Ubuntu开发
- 13
将加号/减号添加到jQuery菜单
- 14
去噪自动编码器和常规自动编码器有什么区别？
- 15
获取并汇总所有关联的数据
- 16
OpenGL纹理格式的颜色错误
- 17
在 React Native Expo 中使用 react-redux 更改另一个键的值
- 18
http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。
- 19
TreeMap中的自定义排序
- 20
Redux动作正常，但减速器无效
- 21
如何对treeView的子节点进行排序
我来说两句