CSS 如何更改fancybox边框颜色

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9253255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:55:57  来源:igfitidea点击:

How to change fancybox border color

cssfancybox

提问by earachefl

I've been trying to change fancybox's border color from white. I've succeeded in targeting every part of fancybox except the border. How can I change the color of the fancybox border?

我一直在尝试将fancybox 的边框颜色从白色更改为白色。我已经成功地瞄准了fancybox 的每个部分,除了边框。如何更改fancybox边框的颜色?

回答by elclanrs

If you're using 1.3.4, the border is in #fancybox-contentcss rule. A quick firebug or devtools inspect will tell you that.

如果您使用的是 1.3.4,则边框在#fancybox-contentcss 规则中。一个快速的萤火虫或 devtools 检查会告诉你。

UPDATE[March 2015] for both versions:

两个版本的更新[2015 年 3 月]:

For Fancybox v1.3.4

适用于 Fancybox v1.3.4

<style type="text/css">
#fancybox-content {
 border-color: #FF0000 !important; /* or whatever */
}
</style>

JSFIDDLE

JSFIDDLE

For Fancybox v2.0.x

对于 Fancybox v2。0.X

<style type="text/css">
.fancybox-outer {
 background-color: #FF0000; /* or whatever */
}
</style>

For Fancybox v2.1.x

对于 Fancybox v2。1个.X

<style type="text/css">
.fancybox-skin {
 background-color: #FF0000 !important; /* or whatever */
}
</style>

JSFIDDLE

JSFIDDLE

Noticethe difference between fancybox v2.0.xand v2.1.x

注意fancybox v2.0.xv2.1.x 的区别

回答by Magnus

Using fancybox 2.x, the thing that worked for me was:

使用fancybox 2.x,对我有用的是:

<style type="text/css">
.fancybox-skin {
 background-color: #FF0000; /* or whatever */
}
</style>

This seems to set the color of the frame, the width of which is set through the "padding" parameter to the $(".fancybox").fancybox(...) init function.

这似乎是设置框架的颜色,它的宽度是通过 $(".fancybox").fancybox(...) init 函数的“padding”参数设置的。

回答by earachefl

Change the border-colorproperty, not the background-color. That's what I had to do.

更改border-color属性,而不是背景颜色。这就是我必须做的。

回答by plugincontainer

But if you want a "real border": In your...

但是如果你想要一个“真正的边界”:在你的...

$('.fancybox').fancybox({

$('.fancybox').fancybox({

...set padding : 0,

...放 padding : 0,

...and in your css:

...并在您的 css 中:

.fancybox-outer, .fancybox-inner {position: relative;}

...add, e.g. border:1px solid #f00;

...添加,例如 border:1px solid #f00;