CSS - 用特殊下劃線創建標題

Question

在下圖中，您可以看到一些我想用HTML和CSS實現的紫色標題。標題可以是任意長的，當然。對我來說難以適當創建紫色標題的自定義下劃線。

我想過使用顯示塊的標題和使用背景圖像和背景重複屬性，但我不知道如何在下劃線的右側設置紫色裝飾元素。

任何幫助表示感謝，謝謝！

Answer 1

您可以使用CSS :before和:after選擇的組合，並fontAwesome來實現這一目標。看看我的例子，並根據需要進行調整。

h1 { 
 
    display: block; 
 
    border-bottom: solid 1px #6B1E69; 
 
    position: relative; 
 
    width: 450px; 
 
    color: #6B1E69; 
 
} 
 
h1:after { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 25px; 
 
    position: absolute; 
 
    border-bottom: solid 3px #6B1E69; 
 
    margin-bottom: -5px; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 

 

 
h1:before { 
 
    content: '\f18c'; 
 
    font-family: fontAwesome; 
 
    height: 25px; 
 
    position: absolute; 
 
    margin-bottom: -10px; 
 
    bottom: 0; 
 
    right: -30px; 
 
    text-align: right; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<h1> Thi sis your header text</h1>

Answer 2

您有幾種選擇來實現這一目標：

1）multiple background images

聲明裝飾元素作爲第二背景圖像，並將其位置與不重複的權利。

瀏覽器支持：very good

2）border-image

你可以把你的形象，因爲它是和它聲明爲邊界圖像。

瀏覽器支持：good (with some exceptions)

3）pseudo element

使用具有裝飾性元件作爲背景圖像的僞元件，並相應地將其放置在下部拐角。

瀏覽器支持：excellent - all browsers support this (even down to IE8)

Answer 3

我不知道，你怎麼可以完全使用CSS實現這一雙邊框效果，但在一定程度上，這是可能的。 或者你可以使用多個圖像，甚至是一個完整的圖像的邊界和重複它。

注意：在類的下方給出1px border-bottom會帶來與圖像類似的邊框效果。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
.heading { 
 
    color: purple; 
 
    margin: 10px 0 15px; 
 
} 
 
.under { 
 
    width: 98%; 
 
    display:block; 
 
    position: relative; 
 
    border-bottom: 1px solid purple; 
 
} 
 
.under:after, 
 
.under:before { 
 
    content: ''; 
 
    position: absolute; 
 
    margin-top:2px; 
 
    top: 100%; 
 
} 
 
.under:after { 
 
    border-bottom: 3px solid purple; 
 
    width: 98%; 
 
    display: block; 
 
    z-index: 10; 
 
    left: 0; 
 
} 
 
.under:before { 
 
    background: #fff url('http://i.stack.imgur.com/SHc6G.png')no-repeat right top; 
 
    width: 33px; 
 
    height: 28px; 
 
    display: block; 
 
    right: 0; 
 
    top: 100%; 
 
    left: auto; 
 
    float: right; 
 
    margin-top: -11px; 
 
    z-index: 100; 
 
}

<div class="container"> 
 

 
    <h1 class="heading under"> 
 
Some heading 
 
</h1> 
 
</div>

Answer 4

這是我只是純粹的HTML和CSS得到的最接近和沒有圖像

*{box-sizing:border-box;} 
 
.container { 
 
    padding-right:30px; 
 
    position:relative; 
 
    width:300px 
 
} 
 
h2 { 
 
    color:purple; 
 
    border-bottom:1px solid purple; 
 
    padding:bottom:5px; 
 
    margin-bottom:1px; 
 
} 
 
.line { 
 
    height:3px; 
 
    background-color:purple; 
 
    margin:0; 
 
    position:relative; 
 
} 
 
.line:after { 
 
    width: 6px; 
 
    height: 6px; 
 
    background: white; 
 
    border:4px solid purple; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    position:absolute; 
 
     right: -20px; 
 
    bottom: -5px; 
 
    z-index: 100; 
 
    content: ""; 
 
} 
 
.line:before { 
 
    width: 16px; 
 
    height: 16px; 
 
    background: white; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    border-radius: 10px; 
 
    position:absolute; 
 
     right: -22px; 
 
    bottom: -6px; 
 
    z-index: 100; 
 
    content: ""; 
 
} 
 
.shape { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: purple; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
    position:absolute; 
 
    z-index: 100; 
 
    position:absolute; 
 
    right:0px; 
 
    bottom:0px; 
 
} 
 
.shape:before { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: purple; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
    position:absolute; 
 
    left:0px; 
 
    top:5px; 
 
    z-index: 100; 
 
    content: ""; 
 
} 
 

 
.shape:after { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: purple; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
    position:absolute; 
 
    left: 5px; 
 
    top: 2px; 
 
    z-index: 100; 
 
    content: ""; 
 
    transform: scale(1,0.8); 
 
} 
 

<div class="container"> 
 
    <h2>You header</h2> 
 
    <div class="shape"></div> 
 
    <div class="line"></div> 
 
    
 
</div>

Answer 5

使用一個SVG與備用圖片+實bg-color是一個很好的解決方案。我會考慮將圖像編碼到HTML，並避免將其作爲背景圖像。原因是你需要一個包含圖像的元素的硬件高度（或最小高度），並且今天的網絡可以在具有硬件高度或寬度的多個設備上使用，這可能是一種負面體驗，並且更好避免，IMO。

將圖像作爲塊級元素（或行內塊）運行時，將爲您提供寬度靈活性，而無需顯示問題或額外樣式。

至於佈局的話，你可以構建它作爲2張獨立的圖像，將每個圖像轉換成一個div和風格display:table-cell;包裝/容器DIV W/display:table;裏面，把width:100%;邊界圖像在整個容器伸展並將小裝飾圖像推向右側。

This is a good thread for opinions on how to handle the image; css bg vs. inline.