Bisakah Anda mengatur opacity perbatasan di CSS?

Apakah ada cara CSS lurus ke depan untuk membuat perbatasan elemen semi-transparan dengan sesuatu seperti ini?

border-opacity: 0.7;

Jika tidak, apakah ada yang tahu bagaimana saya bisa melakukannya tanpa menggunakan gambar?

Sayangnya opacityelemen tersebut membuat keseluruhan elemen (termasuk teks apa saja) semi-transparan. Cara terbaik untuk membuat perbatasan semi-transparan adalah dengan format warna rgba. Misalnya, ini akan memberikan batas merah dengan opacity 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 */
}

Masalah dengan pendekatan ini adalah bahwa beberapa browser tidak memahami rgbaformat dan tidak akan menampilkan perbatasan sama sekali jika ini adalah keseluruhan deklarasi. Solusinya adalah dengan memberikan dua deklarasi perbatasan. Yang pertama dengan opacity palsu, dan yang kedua dengan yang sebenarnya. Jika browser mampu, itu akan menggunakan yang kedua, jika tidak, itu akan menggunakan yang pertama.

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 */
}

Deklarasi perbatasan pertama akan menjadi warna yang setara dengan 50% perbatasan merah buram di atas latar belakang putih (meskipun setiap grafik di bawah perbatasan tidak akan berdarah).

UPDATE: Saya telah menambahkan "background-clip: padding-box;" untuk jawaban ini (sesuai saran SooDesuNe dalam komentar) untuk memastikan perbatasan tetap transparan bahkan jika warna latar belakang yang kuat diterapkan.

Sangat mudah, gunakan bayangan padat dengan 0 offset:

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

Juga, jika Anda menetapkan radius batas ke elemen, itu memberi Anda batas yang cukup bulat

Demo jsFiddle

Seperti yang disebutkan orang lain: CSS-3 mengatakan bahwa Anda dapat menggunakan rgba(...)sintaks untuk menentukan warna batas dengan nilai opacity (alpha).

inilah contoh cepat jika Anda ingin memeriksanya.

• Ini bekerja di Safari dan Chrome (mungkin bekerja di semua browser webkit).

• Ini berfungsi di Firefox

• Saya ragu itu bekerja sama sekali di IE, tapi saya curiga ada beberapa filter atau perilaku yang akan membuatnya bekerja.

Ada juga posting stackoverflow ini , yang menunjukkan beberapa masalah lain - yaitu, bahwa perbatasan membuat di atas semua warna latar belakang (atau gambar latar belakang) yang telah Anda tentukan; dengan demikian membatasi kegunaan alpha perbatasan dalam banyak kasus.

Jika Anda memeriksa kode CSS dengan validator W3C, Anda akan melihat apakah kode CSS Anda dapat diterima, bahkan jika itu berfungsi di browser utama.

Membuat batas transparan melalui CSS, seperti yang tertulis di atas,

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

tidak diterima oleh standar W3C, bahkan untuk CSS3. Saya menggunakan validator input langsung dengan kode CSS berikut,

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

Hasilnya adalah,

Kesalahan Nilai: batas Terlalu banyak nilai atau nilai yang tidak dikenali: 1px solid rgba (255,0,0,0,5)

Sayangnya nilai alpha (huruf "a" di akhir "rgb") belum diterima oleh W3C sebagai bagian dari nilai warna perbatasan. Saya bertanya-tanya mengapa tidak dibakukan, karena ini bekerja di semua browser. Satu-satunya halangan adalah apakah Anda ingin tetap berpegang pada standar W3C atau menyingkir darinya untuk membuat sesuatu dalam CSS.

Untuk menggunakan validator CSS W3C online / Input Langsung .

Selalu merupakan ide bagus untuk menggunakan validator untuk memeriksa pekerjaan Anda, itu benar-benar membantu menemukan kesalahan kecil atau bahkan besar dalam pengkodean ketika Anda akan juling setelah berjam-jam pekerjaan pengkodean.

* Tidak sejauh yang saya tahu tidak ada yang biasanya saya lakukan dalam keadaan seperti ini adalah membuat blok di bawahnya dengan ukuran yang lebih besar ((berbatasan * 2) + ukuran asli) dan membuatnya transparan menggunakan

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

di sini adalah sebuah contoh

#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>

Memperbarui:

Jawaban ini sudah usang, karena setelah semua pertanyaan ini lebih dari 8 tahun. Hari ini semua browser terbaru mendukung rgba, bayangan kotak, dan sebagainya. Tapi ini adalah contoh yang layak bagaimana itu 8+ tahun yang lalu.

Sebagai solusi alternatif yang mungkin berfungsi dalam beberapa kasus: ubah border-styleke dotted.

Memiliki kelompok piksel bergantian antara warna latar depan dan warna latar belakang tidak sama dengan garis kontinu piksel transparan sebagian. Di sisi lain, ini membutuhkan jauh lebih sedikit CSS dan jauh lebih kompatibel di setiap browser tanpa arahan khusus browser.

Jawaban lain berhubungan dengan aspek teknis dari masalah opacity-perbatasan, sementara saya ingin menyajikan peretasan (hanya CSS murni dan HTML). Pada dasarnya buat div kontainer, memiliki div perbatasan dan kemudian div konten.

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

Dan kemudian CSS: (atur batas konten ke tidak ada, urus pemosisian sedemikian rupa sehingga ketebalan perbatasan diperhitungkan)

.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;
}

Tidak, tidak ada cara hanya mengatur opacity perbatasan dengan css.

Misalnya, jika Anda tidak tahu warnanya , tidak ada cara untuk hanya mengubah opacity perbatasan hanya dengan menggunakan rgba().

coba ini:

<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>

Dan inilah CSS magis kami ..

* {
  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;
}

Lihat Demo di sini.