CSS 形状的边框
Border for css shapes
我发现了css形状,我很感兴趣有没有办法为它们(形状)制作边框(实心,虚线,虚线)?
我做的第一件事是制作另一个形状并通过 z-index (http://jsfiddle.net/gYKSd/) 将其放在背景上,但它只能作为实心边框产生效果。
.HTML:
<div class="triangle"></div>
<div class="background"></div>
.CSS:
.triangle {
position: absolute;
top: 14px;
left: 10px;
height: 0px;
width: 0px;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 100px solid red;
z-index: 0;
}
.background {
position: absolute;
top: 0;
left: 0;
height: 0px;
width: 0px;
border-right: 60px dotted transparent;
border-left: 60px dotted transparent;
border-bottom: 120px dotted gray;
z-index: -1;
}
您的解决方案(定位背景div)是您在 CSS 中获得的最可行的方式,因为浏览器无法将形状识别为形状。
你可以拿一个正方形,制作副本并旋转它们来制作点爆发,它看起来像一个点爆发,但就浏览器而言,你有 3 个正方形,而不是点爆发,如果你放一个边框,边框将围绕每个正方形。
您可以制作小矩形,旋转它们并将它们放置在"形状"的边缘以创建"边框",所以是的,这是可行的,但对于所有实际目的,这很疯狂。
如果您需要即时绘制形状,请查看HTML5画布画布绘图简介。
SVG 现在也是一个有效的选项,因为所有最近的浏览器都支持它。
我认为这
是不可能的,因为您正在做的事情依赖于形状是由边框构成的事实。
不能向已有边框的内容添加边框。
但就像你在小提琴中展示的那样,你可以通过背景形状来模拟另一个边框。
正如上面一些人所说....CSS 形状由实心边框和它们的角度组成,因此您无法更改边框样式,否则将无法生成所需的形状
相关文章:
- 使用CSS将圆移动到边框顶部
- 选定行上的CSS边框转换
- 溢出内容会导致删除边框(CSS和AngularJS)
- Firefox中的CSS圆角边框
- 使用Javascript为输入字段添加边框样式颜色(提交时没有值),该字段已经在css中带有!important标签的边
- CSS 形状的边框
- CSS:悬停时动画边框
- 检查对象是否在 css 边框/css 包装器内
- CSS 导航链接样式:删除其他元素的样式,并在将鼠标悬停在选定元素上时删除双边框
- 使用 CSS 创建倾斜边框
- 用于IE8的弯曲边框CSS
- 在右上角和左下角使用css的半边框
- HTML、CSS和Javascript非常酷的边框旋转发光效果
- CSS中没有背景重叠的部分边框
- 菜单边框,当前菜单边框css
- CSS在类切换中添加-删除边框
- CSS不适用于IE-边框样式更改
- CSS/Javascript创建带边框底部的输入
- 如何使用鼠标悬停改变css形状(圆圈)的边框颜色
- 在jQuery中添加和移除悬停的CSS边框