1

伙计们，我确实有两个非常简单的 CSS 做同样的事情（创建一个三角形），我需要你的建议，哪个更好。

示例 1

.leftArrow { 
    border-right: 5px solid #000;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    height:0px;
    width: 0px;
}

在上面的示例中，我试图分别为右、下和上定义边框。现在的问题是如果我确实需要将边框从 5px 更改为 10px。我需要在 3 声明中进行更改。

因此，每次在 3 声明中进行一次更改都是不好的。假设我确实有所有（四个）方向的箭头。在那种情况下，我确实需要更改 4 X 3 = 12 声明。

这非常耗时:(

示例 2

.leftArrow { 
    border: 5px solid transparent;
    border-left-width: 0px;
    border-right-color: #000;
    height:0px;
    width: 0px;
}

在第二个示例中，我在第一个声明“border: 5px solid transparent;”中定义了边框或所有边。在第二个声明中，我将左边框宽度从 5px 替换为 0px。并在第三个声明中将右边框颜色从透明更改为黑色。

现在在我的开场白中，在第一个声明中定义边框宽度然后在第二个声明中更改它也不是一个好主意。

第三次声明的情况相同。我正在将边框颜色从透明更改为黑色。

请给我你对这种情况的意见，或者如果你有更好的主意:)

4

5 回答 5

2

使用带有变量的http://sass-lang.com/ 。

于 2012-04-18T13:54:50.907 回答
1

如果我理解你的话，你的问题是，你不想一遍又一遍地改变同样的事情？那么Less CSS可能适合你，它还允许你嵌套你的 CSS，最好的事情是，你可以将 Less CSS 编译为“真正的”CSS 或者包含less.js并且你不必编译它（但是我推荐第一个，所以它也适用于禁用 JS 的浏览器）。

于 2012-04-18T13:58:01.340 回答
1

我会这样做：

border: 5px solid #000;           /* Set base style */
border-width: 5px 5px 5px 0px;    /* All 5px except left */
border-color: #000 transparent    /* Top/bottom #000, left/right transparent */
height: 0px;
width: 0px;

第一行设置了一个“基本”样式，它被接下来的两个border-属性覆盖。您可以使用border-width和border-color为元素的四个边设置不同的颜色和宽度。

上面的border-color属性将左边的颜色设置为透明，但是因为左边border-width是0，所以没有任何效果。

为了使事情更容易改变，这样做：

border: 5px solid #000;           /* Set base style */
border-left: none;                /* Get rid of left border */
border-color: #000 transparent    /* Top/bottom #000, left/right transparent */
height: 0px;
width: 0px;

现在您只需要更改第一个border属性。border-left: none负责确保左边框永远不会显示。你不必改变

这几乎和 LESS 或替代品一样简单，并且坚持纯 CSS。

于 2012-04-18T13:59:38.100 回答
1

我无法想象你正在尝试做什么，但如果我理解正确，你可以做这样的事情来减少代码重写：

定义常用箭头属性

.arrow {
    border: 5px solid;
    color: #000;
    height: 0px;
    width: 0px;
}

然后在需要的地方关闭边框

仅在左箭头上显示左边框和下边框

.arrow.left {
    border-right-color: transparent; 
    border-top-color: transparent;
}

这样您就可以在 .arrow 块中保留基本样式。

于 2012-04-18T14:07:24.847 回答
1

我会这样做：

<div class="arrow arrow-left"></div>

.arrow {
    border:5px solid #000;
    width:0;
    height:0;
}
.arrow-left {
    border-left:0;
    border-bottom-color:transparent;
    border-top-color:transparent;
}

http://jsfiddle.net/pdRYE/15/

在这种情况下，您只有一个边框宽度声明，并且您使用第二个类只是为了隐藏您不需要的边框。

于 2012-04-18T14:11:24.453 回答