如何在內容的一半區域製作邊框？

我想設計覆蓋一半文本內容區域的邊框，一半文本內容應該使用CSS和HTML在邊框之外。如何在內容的一半區域製作邊框？

請看下面的圖片爲例。

2017-07-28 Mudassar

我要問 - 你爲什麼要一個邊界，是不是足夠大，以適合內容區域？ –

你可能會考慮爲此使用背景圖片。 – CodeRomeos

可以使用帶有負的z-index絕對定位僞元素。

.container { 
 
    position: relative; 
 
    padding: 30px; 
 
} 
 

 
.container::before { 
 
    display: block; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 70%; 
 
    left: 0; 
 
    border: 5px solid #E7E7E9; 
 
    content: ''; 
 
}

<div class="container"> 
 
    <h2>The Title</h2> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut lectus non risus tincidunt lacinia nec ut nunc. Nam viverra ipsum vitae purus tempor, ut maximus lorem semper. Maecenas efficitur feugiat sem, et egestas ex tincidunt eu. Maecenas eu tempor justo. Duis non tempus nunc. Curabitur euismod non lectus non tempor. Cras non risus vel nisl luctus efficitur. Morbi consectetur ante vel ullamcorper semper. Ut interdum risus non velit dignissim aliquet. Ut porta rutrum efficitur. Quisque suscipit est nec tempor vestibulum. Vivamus vel dui at risus auctor ultricies a sed justo.</p> 
 
</div>

來源

2017-07-28 19:13:46

謝謝你，你的代碼工作完美。 – Mudassar

設計這個效果，你可以使用一個虛擬的絕對div來創建背景的邊界。

* { 
 
       box-sizing: border-box; 
 
       border: 0px; 
 
       padding: 0px; 
 
       margin: 0px; 
 
      } 
 
      .container { 
 
       position: relative; 
 
       width: 100%; 
 
       height: 500px; 
 
       background: #f9f9f9; 
 
       z-index: 0; 
 
      } 
 
      .fake-border { 
 
       position: absolute; 
 
       width: 40%; 
 
       height: 90%; 
 
       margin: 2.5%; 
 
       z-index: -1; 
 
       border: 5px solid #bdbdbd; 
 
      } 
 
      .content { 
 
       position: absolute; 
 
       top: 50%; 
 
       transform: translateY(-50%); 
 
       padding-left: 100px; 
 
      }

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
      <div class="fake-border"> 
 
      </div> 
 
      
 
      <div class="content"> 
 
       <h2>Header</h2> 
 
       <br><br> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

來源

2017-07-28 19:22:34

如何在內容的一半區域製作邊框？

回答

相關問題