Làm thế nào để cung cấp đường viền cho bất kỳ phần tử nào bằng css mà không thêm chiều rộng đường viền vào toàn bộ chiều rộng của phần tử?

Làm thế nào để cung cấp đường viền cho bất kỳ phần tử nào bằng css mà không thêm chiều rộng đường viền vào toàn bộ chiều rộng của phần tử?

Giống như trong Photoshop, chúng ta có thể tạo đột quỵ- Bên trong, trung tâm và bên ngoài

Tôi nghĩ thuộc tính đường viền css mặc định là trung tâm giống như trung tâm trong photoshop, tôi nói đúng không?

Tôi muốn cung cấp cho đường viền bên trong hộp chứ không phải bên ngoài. và không muốn bao gồm chiều rộng đường viền trong chiều rộng hộp.

outline:1px solid white;

Điều này sẽ không thêm chiều rộng và chiều cao.

Kiểm tra kích thước hộp CSS ...

Thuộc tính CSS3 box-sizing có thể thực hiện điều này. Giá trị hộp viền (trái ngược với giá trị mặc định của hộp nội dung) làm cho hộp được hiển thị cuối cùng có chiều rộng được khai báo và mọi đường viền và phần đệm bị cắt bên trong hộp. Giờ đây, bạn có thể khai báo an toàn phần tử của mình có chiều rộng 100%, bao gồm phần đệm và đường viền dựa trên pixel, đồng thời hoàn thành mục tiêu một cách hoàn hảo.

• -webkit-box-sizing: border-box; / * Safari / Chrome, WebKit khác * /
• -moz-box-sizing: border-box; / * Firefox, Gecko khác * /
• box-sizing: border-box; / * Opera / IE 8+ * /

Tôi khuyên bạn nên tạo một mixin để xử lý điều này cho bạn. Bạn có thể tìm thêm thông tin về kích thước hộp tại W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Tùy thuộc vào hỗ trợ trình duyệt dự định của bạn, bạn có thể sử dụng thuộc box-shadowtính.

Bạn có thể đặt giá trị mờ thành 0 và độ lan tỏa đến độ dày mà bạn đang theo đuổi. Điều tuyệt vời về bóng hộp là bạn có thể kiểm soát xem nó được vẽ bên ngoài (theo mặc định) hay bên trong (sử dụng thuộc insettính).

Thí dụ:

box-shadow: 0 0 0 1px black; // Outside black border 1px

hoặc là

box-shadow: 0 0 0 1px white inset; // Inside white border 1px

Một lợi thế lớn của việc sử dụng bóng hộp là bạn có thể sáng tạo bằng cách sử dụng nhiều bóng hộp:

box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

Điều duy nhất tôi không thể nói là sự khác biệt này sẽ làm cho hiệu suất hiển thị trở nên khôn ngoan. Tôi cho rằng nó có thể trở thành một vấn đề nếu bạn có hàng trăm phần tử sử dụng kỹ thuật này trên màn hình cùng một lúc.

Tôi gặp phải vấn đề tương tự.

.right-border {
    position: relative;
}

.right-border:after {
    content: '';
    display: block;
    position: absolute;
        top: 0; right: 0;
    width: 1px;
    height: 100%;
    background: #e0e0e0;
}

Câu trả lời này cho phép bạn chỉ định một mặt duy nhất. Và sẽ hoạt động trong IE8 + - không giống như sử dụng box-shadow.

Tất nhiên, hãy thay đổi các thuộc tính phần tử giả của bạn khi bạn cần tách ra một mặt cụ thể.

* Mới và cải tiến *

&:before {
content: '';
display: block;
position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}

Điều này cho phép khả năng sử dụng đường viền và đánh nhiều mặt của hộp.

Sử dụng box-sizing: border-boxđể tạo đường viền BÊN TRONG một div mà không sửa đổi chiều rộng div.

Sử dụng outlineđể tạo đường viền BÊN NGOÀI một div mà không sửa đổi chiều rộng div.

Đây là một ví dụ: https://jsfiddle.net/4000cae9/1/

Lưu ý: border-boxhiện tại nó không được hỗ trợ bởi IE

Ủng hộ:

http://caniuse.com/#feat=outline

http://caniuse.com/#search=border-box

#test, #test2 {
    width: 100px;
    height:100px;
    background-color:yellow;
}
#test {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 10px dashed blue;
}
#test2 {
    outline: 10px dashed red;
}


<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>

Như abenson đã nói, bạn có thể sử dụng một phác thảo nhưng có một điểm đáng chú ý là Opera có thể vẽ một "hình dạng không phải hình chữ nhật". Một tùy chọn khác có vẻ hiệu quả là sử dụng lợi nhuận âm, chẳng hạn như css này:

div {
  float:left;
  width: 50%;
  border:1px solid black;
  margin: -1px;

}

Với html này:

<body>
  <div>A block</div>
  <div>Another block</div>
</body>

Một tùy chọn khác kém gọn gàng hơn là thêm đánh dấu bổ sung vào html. Ví dụ: bạn đặt chiều rộng của phần tử bên ngoài và thêm đường viền vào phần bên trong. CSS:

.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }

Và html:

<body>
  <div class="outer">
    <div class="inner">A block</div>
  </div>
  <div class="outer">
    <div class="inner">Another block</div>
  <div>
</body>

Sử dụng đệm khi không có đường viền. Loại bỏ phần đệm khi có đường viền.

.myDiv {
    width: 100px;
    height: 100px;
    padding-left: 2px;
    padding-right: 2px;
}

.myDiv:hover {
    padding-left: 0;
    padding-right: 0;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

Về cơ bản, chỉ cần thay thế đệm 2px bằng đường viền 2px. Kích thước Div vẫn giữ nguyên.

Trong trường hợp của bạn, bạn có thể làm mờ nó bằng cách trừ một nửa đường viền khỏi phần đệm không? (-2,5 từ phần đệm nếu đường viền của bạn rộng 5px, bạn không thể có phần đệm phủ định, vì vậy để nhỏ hơn, hãy giảm chiều rộng tổng thể của hộp). Bạn có thể thêm 2,5px vào lề để giữ cho hộp tổng thể có cùng kích thước.

Tôi thực sự không thích gợi ý này, nhưng tôi không nghĩ có cách nào để xử lý vấn đề này một cách sạch sẽ.

Vì vậy, bạn đang cố gắng đạt được giống như lỗi mô hình hộp IE nổi tiếng ? Đó là không thể. Hoặc bạn muốn hỗ trợ khách hàng với IE trên Windows chỉ và chọn một loại tài liệu mà lực lượng IE vào quirksmode .

Một tùy chọn khác, nếu màu nền của bạn là đồng nhất:

body { background-color: #FFF; }

.myDiv {
    width: 100px;
    height: 100px;
    border: 3px solid #FFF;  // Border is essentially invisible since background is also #FFF;
}

.myDiv:hover {
    border-color: blue;  // Just change the border color
}

phác thảo: 3px đen đặc || border: 3px đen đặc

div{
height:50px;
width:150px;
text-align:center;

}

div{    /*this is what you need ! */
outline:1px solid black
}

<div>
hello world
</div>