Чи можете ви встановити непрозорість кордону в CSS?

Чи існує прямий передній CSS спосіб зробити межу елемента напівпрозорим з чимось подібним?

border-opacity: 0.7;

Якщо ні, чи має хтось уявлення, як я міг би це зробити, не використовуючи зображення?

На жаль, opacityелемент робить весь елемент (включаючи будь-який текст) напівпрозорим. Найкращий спосіб зробити облямівку напівпрозорою - це кольоровий формат rgba. Наприклад, це дасть червону межу з непрозорістю 50%:

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

Проблема такого підходу полягає в тому, що деякі браузери не розуміють rgbaформат і взагалі не відображатимуть жодної межі, якщо це вся заява. Рішення полягає у наданні двох прикордонних декларацій. Перший з фальшивою непрозорістю, а другий з фактичним. Якщо браузер здатний, він буде використовувати другий, якщо ні, він використовуватиме перший.

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

Перша декларація кордону буде еквівалентним кольором до 50% непрозорої червоної облямівки на білому тлі (хоча будь-яка графіка під кордоном не протікає).

ОНОВЛЕННЯ: Я додав "background-clip: padding-box;" на цю відповідь (за пропозицією SooDesuNe в коментарях), щоб гарантувати, що межа залишається прозорою, навіть якщо застосовується суцільний колір фону.

Це легко, використовуйте суцільну тінь із зміщенням 0:

#foo {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);       
}

Крім того, якщо ви встановите радіус рамки для елемента, він дає досить закруглені межі

Демонстрація jsFiddle

Як вже згадували інші: CSS-3 говорить, що ви можете використовувати rgba(...)синтаксис, щоб вказати колір межі зі значенням непрозорості (альфа).

ось короткий приклад, якщо ви хочете перевірити це.

• Він працює в Safari та Chrome (напевно, працює у всіх браузерах webkit).

• Він працює у Firefox

• Я сумніваюся, що він взагалі працює в IE, але я підозрюю, що є якийсь фільтр або поведінка, які змусять його працювати.

Існує також цей пост stackoverflow , який підказує деякі інші проблеми, а саме те, що рамка відображає верхній частині будь-якого кольору фону (або фонового зображення), який ви вказали; таким чином обмежуючи корисність кордону альфа у багатьох випадках.

Якщо ви перевірите кодування CSS за допомогою валідатора W3C, ви побачите, чи прийнятний ваш CSS-код, навіть якщо він працював у основних браузерах.

Створення прозорого кордону за допомогою CSS, як написано вище,

border: 1px solid rgba(255, 0, 0, .5);

не приймається стандартами W3C, навіть не для CSS3. Я використовував валідатор прямого вводу із таким кодом CSS,

.test { border: 1px solid rgba(255, 0, 0, .5); }

Результати були,

Помилка значення: межа Занадто багато значень або значень не розпізнаються: 1 px тверда rgba (255,0,0,0.5)

Невдало, що значення альфа (літера "a" в кінці "rgb") W3C не прийнято як частина кольорових значень межі ще. Мені цікаво, чому він не стандартизований, оскільки він працює у всіх браузерах. Єдина помилка - чи потрібно дотримуватися стандартів W3C чи відмовитися від неї, щоб створити щось у CSS.

Використовувати онлайн-валідатор / прямий вхід CSS W3C .

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

* Наскільки я не знаю, немає того, що я роблю зазвичай за таких обставин, це створити блок з більшим розміром ((розмір * 2) + оригінальний розмір) і зробити його прозорим за допомогою

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

ось приклад

#main{
    width:400px;
    overflow:hidden;
    position:relative;
}
.border{
    width:100%;
    position:absolute;
    height:100%;
    background-color:#F00;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.content{
    margin:15px;/*size of border*/
    background-color:black;
}
<div id="main">
    <div class="border">
    </div>
    <div class="content">
        testing
    </div>
</div>

Оновлення:

Ця відповідь застаріла, оскільки врешті-решт цьому питанню більше 8 років. Сьогодні всі сучасні браузери підтримують rgba, тіньові коробки тощо. Але це гідний приклад, як це було 8+ років тому.

Як альтернативне рішення, яке може працювати в деяких випадках: змінити border-styleна dotted.

Наявлення чергування груп пікселів між кольором переднього плану та кольором тла не те саме, що суцільна лінія частково прозорих пікселів. З іншого боку, для цього потрібно значно менше CSS, і він набагато сумісніший для кожного браузера без будь-яких директив для браузера.

Інші відповіді стосуються технічного аспекту проблеми з непрозорістю кордону, тоді як я хотів би представити хак (лише для CSS та HTML). В основному створіть контейнер div, маючи прикордонний div, а потім діючий вміст.

<div class="container">
  <div class="border-box"></div>
  <div class="content-box"></div>
</div>

А потім CSS: (встановіть межу вмісту до жодної, подбайте про позиціонування таким чином, щоб враховувалася товщина рамки)

.container {
  width: 20vw;
  height: 20vw;
  position: relative;
}
.border-box {
  width: 100%;
  height: 100%;
  border: 5px solid black;
  position: absolute;
  opacity: 0.5;
}
.content-box {
  width: 100%;
  height: 100%;
  border: none;
  background: green;
  top: 5px;
  left: 5px;
  position: absolute;
}

Ні, немає ніякого способу , щоб тільки встановити прозорість кордону з допомогою CSS.

Наприклад, якщо ви не знали кольору , немає способу змінити непрозорість межі просто використанням rgba().

спробуйте це:

<h2>Snippet for making borders transparent</h2>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
    lacinia nunc. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod
    in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis
    turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. <i>Sed convallis tristique sem</i>.
    Integer euismod lacus luctus magna. <b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</b>. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
    viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <b>Suspendisse in justo eu magna luctus suscipit</b>. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</div>
<div id="transparentBorder">
  This &lt;div&gt; has transparent borders.
</div>

І ось наш чарівний CSS ..

* {
  padding: 10pt;
  font: 13px/1.5 Helvetica Neue, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
}

b {
  font-weight: bold;
}

i {
  font-style: oblique;
}

H2 {
  font-size: 2em;
}

div[id='transparentBorder'] {
  height: 100px;
  width: 200px;
  padding: 10px;
  position: absolute;
  top: 40%;
  left: 30%;
  text-align: center;
  background: Black;
  border-radius: 4px;
  border: 10pt solid rgba(0, 0, 0, 0.5);
  -moz-background-clip: border;
  /* Firefox 3.6 */
  -webkit-background-clip: border;
  /* Safari 4? Chrome 6? */
  background-clip: border-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  text-align: center;
  margin: 0;
  color: #fff;
  cursor: pointer;
}

Перегляньте демонстрацію тут.