Як зробити прозору межу з CSS?

У мене такий liстиль:

li{
    display:inline-block;
    padding:5px;
    border:1px solid none;
}
li:hover{
    border:1px solid #FC0;
}

Коли я наведіть курсор liна кордон, не з’являється liзсув навколо. Чи можливо мати "кордон", який не видно?

Ви можете використовувати «прозорий» як колір. У деяких версіях IE, що з'являється як чорний, але я не перевіряв його з IE6 днів.

http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php

Багато хто з вас повинні приземлитися тут, щоб знайти рішення для непрозорого кордону замість прозорого. У такому випадку ви можете використовувати rgbaтам, де aозначає alpha.

.your_class {
    height: 100px;
    width: 100px;
    margin: 100px;
    border: 10px solid rgba(255,255,255,.5);
}

Демо

Тут ви можете змінити opacityз borderз0-1

Якщо ви просто хочете отримати повну прозору облямівку, найкраще скористатися transparent, як-отborder: 1px solid transparent;

Ви можете видалити рамку та збільшити прокладку:

li {
  display: inline-block;
  padding: 6px;
  border-width: 0px;
}

li:hover {
  border: 1px solid #FC0;
  padding: 5px;
}

<ul>
  <li>Hovering is great</li>
</ul>

ей, це найкраще рішення, яке я коли-небудь відчував. Це CSS3

використовуйте наступне майно для свого діва або будь-де, де ви хочете поставити межу прозорою

напр

div_class { 
 border: 10px solid #999;
 background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */
}

це спрацює ..

Так, ви можете використовувати border: 1px solid transparent

Іншим рішенням є використання outlineнаведення курсору (і встановлення межі на 0), що не впливає на потік документа:

li{
    display:inline-block;
    padding:5px;
    border:0;
}
li:hover{
    outline:1px solid #FC0;
}

NB. Контур можна встановити лише як властивість шартханда, а не для окремих сторін. Він призначений лише для налагодження, але він працює чудово.

Оскільки ви сказали в коментарі, що чим більше у вас варіантів, тим краще, ось ще один.

У CSS3 є дві різні так звані «моделі коробки». Один додає рамку та обшивку шириною блочного елемента, а другий - ні. Можна використовувати останнє, вказавши

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

Тоді в сучасних браузерах елемент завжди матиме однакову ширину. Тобто, якщо ви застосуєте до неї рамку на наведення курсору, ширина рамки не додасть до загальної ширини елемента; рамка буде додана "всередину" елемента, так би мовити. Однак, якщо я добре пам’ятаю, ви повинні widthчітко вказати, щоб це працювало. Це, мабуть, не є можливим для вас у цьому конкретному випадку, але ви можете мати це на увазі для майбутніх ситуацій.

Цей запис у блозі має змогу наслідувати border-color: transparentв IE6. Наведений нижче приклад включає виправлення "hasLayout", яке відображається в коментарях до запису блогу:

/* transparent border */
.testDiv {
    width: 200px;
    height: 200px;
    border: solid 10px transparent;
}
/* IE6 fix */
*html .testDiv {
    zoom: 1;
    border-color: #FEFEFE;
    filter: chroma(color=#FEFEFE);
}

Переконайтесь, що border-colorвикористане у виправленні IE6 не використовується ніде в .testDivелементі. Я змінив приклад з pinkна, #FEFEFEтому що це здається навіть менш ймовірним.

Найпростіше рішення для цього - використовувати rgbaяк колір: border-color: rgba(0,0,0,0);Це повністю прозорий колір облямівки.

Використовуйте прозорі властивості

border-color : transparent;