如何將blockquote +引用爲表單fieldset + legend的樣式？

Question

我正在試圖設計一個和cite子元素來複制fieldset和legend元素的外觀，在該元素的外圍有一個邊框，並且圖例標籤位於邊框的頂部 - 如果您的「我看過一個字段，你會明白我的意思。

我有一個解決方案，我給cite一個背景顏色，但這隻會在放在類似的彩色背景上時才起作用。 我需要一個解決方案，將所有的背景，BG圖像等IE8 +

假設下面的標記工作（不能從這個改變沒有額外的元素允許）：

<blockquote class="quote"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi 
     facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam 
     delectus. Reiciendis repellat illo, et natus earum odit! 
     <cite class="attribution">Mr. Jefferson</cite> 
    </blockquote> 

CSS我到目前爲止有：

.quote { 
    border: 4px solid black; 
    padding: 1rem; 
    position: relative; 
} 
.attribution { 
    position: absolute; 
    top: 0; 
    left: 1rem; 
    margin-top: -0.65rem; 
    padding: 0 1rem; 
    background: white; /* this works, but breaks if the background isn't white. I need a solution that works for all possible page bg colors */ 

} 

這是我到目前爲止有：http://jsbin.com/viqegerivi/edit?html,css,output

Answer 1

我不得不承認，我很喜歡日是一個。使用絕對位置:before s和:after s，沒有觸及您的HTML標記，但正如預期的那樣，在CSS上瘋狂使用。乾杯!

fieldset { 
 
    border: 4px solid black; 
 
    padding: 1rem 2rem; 
 
} 
 
legend { 
 
    font-style: italic; 
 
    padding: 0 1rem; 
 
} 
 
.quote { 
 
    border-bottom: 4px solid black; 
 
    padding: 2.6rem calc(2rem + 6px) 1rem; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 0; 
 
} 
 
.quote:before, 
 
.quote:after { 
 
    content: ' '; 
 
    position: absolute; 
 
    width: 4px; 
 
    height: 100%; 
 
    background-color: black; 
 
    bottom: 0; 
 
    top: 1rem; 
 
} 
 
.quote:after { 
 
    left: 0; 
 
} 
 
.quote:before { 
 
    right: 0; 
 
} 
 
.attribution { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    margin-left: 2.4rem; 
 
    margin-top: .35rem; 
 
    padding: 0 1rem; 
 
    background: transparent; 
 
} 
 
.attribution:before, 
 
.attribution:after { 
 
    position: absolute; 
 
    content: ' '; 
 
    bottom: calc(50% - 1px); 
 
    height: 4px; 
 
    background-color: black; 
 
    width: 100vw; 
 
} 
 
.attribution:before { 
 
    right: 100%; 
 
} 
 
.attribution:after { 
 
    left: 100%; 
 
}

<p>Desired Look:</p> 
 
<fieldset> 
 
    <legend>Mr. Jefferson</legend> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam delectus. Reiciendis repellat illo, et natus earum odit! 
 
</fieldset> 
 

 
<p>What I currently have:</p> 
 
<blockquote class="quote"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam delectus. Reiciendis repellat illo, et natus earum odit! 
 
    <cite class="attribution">Mr. Jefferson</cite> 
 
</blockquote>

---

編輯：由於李斯特先生髮現，有這種和fieldbox標題模型之間的型差分：該塊引用的後臺運行上述（什麼樣子）top border 。

我個人不認爲這是一個顯著的問題，因爲

1. 它可以通過添加背景剪報額外的包裝很容易克服的，所以這是可以實現的，但需要一個稍微複雜的標記。
2. 我不認爲很多人會使用這種模式的背景顏色是不同的頁面。我個人的看法是，當使用透明背景時，這個模型看起來最好（這就是爲什麼我們打斷這條線，對吧？）。

另外，我爲自己設定的首要挑戰是在不觸及標記的情況下達到效果。

Answer 2

這個我試過了，效果很好：

html {background:blue} 
fieldset { 
    border: 4px solid black; 
     padding: 1rem 2rem; 
} 
legend { 
    font-style: italic; 
    padding: 0 1rem; 
} 


.quote { 
    border: 4px solid black; 
    padding: 1rem; 
    width:auto; 
    margin:0; 
    position: relative; 
} 
.attribution { 
    position: absolute; 
    top: 0; 
    left: 1rem; 
    margin-top: -0.65rem; 
    padding: 0 1rem; 
    background:blue 

}