大佬教程收集整理的这篇文章主要介绍了css – 如何绘制具有不同边框宽度的偶数表边框?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
为此,我生成的代码大致如下:
#crossword { border-spacing: 0px; border-collapse:collapse; } .word { vertical-align: middle; align-items: center; text-align: center; justify-content: center; margin: 0; padding: 0; } .cell { width: 30px; height: 30px; margin: 0; padding: 0; } .letter { border: 1px solid black; } .keyword { border-width: 2px; BACkground-color: gray; }
<table id="crossword"> <tr class="word"> <td class="cell letter">W</td> <td class="cell letter keyword">C</td> <td class="cell letter">A</td> </tr> </table>
我的问题是图像中的红色椭圆标记 – 关键字的边框,比其余部分宽1px,打破了填字游戏的顶部和底部线条.我尝试删除border-collapse属性,但这导致每个行连接上出现双边框.
目前我使用table,tr和td进行生成,但是如果有使用div的解决方案,我会很乐意切换.
所以我的问题是:假设我能够唯一地处理每个单元格(包括向它们添加特殊类等),如何使顶部和底部边框出现在关键字单元格内而不是外部?
我找到了一个使用box-shadow的解决方案,但它并不是真正的跨浏览器,并且涉及很多魔法,所以如果可能的话我宁愿避免使用它.
table#crossword tr:first-child td { border-top: 1px solid black; } table#crossword tr:last-child td { border-bottom: 1px solid black; } table#crossword tr td:first-child { border-left: 1px solid black; } table#crossword tr td:last-child { border-right: 1px solid black; }
它看起来有点低,但除此之外没有其他选项可以使最外边框均匀对齐
演示
#crossword { border-spacing: 0px; border-collapse:collapse; } .word { vertical-align: middle; align-items: center; text-align: center; justify-content: center; margin: 0; padding: 0; } .cell { width: 30px; height: 30px; margin: 0; padding: 0; } .letter { border: 1px solid black; } .keyword { border-width: 2px; BACkground-color: gray; } table#crossword tr:first-child td { border-top: 1px solid black; } table#crossword tr:last-child td { border-bottom: 1px solid black; } table#crossword tr td:first-child { border-left: 1px solid black; }
<table id="crossword"> <tr class="word"> <td class="cell letter">W</td> <td class="cell letter keyword">C</td> <td class="cell letter">A</td> </tr> <tr class="word"> <td class="cell letter">W</td> <td class="cell letter keyword">C</td> <td class="cell letter">A</td> </tr> <tr class="word"> <td class="cell letter">W</td> <td class="cell letter keyword">C</td> <td class="cell letter">A</td> </tr> </table>
以上是大佬教程为你收集整理的css – 如何绘制具有不同边框宽度的偶数表边框?全部内容,希望文章能够帮你解决css – 如何绘制具有不同边框宽度的偶数表边框?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。