Bất kỳ cách nào để giới hạn chiều dài biên giới?
Câu trả lời:
Hi vọng điêu nay co ich:
#mainDiv {
height: 100px;
width: 80px;
position: relative;
border-bottom: 2px solid #f51c40;
background: #3beadc;
}
#borderLeft {
border-left: 2px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}<div id="mainDiv">
<div id="borderLeft"></div>
</div>Nội dung được tạo CSS có thể giải quyết điều này cho bạn:
div {
position: relative;
}
/* Main div for border to extend to 50% from bottom left corner */
div:after {
content: "";
background: black;
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 1px;
}<div>Lorem Ipsum</div>(lưu ý - content: "";khai báo là cần thiết để phần tử giả hiển thị)
Những :aftertảng đá :)
Nếu bạn chơi một chút, bạn thậm chí có thể đặt phần tử viền đã thay đổi kích thước của mình xuất hiện ở giữa hoặc chỉ xuất hiện nếu có phần tử khác bên cạnh (như trong menu). Dưới đây là một ví dụ với một menu:
#menu > ul > li {
position: relative;
float: left;
padding: 0 10px;
}
#menu > ul > li + li:after {
content:"";
background: #ccc;
position: absolute;
bottom: 25%;
left: 0;
height: 50%;
width: 1px;
}
Với các thuộc tính CSS, chúng tôi chỉ có thể kiểm soát độ dày của đường viền; không dài.
Tuy nhiên, chúng ta có thể bắt chước hiệu ứng biên và kiểm soát nó widthvà heightnhư chúng ta muốn với một số cách khác.
Với CSS (Gradient tuyến tính):
Chúng ta có thể sử dụng linear-gradient()để tạo (các) hình nền và kiểm soát kích thước và vị trí của nó bằng CSS để nó trông giống như một đường viền. Vì chúng ta có thể áp dụng nhiều hình nền cho một thành phần, chúng ta có thể sử dụng tính năng này để tạo nhiều đường viền giống như hình ảnh và áp dụng trên các mặt khác nhau của yếu tố. Chúng tôi cũng có thể bao phủ các khu vực có sẵn còn lại với một số hình ảnh màu, độ dốc hoặc nền rắn.
HTML bắt buộc:
Tất cả chúng ta cần là một yếu tố duy nhất (có thể có một số lớp).
<div class="box"></div>Các bước:
- Tạo (các) hình nền với
linear-gradient(). - Sử dụng
background-sizeđể điều chỉnhwidth/heightcủa (các) hình ảnh được tạo ở trên để nó trông giống như một đường viền. - Sử dụng
background-positionđể điều chỉnh vị trí (nhưleft,right,left bottomvv) của trên biên giới tạo (s).
CSS cần thiết:
.box {
background-image: linear-gradient(purple, purple),
// Above css will create background image that looks like a border.
linear-gradient(steelblue, steelblue);
// This will create background image for the container.
background-repeat: no-repeat;
/* First sizing pair (4px 50%) will define the size of the border i.e border
will be of having 4px width and 50% height. */
/* 2nd pair will define the size of stretched background image. */
background-size: 4px 50%, calc(100% - 4px) 100%;
/* Similar to size, first pair will define the position of the border
and 2nd one for the container background */
background-position: left bottom, 4px 0;
}
Ví dụ:
Với linear-gradient()chúng ta có thể tạo đường viền của màu sắc rắn cũng như có độ dốc. Dưới đây là một số ví dụ về đường viền được tạo bằng phương pháp này.
Ví dụ với đường viền chỉ áp dụng ở một bên:
Ví dụ với đường viền được áp dụng ở hai bên:
Ví dụ với đường viền được áp dụng ở tất cả các phía:
Ảnh chụp màn hình:
đối với các đường ngang bạn có thể sử dụng thẻ hr:
hr { width: 90%; }nhưng nó không thể giới hạn chiều cao biên giới. chỉ chiều cao phần tử.
height. Để thay thế đường viền ô trong sử dụng thẻ TD <td>your content<hr/></td>.
Một cách khác để làm điều này là sử dụng hình ảnh viền kết hợp với độ dốc tuyến tính.
div {
width: 100px;
height: 75px;
background-color: green;
background-clip: content-box; /* so that the background color is not below the border */
border-left: 5px solid black;
border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
border-image-slice: 1;
}<div></div>jsfiddle: https://jsfiddle.net/u7zq0amc/1/
Hỗ trợ trình duyệt: IE: 11+
Chrome: tất cả
Firefox: 15+
Để được hỗ trợ tốt hơn cũng thêm tiền tố nhà cung cấp.
Đây là một thủ thuật CSS, không phải là một giải pháp chính thức. Tôi để lại mã với khoảng thời gian màu đen vì nó giúp tôi định vị phần tử. Sau đó, tô màu nội dung của bạn (màu: trắng) và (lề trên: -5px hoặc hơn) để làm cho nó như thể khoảng thời gian không có ở đó.
div.yourdivname:after {
content: ".";
border-bottom:1px solid grey;
width:60%;
display:block;
margin:0 auto;
}Một giải pháp khác là bạn có thể sử dụng hình nền để mô phỏng giao diện của đường viền bên trái
- Tạo kiểu viền trái mà bạn yêu cầu dưới dạng đồ họa
- Đặt nó ở bên trái div của bạn (làm cho nó đủ dài để xử lý khoảng hai lần tăng kích thước văn bản cho các trình duyệt cũ hơn)
- Đặt vị trí dọc 50% từ đỉnh div của bạn.
Bạn có thể cần phải điều chỉnh cho IE (như thường lệ) nhưng nó đáng để thử nếu đó là thiết kế bạn đang hướng tới.
- Tôi thường chống lại việc sử dụng hình ảnh cho một cái gì đó mà CSS vốn đã cung cấp, nhưng đôi khi nếu thiết kế cần nó, không có cách nào khác làm tròn nó.