CSS虛線和斜線邊框

我發現了幾篇關於如何確定邊框的文章，但我試圖做的是有點不同。CSS虛線和斜線邊框

我有虛線邊框的元素，像這樣：

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

不過，我試圖同時擁有.box的元素及其虛線邊框的邊角成45度角。

這可能嗎？

來源

2011-07-04 gjunkie

所以你想「邊緣」而不是破折號？或者你想整個盒子（和邊框）旋轉45度？ –

我希望整個邊界都是虛線，但是每個角都要成45度角，包括虛線。 – gjunkie

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

來源

2011-07-04 22:08:16 AlienWebguy

沒錯，儘管這不會達到完全的直線。 – gjunkie

是否有一個原因，爲什麼你會不想與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中工作，要獲得最大的認可。

來源

2011-07-05 00:26:50 Kate

感謝您的幫助。我想這樣做的原因是因爲我試圖用虛線在博客文章周圍有一個包裹元素，並且在它下面有一個看起來像這樣的選項卡。如果我用圖像製作破折號，那麼匹配CSS生成的破折號將會更困難。 – gjunkie

CSS虛線和斜線邊框

回答

相關問題