元素周围的局部圆形边框
普里姆斯
哈利
是的，这可以通过左下角的插图box-shadow和a的组合来实现border-radius。
的border-radius底部左侧产生弯曲的底侧和插图box-shadow产生的着色区域。底边的曲率（内侧和外侧）可以通过调整border-radius父容器上的增大/减小。
.bordered {
position: relative;
width: 300px;
height: 75px;
padding-left: 25px;
background: transparent;
border-bottom-left-radius: 40px;
box-shadow: inset 100px -15px 0px darkorange;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
}
.bottom-right {
position: absolute;
right: 10px;
bottom: 2px;
color: black;
font-size: 11px;
}
/* just for demo */
body {
background: black;
}<div class="bordered"><span>Schematic</span>
<span class="bottom-right">1234567890</span>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
元素周围的局部圆形边框
- 2
透明背景上的图标和元素周围的局部边框
- 3
在文字周围制作圆形边框
- 4
Android圆形图像周围的圆形边框
- 5
<div>元素周围的边框
- 6
圆形CALayer周围的边框较暗
- 7
Flutter：-在图标周围创建圆形边框
- 8
制作圆形边框，在文本后面 - 不在周围
- 9
圆形边框在圆形图像周围的各个部分中分开
- 10
元素周围的html动态边框
- 11
如何在Android的圆形ImageView周围绘制边框？
- 12
如何使用引导程序在div周围创建圆形边框？
- 13
如何在社交图标周围制作圆形边框？
- 14
可以在圆形图标字体周围绘制css边框吗？
- 15
在 JPanel 中的每个元素周围添加边框
- 16
在带有文本的元素周围添加边框
- 17
元素周围的虚线边框，左侧边框的顶部偏斜/倾斜
- 18
如何使汉堡包菜单更小，并在其周围形成完美的圆形边框？
- 19
libgdx：如何在具有动态尺寸的TiledMap周围绘制圆形边框？
- 20
如何使图像按钮圆形并在圆圈内，将显示图像并在图像周围有边框
- 21
一组元素周围的边框向左浮动？
- 22
html元素隐藏已创建的弯曲边框周围的方框
- 23
单击时删除元素周围出现的蓝色边框
- 24
我页面周围的边框阻止元素悬停工作
- 25
Vaadin Valo主题：删除焦点元素周围的边框
- 26
在悬停上添加边框会移动周围的元素
- 27
Chrome和Firefox中仪表元素周围的边框
- 28
如何在<div>元素周围创建凹形边框？
- 29
是否有可能在svg元素的圆形元素周围包裹锚标签？
我来说两句