Як надати межу будь-якому елементу за допомогою css, не додаючи межі ширини на всю ширину елемента?
Як і у Photoshop, ми можемо надавати штрихи - всередині, у центрі та зовні
Я думаю, що властивості кордону CSS за замовчуванням є центром, як центр у фотошопі, я прав?
Я хочу дати рамку всередині поля, а не зовні. і не хочуть включати ширину рамки в ширину поля.
Відповіді:
outline:1px solid white;Це не додасть додаткової ширини та висоти.
Перевірте розмір коробки для CSS ...
Властивість CSS3 розміру коробки може це зробити. Значення рамки рамки (на відміну від типового поля вмісту) робить остаточне віконечне поле оголошеною шириною, а будь-яке обрізання рамки та прокладки всередині поля. Тепер ви можете сміливо оголосити, що ваш елемент має ширину 100%, включаючи накладку на основі пікселів та облямівку, і досконало виконати свою мету.
Я б запропонував створити міксин для вирішення цього питання. Додаткову інформацію про розмір коробки ви можете знайти на W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
box-sizingбуде достатньо
Залежно від призначеної підтримки браузера, ви можете використовувати box-shadowвластивість.
Ви можете встановити значення розмиття на 0, а розкинути на будь-яку товщину, яку ви шукаєте. Чудова річ у тіні поля - це те, що ви можете контролювати, чи вона намальована зовні (за замовчуванням) або всередині (використовуючи insetвластивість).
Приклад:
box-shadow: 0 0 0 1px black; // Outside black border 1pxабо
box-shadow: 0 0 0 1px white inset; // Inside white border 1pxОднією з найважливіших переваг використання тіні для коробки є те, що ви можете проявити творчість за допомогою декількох тіньових коробок:
box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;Єдине, що я не можу сказати - це яка різниця зробить ефективність візуалізації мудрою. Я б припустив, що це може стати проблемою, якби у вас одразу було сотні елементів, що використовують цю техніку на екрані.
Я зіткнувся з тим же питанням.
.right-border {
position: relative;
}
.right-border:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: #e0e0e0;
}Ця відповідь дозволяє вказати одну окрему сторону. І працював би в IE8 + - на відміну від використання box-shadow.
Звичайно, змініть властивості псевдоелементів, як вам потрібно виділити певну сторону.
* Нове та вдосконалене *
&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}Це дозволяє використовувати рамки та натискати декілька сторін коробки.
Використовуйте box-sizing: border-boxдля того, щоб створити межу INSIDE div без зміни ширини div.
Використовуйте, outlineщоб створити межу OUTSIDE div, не змінюючи ширину div.
Ось приклад: https://jsfiddle.net/4000cae9/1/
Примітки: в
border-boxданий час він не підтримується IE
Підтримка:
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>Як сказав Абенсон, ви можете використовувати контур, але одна думка полягає в тому, що Opera може малювати "не прямокутну форму". Інший варіант, який, здається, працює - це використовувати негативні поля, наприклад, цей css:
div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;
}З цим html:
<body>
<div>A block</div>
<div>Another block</div>
</body>Ще один менш чистий варіант - додати додаткову розмітку до html. Наприклад, ви встановлюєте ширину зовнішнього елемента і додаєте рамку до внутрішнього. CSS:
.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }І html:
<body>
<div class="outer">
<div class="inner">A block</div>
</div>
<div class="outer">
<div class="inner">Another block</div>
<div>
</body>Використовуйте прокладки, коли немає меж. Видаліть прокладки, коли є бордюр.
.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;
}По суті, просто замініть накладку 2px рамками 2px. Розмір Div залишається колишнім.
У вашому випадку ви можете виправити це, віднявши половину межі від прокладки? (-2,5 від прокладки, якщо ваша рамка шириною 5 пікселів, ви не можете мати негативну підкладку, щоб зменшити загальну ширину поля). Ви можете додати додаткові 2,5 пікселя до поля, щоб загальний розмір поля був однаковим.
Мені дуже не подобається ця пропозиція, але я не думаю, що є спосіб вирішити цю проблему чисто.
Таким чином, ви намагаєтесь досягти того самого, як добре відома помилка IE box ? Це неможливо. Або ви хочете , щоб підтримувати клієнтів з IE на Windows , тільки і вибрати тип документа , який змушує IE в Quirksmode .
Ще один варіант, якщо колір тла суцільний:
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
}#FFFпрозорим, і тоді вам не потрібно пам'ятати, щоб змінити два значення. Ваша пропозиція приносить користь, що якщо вам потрібна пунктирна межа, це діятиме там, де цього box-shadowне вистачає.
контур: 3px суцільний чорний || межа: 3px суцільний чорний
div{
height:50px;
width:150px;
text-align:center;
}
div{ /*this is what you need ! */
outline:1px solid black
}<div>
hello world
</div>