CSS 虛線和斜角邊框

Question

我發現了幾篇關於如何傾斜邊界的文章，但我想做的有點不同。

我有一個帶有虛線邊框的元素，如下所示：

.box { border: 1px dashed #fff; }

但是，我試圖同時讓 .box 元素的角及其虛線邊框呈 45 度角。

這可能嗎？

Answer 1

您可以通過調整邊界半徑的貝塞爾曲線獲得一些接近 45 度的角度： http://www.css3.info/preview/rounded-border/

Answer 2

您是否有理由不想使用 2 個背景元素來執行此操作？

.box {
    /* this background image will stick to the top of the box */
    background: url(/* you would put a 10px high image that is the width of said box */) no-repeat left top; 
    display: block;
    padding: 10px 0 0; /* this padding element needs to match the background height */
}
    .box .inner {
        /* this will stick the background image to the bottom, and grow with the natural height of the box */
        background: url(/* you'd put a looong background image, that could stretch vertically */) no-repeat left bottom; 
        display: block;
        padding: 0 10px 10px;
    }

您的標記將如下所示：

<div class="box">
    <div class="inner">
        ...Content goes here...
    </div>
</div>

如果您只想使用border樣式，我可以理解，但老實說，我不知道如何做直角並使其在 IE 中工作。