Có cách nào để khai báo kích thước / đường viền một phần cho một hộp trong CSS không? Ví dụ: một hộp có ô 350pxđó chỉ hiển thị đường viền dưới cùng trong hộp đầu tiên của nó 60px. Tôi nghĩ rằng điều đó có thể rất hữu ích.
Ví dụ:
Có cách nào để khai báo kích thước / đường viền một phần cho một hộp trong CSS không? Ví dụ: một hộp có ô 350pxđó chỉ hiển thị đường viền dưới cùng trong hộp đầu tiên của nó 60px. Tôi nghĩ rằng điều đó có thể rất hữu ích.
Ví dụ:
Câu trả lời:
Không hẳn vậy. Nhưng rất dễ dàng để đạt được hiệu ứng theo cách giảm bớt một cách duyên dáng và không cần đánh dấu thừa:
div {
width: 350px;
height: 100px;
background: lightgray;
position: relative;
margin: 20px;
}
div:after {
content: '';
width: 60px;
height: 4px;
background: gray;
position: absolute;
bottom: -4px;
}<div></div>::outsidevà ::insidegiả thành phần không có sẵn chưa, tôi ghét đưa vào đánh dấu chỉ dành riêng cho phong cách, nhưng tôi không nghĩ rằng có bất kỳ cách nào khác.
contentở :afterdạng nội tuyến hoặc JSS, nhưng nó hoạt động tốt khi sử dụng các thành phần được tạo kiểu.
Tôi biết, điều này đã được giải quyết và pixel đã được yêu cầu. Tuy nhiên, tôi chỉ muốn chia sẻ vài điều ...
Có thể dễ dàng đạt được các phần tử văn bản được gạch chân một phần bằng cách sử dụng display:tablehoặcdisplay:inline-block
(Tôi chỉ không sử dụng display:inline-blockbởi vì, bạn biết đấy, khoảng cách khó xử 4px).
h1 {
border-bottom: 1px solid #f00;
display: table;
}<h1>Foo is not equal to bar</h1>Căn giữa , display:tablelàm cho không thể căn giữa phần tử với text-align:center.
Hãy làm việc xung quanh với margin:auto...
h1 {
border-bottom: 1px solid #f00;
display: table;
margin-left: auto;
margin-right: auto;
}<h1>Foo is not equal to bar</h1>Chà , điều đó thật tuyệt, nhưng nó không phải là một phần .
Như bookcasey đã giới thiệu, các yếu tố giả có giá trị bằng vàng.
h1 {
display: table;
margin-left: auto;
margin-right: auto;
}
h1:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
width: 50%;
}<h1>Foo is not equal to bar</h1>Offset , gạch dưới được căn trái ngay bây giờ. Để căn giữa nó, chỉ cần đẩy phần tử giả nửa phần tử width( 50% / 2 = 25%) của nó sang bên phải.
h1 {
display: table;
margin-left: auto;
margin-right: auto;
}
h1:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
margin-left: 25%;
width: 50%;
}<h1>Foo is not equal to bar</h1>... như davidmatas đã nhận xét, việc sử dụng margin:autođôi khi thực tế hơn việc tính toán margin-offset bằng tay.
Vì vậy, chúng ta có thể căn chỉnh gạch dưới sang trái, phải hoặc chính giữa (mà không cần biết dòng điện hiện tại width) bằng cách sử dụng một trong các kết hợp sau:
margin-right: auto (hoặc bỏ nó đi)margin: automargin-left: autoĐầy đủ ví dụ
.underline {
display: table;
margin-left: auto;
margin-right: auto;
}
.underline:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
width: 50%;
}
.underline--left:after {
margin-right: auto; /* ...or just leave it off */
}
.underline--center:after {
margin-left: auto;
margin-right: auto;
}
.underline--right:after {
margin-left: auto
}<h1 class="underline underline--left">Foo is not equal to bar</h1>
<h1 class="underline underline--center">Foo is not equal to bar</h1>
<h1 class="underline underline--right">Foo is not equal to bar</h1>Điều này có thể dễ dàng được chấp nhận, để chúng ta có thể sử dụng các phần tử cấp khối. Mẹo là đặt chiều cao phần tử giả bằng cùng chiều cao với phần tử thực của nó (đơn giản height:100%):
div {
background-color: #eee;
display: table;
height: 100px;
width: 350px;
}
div:after {
border-bottom: 3px solid #666;
content: '';
display: block;
height: 100%;
width: 60px;
}<div></div>:aftertôi, tôi thích một margin: 0 autocách tiếp cận hơn margin-left: 25%vì nó sẽ hoạt động với bất kỳ chiều rộng nào bạn khai báo mà không cần thực hiện phép toán.
auto- đơn giản hóa :)
Đây là một giải pháp khác dựa vào linear-gradientđó bạn có thể dễ dàng tạo bất kỳ loại đường nào bạn muốn. Bạn cũng có thể có nhiều dòng (ví dụ ở mỗi bên) bằng cách sử dụng nhiều nền:
Đây là một cú pháp khác để đạt được tương tự như trên:
.box1 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(#000, #000) top /40% 3px no-repeat,
#ccc
}
.box2 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(red,red) bottom/ 60% 2px no-repeat,
#ccc;
}
.box3{
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(red , red)bottom left/ 60% 2px,
linear-gradient(blue, blue) 60% 0 / 40% 2px,
linear-gradient(brown, brown) left/ 3px 30%,
linear-gradient(orange, orange) right / 3px 40%,
#ccc;
background-repeat:no-repeat;
}<div class="box1">
Box1
</div>
<div class="box2">
Box2
</div>
<div class="box3">
Box3
</div>Tôi đã sử dụng lưới để vẽ một số đường viền.
Xem tại đây .
Mã:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive partial borders</title>
<style>
/* ungrid without mobile */
.row{width:100%;display:table;table-layout:fixed;}
.col{display:table-cell;}
/* things to change */
.row{width: 70%; margin: auto;}
.mid.row > .col{ height: 150px; }
/* draw box and align text */
.col{ text-align: center;}
.top.left.col{
border-top: 1px solid black;
border-left: 1px solid black;
}
.top.right.col{
border-top: 1px solid black;
border-right: 1px solid black;
}
.bottom.left.col{
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.bottom.right.col{
border-bottom: 1px solid black;
border-right: 1px solid black;
}
.mid.row > .col{
border-left: 1px solid black;
border-right: 1px solid black;
vertical-align: middle;
}
.top.center.col{
position: relative;
top: -0.5em;
}
.bottom.center.col{
position: relative;
bottom: -0.5em;
}
</style>
</head>
<body>
<div class="row">
<div class="top left col"></div>
<div class="top center col">Top</div>
<div class="top right col"></div>
</div>
<div class="mid row">
<div class="col">Mid</div>
</div>
<div class="row">
<div class="bottom left col"></div>
<div class="bottom center col">Bottom</div>
<div class="bottom right col"></div>
</div>
</body>
</html>CSS không hỗ trợ một phần đường viền. Bạn cần sử dụng một phần tử liền kề để mô phỏng điều này.