【问题标题】:is there a way to make this css style simple有没有办法让这种css风格变得简单
【发布时间】:2011-07-20 04:22:27
【问题描述】:
border-right:1px solid #8fa6b9;
border-bottom:1px solid #8fa6b9;
border-left:1px solid #2b5a82;
border-top:1px solid #2b5a82;

右边和底部一样......

【问题讨论】:

    标签: html css optimization shorthand


    【解决方案1】:
    border       : 1px solid;
    border-color : #2b5a82 #8fa6b9 #8fa6b9 #2b5a82;
    

    【讨论】:

    • 应该是:border-color : #2b5a82 #8fa6b9 #8fa6b9 #2b5a82; 从上往下顺时针方向。
    • cwolves,你的回答太棒了。
    【解决方案2】:
    border: 1px solid #8fa6b9;
    border-left-color: #2b5a82;
    border-right-color: #2b5a82;
    

    试试这个,这个更有意义。

    【讨论】:

    • 我不确定“更有意义”。它确实有效,并且对于 CSS 新手来说可能更容易阅读,但是一旦你理解了它,习惯了“上、右、下、左”的语法是有用且易于阅读的。
    • 我知道它有点冗长。但我说它很有意义,因为它确实可以帮助初学者快速掌握 css 知识。 :P 感谢您的支持。
    【解决方案3】:

    设置顺时针方向。所以第一个数字在上,第二个在右,第三个在下,第四个数字是左边框。

    【讨论】:

      【解决方案4】:

      边框:1px 实心#8fa6b9;

      边框左色:#2b5a82;

      边框顶部颜色:#2b5a82;

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-08-13
        • 2021-10-13
        • 2022-11-03
        相关资源
        最近更新 更多