CSS - Chỉnh Opacity cho Border trong suốt?

Tạo Border với Opacity?

Đôi khi bạn muốn cho Border trang web của mình trong suốt? Nhưng lại gặp khó khăn vì CSS không hỗ trợ tính năng nào cho Border cả.

Tuy nhiên vẫn có những cách để giải quyết vấn đề này.

Có 3 cách có thể sử dụng:

Cách đầu tiên là sử dụng ảnh PNG làm nền. Opacity tùy chỉnh theo ý bạn. Bên trong là box nội dung có Background theo ý bạn

Cách thứ 2 là vẫn sử dụng 2 box. Box bên ngoài chỉnh Opacity bằng CSS.

     CSS

#box{
    background-color:#ccc;font-weight:bold;
    text-align:center;
    line-height:100px;
    height:100px;
    vertical-align:middle;
    font-size:20px;
}
#boxOuter {
    background: rgba(0,0,0,0.5); width:300px; padding: 10px;
    margin-left:25px;
}
body{
    background:url(http://www.adamdorman.com/_images/gradient.jpg) no-repeat;  
}

-          Html

<div id="boxOuter">
    <div id="box">THANK YOU!</div>
</div>

<br>
<div>I don't like the "darker" corners!</div>
<div>Also, I want the gardient to be "partially visible" behind<br>the border...</div><br>
<div>The size of the border shall stay as 10px.</div><br>
<div>&copy; JCOC611.</div>

Cách 3 là sử dụng Outline thay cho border

Mời mọi người xem cách sử dụng Outline       

-        

        CSS

#box{
  outline:10px solid rgba(0,0,0,0.1);width:300px;height:100px;
  background-color:white;margin-left:25px;font-weight:bold;
  text-align:center;
  line-height:100px;
    vertical-align:middle;
    font-size:20px;
}
body{
 background:url(http://www.adamdorman.com/_images/gradient.jpg) no-repeat;  
}

-          

 HTML

<div id="box">THANK YOU!</div><br>
<div>I don't like the "darker" corners!</div>
<div>Also, I want the gardient to be "partially visible" behind<br>the border...</div><br>
<div>The size of the border shall stay as 10px.</div><br>
<div>&copy; JCOC611.</div>