Question

我在CSS中制作了一把轻剑。代码是

＆＃13;

div.handle
{
    height:10px;
    width:100px;
    background-color:black;
    display: inline-block;
    border-radius: 0 4px 4px 0;
    border-spacing: 0;
    border-collapse: collapse;
}
div.sword
{
    height:6px;
    width:400px;
    background-color:white;
    display: inline-block;
    border-radius: 3px;
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: 1px;
    margin-bottom: 1px;
    text-decoration: line-through;
}
div.red
{
    box-shadow: 0 0 10px red;
    border:1px solid red;
}

＆＃13;

<div class = "handle"></div><div class = "sword red strike"></div>

＆＃13;

我想完全穿透光剑。

text-decoration: line-through;属性仅适用于div内的文本，而不适用于div。

我看到Linethrough/strikethrough a whole HTML table row并试了一下。但它没有正常工作。所以我的问题是＆＃34;我如何通过一个空的div＆＃34;使用CSS。

Answer 1

您可以使用div.strike { position: relative; } div.strike:before { content: " "; position: absolute; top: 50%; left: 0; border-bottom: 1px solid #111; width: 100%; }中的border-bottom属性执行类似操作。像这样：

var newWindow = window.open("url");

您只需更改newWindow.onload = function (newWindow) { newWindow.console.log("...something..."); }颜色值的值即可更改颜色。这是linked question。

Answer 2

我想你只想在下面这张图片中使用像这样的光剑吗？

我正在考虑采用不使用删除线的方法。然后我意识到你可以使用linear-gradient代替。当然，你可以改善它的对齐/颜色。

我在下面的代码示例中添加了以下两行

/* added these 2 lines */
background: #FF0000;
background: linear-gradient(to bottom,  #ff0000 0%,#ffdddd 50%,#ff0000 99%);

这使您可以在不使用穿透的情况下获得红色→白色→红色效果。结果，你会得到一把漂亮的红色军刀。

＆＃13;

div.handle
{
    height:10px;
    width:100px;
    background-color:black;
    display: inline-block;
    border-radius: 0 4px 4px 0;
    border-spacing: 0;
    border-collapse: collapse;
}
div.sword
{
    height:6px;
    width:400px;

    /* added these 2 lines */
    background: #FF0000;
    background: linear-gradient(to bottom,  #ff0000 0%,#ffdddd 50%,#ff0000 99%);

    display: inline-block;
    border-radius: 3px;
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: 1px;
    margin-bottom: 1px;
    text-decoration: line-through;
}
div.red
{
    box-shadow: 0 0 10px red;
    border:1px solid red;
}

＆＃13;

<div class = "handle"></div><div class = "sword red strike"></div>

＆＃13;

Answer 3

将:after css元素添加到div.sword，这将是您想要的行。 text-decoration仅用于装饰......嗯......文字： - ）

div.handle
{
    height:10px;
    width:100px;
    background-color:black;
    display: inline-block;
    border-radius: 0 4px 4px 0;
    border-spacing: 0;
    border-collapse: collapse;
}
div.sword
{
    height:6px;
    width:400px;
    background-color:white;
    display: inline-block;
    border-radius: 3px;
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: 1px;
    margin-bottom: 1px;
    text-decoration: line-through;
    position: relative;
}
div.sword:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 40%;
    background-color: black;
}
div.red
{
    box-shadow: 0 0 10px red;
    border:1px solid red;
}

<div class = "handle"></div><div class = "sword red strike"></div>

Answer 4

另一个可能性是添加一个带渐变的背景

您还可以为其设置动画

background: linear-gradient(white 2px, black 2px, black 4px, white 4px);

＆＃13;

div.handle
{
    height:10px;
    width:100px;
    background-color:black;
    display: inline-block;
    border-radius: 0 4px 4px 0;
    border-spacing: 0;
    border-collapse: collapse;
}
div.sword
{
    height:6px;
    width:400px;
    display: inline-block;
    border-radius: 3px;
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: 1px;
    margin-bottom: 1px;
    text-decoration: line-through;
    background: linear-gradient(to right, red 25%, white 50%, grey 75%, black 100%);
    background-size: 400% 2px;
    background-repeat: no-repeat;
    background-position: 0% 2px;
    animation: pulse 300ms infinite;
}

@keyframes pulse {
    from {background-position: 0% 2px;}
    to {background-position: 100% 2px;}
}
div.red
{
    box-shadow: 0 0 10px red;
    border:1px solid red;
}

＆＃13;

<div class = "handle"></div><div class = "sword red strike"></div>

＆＃13;

如何删除空div

4 个答案: