首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用CSS擦除边框?

如何使用CSS擦除边框?
EN

Stack Overflow用户
提问于 2014-04-15 08:19:45
回答 6查看 1.4K关注 0票数 17

我试图创建一个只使用HTML/CSS的矩阵效果,我找到的方法是应用实线边框,现在删除顶部和底部的一些部分,有人知道我如何才能只使用CSS创建此效果(如果可能)?

有一张图片可以更好地解释我的目标:

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2014-04-15 08:28:56

一种语义方法是根本不给实际元素一个边框!您可以使用:before:after伪元素作为右侧和左侧的透明框。伪元素被赋予了透明的背景和边框,这些背景和边框不会与创建效果的内容重叠。

这适用于任何背景:http://jsfiddle.net/kkYrP/8/

代码语言:javascript
复制
.box{
    position:relative;
}
.box:before{
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    width: 8%;
    border: 2px solid #333;
    border-right:none;
    z-index:1;
}
.box:after{
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    bottom:-2px;
    width: 8%;
    border: 2px solid #333;
    border-left:none;
    z-index:1;
}

注意:如果您有点击/悬停问题,请尝试在:before:after上添加pointer-events:none;

票数 22
EN

Stack Overflow用户

发布于 2014-04-15 08:42:52

http://jsfiddle.net/kkYrP/5/

给出一个边框-左和右:

代码语言:javascript
复制
.box {
    border-left:2px solid #333;
    border-right:2px solid #333;
}

并添加具有负z索引的伪元素:

代码语言:javascript
复制
.box:before{
    content:"";
    background:#333;
    position:absolute;
    z-index: -1;
    left:-2px;
    width: 20px;
    top:-2px;
    bottom:-2px;
}
.box:after{
    content:"";
    background:#333;
    position:absolute;
    z-index: -1;
    right:-2px;
    width: 20px;
    top:-2px;
    bottom:-2px;
}

这解决了@David的问题,并基于@James的解决方案。

票数 4
EN

Stack Overflow用户

发布于 2014-04-15 16:10:35

扩展James Bruckner的回应,我最近不得不做一些类似的事情,但我必须用大括号。基本上,您将大括号作为内容添加到:after:before中,并对它们进行绝对定位。你可以在下面的链接中看到实现。

http://jsfiddle.net/kaNG2/

你的HTML

代码语言:javascript
复制
<div class="box">This is a test. This is a test. This is a test. This is a test. This is a test. </div>

你的CSS

代码语言:javascript
复制
div {
    padding:3em;
    font-size:1em;
    width:20em;
    position:relative;
}

div:after,
div:before {
    font-size:6.7em;
    color:#999;
    position:absolute;
    top:0;
}

div:before {
    content: "[";
    left:0;
}

div:after {
    right:0;
    content:"]";
}
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23072566

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档