CSS - Đường viền chỉ có một nửa đường viền được hiển thị

Question

Tôi nhầm lẫn là phải làm cho nó hoạt động trong CSS chỉ để có một div nơi đường viền sẽ chỉ hiển thị trên một nửa chiều rộng của nó.

Phong cách biên giới là một đơn giản 1px solid #000;

Tuy nhiên, tôi muốn đầu div 'biên giới là bạn không thể nhìn thấy ở khắp mọi nơi (trên 100% trên div' width s), thay vì chỉ vào ngày đầu tiên 50% chiều rộng của div.

Tôi chưa thể có được ví dụ về điều này ở bất cứ nơi đâu và cần phải theo tỷ lệ phần trăm, vì vậy các thủ thuật thông thường (hình ảnh trong nửa sau, ...).

Answer 1

có công việc này:

#holder { 
 
     border: 1px solid #000; 
 
     height: 200px; 
 
     width: 200px; 
 
     position:relative; 
 
     margin:10px; 
 
} 
 
#mask { 
 
     position: absolute; 
 
     top:-1px; 
 
     left:1px; 
 
     width:50%; 
 
     height: 1px; 
 
     background-color:#fff; 
 
}

<div id="holder"> 
 
     <div id="mask"></div> 
 
</div> 
 

 

Answer 2

Nếu bạn không muốn gây rối với HTML ở tất cả, bạn có thể làm điều đó với một pseudoelement trống rỗng, chỉ sử dụng CSS. Bạn vẫn cần phải biết màu nền, tất nhiên (giả màu trắng ở đây):

<span class="half-a-border-on-top">Hello world!</span> 

<style> 
.half-a-border-on-top { 
    border-top:1px solid black; 
    position: relative; 
} 
.half-a-border-on-top:after { 
    padding:0;margin:0;display:block;/* probably not really needed? */ 
    content: ""; 
    width:50%; 
    height:1.1px;/* slight higher to work around rounding errors(?) on some zoom levels in some browsers. */ 
    background-color:white; 
    position: absolute; 
    right:0; 
    top:-1px; 
} 
</style> 

Kết quả:

Snippet

.half-a-border-on-top { 
 
     border-top:1px solid black; 
 
     position: relative; 
 
    } 
 
    .half-a-border-on-top:after { 
 
     padding:0;margin:0;display:block;/* probably not really needed? */ 
 
     content: ""; 
 
     width:50%; 
 
     height:1.1px; 
 
     background-color:white; 
 
     position: absolute; 
 
     right:0; 
 
     top:-1px; 
 
    }

<span class="half-a-border-on-top">Hello world!</span>

Fiddle:

http://jsfiddle.net/vL1qojj8/

Answer 3

let cho bạn thấy làm thế nào tôi chỉnh sửa mã của leo, để đặt một biên giới một nửa ở lại trong trung tâm.

thử điều này:

mã html

<div class="half-a-border-on-left">Hello world!</div>

mã CSS

<style> 
.half-a-border-on-left { 
    border-left: 1px solid black; 
    position: relative; 
    height: 50px; 
    background: red; 
} 
.half-a-border-on-left:after { 
    padding:0; 
    margin:0; 
    content: ""; 
    width: 1px; 
    height: 10px; 
    background-color:white; 
    position: absolute; 
    left:-1px; 
    top: -10px; 
} 
.half-a-border-on-left:before { 
    padding:0; 
    margin:0; 
    content: ""; 
    width: 1px; 
    height: 10px; 
    background-color:white; 
    position: absolute; 
    left: -1px; 
    bottom: -5px; 
} 
</style> 

Đó là những i mã sử dụng để đặt một biên giới nửa cảm ơn bạn Leo,

Answer 4

tôi yêu Hyderabad

*** 

.div_1 { 
 
    width: 50px; 
 
    border-bottom: 2px solid black; 
 
} 
 
.div_2 { 
 
    width: max-content; 
 
    margin-bottom: 10px; 
 
}

<div class="div_1" ><div class="div_2">I love Hyderabad</div></div>

---