如何使用CSS创建透明边框？ [英] How to make a transparent border using CSS?

问题描述

我想为有博客的客户做这样的事情。

I'm trying to do something like this for a client who has a blog.

她想要一个半透明的边框。我知道这可能使它只是一个背景。但我似乎找不到这种类型的css技术的横幅的逻辑/代码。有人知道如何这样做吗？这将是很多帮助，因为这是我的客户想要为他的博客实现的外观....

She wanted a semi transparent border. I know that's possible with making it just a background. But I can't seem to find the logic/code behind this kind of css technique for banners. Does anybody know how to do this? It would be a lot of help because that's the look my client's wanting to achieve for his blog....

推荐答案

你想要完全透明比你可以使用

Well if you want fully transparent than you can use

border: 5px solid transparent;

如果您的意思是不透明/透明，您可以使用

If you mean opaque/transparent, than you can use

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

这里， a 表示alpha可以缩放，0-1。

Here, a means alpha, which you can scale, 0-1.

还有一些可能建议你使用 opacity ，唯一的区别是它会导致子元素变得不透明，是的，有一些工作，但 rgba 似乎比使用 opacity 。

Also some might suggest you to use opacity which does the same job as well, the only difference is it will result in child elements getting opaque too, yes, there are some work arounds but rgba seems better than using opacity.

对于旧版本的浏览器，总是使用＃如果旧浏览器不能识别 rgba ，则会将 hex 颜色应用于元素。

For older browsers, always declare the background color using #(hex) just as a fall back, so that if old browsers doesn't recognize the rgba, they will apply the hex color to your element.

演示

演示2 （带有嵌套的背景图片div）

Demo 2 (With a background image for nested div)

演示3 使用 img 标记代替背景图像）

body {
    background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);   
}

div.wrap {
    border: 5px solid #fff; /* Fall back, not used in fiddle */
    border: 5px solid rgba(255, 255, 255, .5);
    height: 400px;
    width: 400px;
    margin: 50px;
    border-radius: 50%;
}

div.inner {
    background: #fff; /* Fall back, not used in fiddle */
    background: rgba(255, 255, 255, .5);
    height: 380px;
    width: 380px;
    border-radius: 50%; 
    margin: auto; /* Horizontal Center */
    margin-top: 10px; /* Vertical Center ... Yea I know, that's 
                         manually calculated*/
}

$ b b

注意（对于演示3）：图像将根据高度和
宽度提供，所以请确保它不会打破缩放比例。

Note (For Demo 3): Image will be scaled according to the height and width provided so make sure it doesn't break the scaling ratio.

这篇关于如何使用CSS创建透明边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！