如何给一个div设置两个颜色不同的边框?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何给一个div设置两个颜色不同的边框?相关的知识,希望对你有一定的参考价值。
如题。
可以给div添加例子阴影样式:box-shdow。设置多少个边框都行。
例如:
div
width: 200px;
height: 200px;
margin: 100px 200px;
box-shadow: 0 0 5px 5px #f00, 0 0 5px 10px #0f0;
更具体可参考这文章里面有参数说明:用Box-Shadow实现彩虹边框与凹陷按钮
参考技术A你好,可以设置元素的css border-left\\border-top\\border-right\\border-bottom等样式。
回答不易,谢谢采纳~
参考技术B由于你的悬赏为0,请自己手打代码查看
本回答被提问者采纳如何专门为两个输入分配不同的功能
【中文标题】如何专门为两个输入分配不同的功能【英文标题】:How to specifically assign function differently to two inputs 【发布时间】:2016-08-01 19:46:49 【问题描述】:我遇到了一个关于为输入分配特定功能的问题。我创建了一个具有两种不同颜色选项(输入)的颜色选择器。每个都为不同的 div 添加颜色。在我创建的内容中,我不明白如何控制哪个输入将颜色分配给外部或内部 div。正如您在我的小提琴中看到的那样,我首先输入了内部颜色,这会改变外部颜色,反之亦然,对于另一个 div。
我希望能够控制输入,因此他们将颜色分配给我想要的 div。
我做错了什么?
The Spectrum docs
See Fiddle Here
$(".colorpicker").spectrum(
color: "#FFF",
showInput: true,
className: "full-spectrum",
showInitial: true,
showPalette: true,
showSelectionPalette: true,
maxSelectionSize: 10,
preferredFormat: "hex",
localStorageKey: "spectrum.demo",
change: function(color)
var eq = $(this).index('.colorpicker');
$('.container').eq(eq).css('background-color', color.toHexString())
内部颜色
外部颜色
如果我选择橙色作为外部颜色,我如何继续为外部 div 内部的其他 div 使用和设置该颜色?
【问题讨论】:
【参考方案1】:在此处查看更新的小提琴https://jsfiddle.net/way4LmbL/12/
<div id="control-container">
<label for="outside" class="color-label">Outside Color
<input type="text" name="outside" class="colorpicker">
</label>
<label for="inside" class="color-label" id="inside-color-label">Inside Color
<input type="text" name="inside" class="colorpicker">
</label>
</div>
实际上问题出在更改事件上,您在其中找到颜色选择器的索引,然后将其分配给容器类的相应索引的背景颜色。
【讨论】:
是的,我原来是这样的,但是由于设置了外部颜色时,内部和外部颜色最初都发生了变化,所以改变了它。 那是因为在 css 背景属性中继承父值我的意思是 css 规则,这就是为什么外部 div 颜色也将颜色设置为内部 div,如果你不想要,那么你必须改变div 结构并尝试使用 position 属性为您的页面提供相同的外观 这方面还有吗?我要做的是将其他子 div 添加到外部 div。然后我想为这些其他 div 分配我选择的一种颜色。有关示例,请参阅我更新的问题。【参考方案2】:你只需要像这样切换你的两个颜色选择器:
<div id="control-container">
<label for="outside" class="color-label">Outside Color
<input type="text" name="outside" class="colorpicker">
</label>
<label for="inside" class="color-label" id="inside-color-label">Inside Color
<input type="text" name="inside" class="colorpicker">
</label>
</div>
这样颜色选择器的索引与您要设置背景颜色的.container
的索引匹配。
【讨论】:
是的,我原来是这样的,但是由于设置了外部颜色时,内部和外部颜色最初都发生了变化,所以改变了它。以上是关于如何给一个div设置两个颜色不同的边框?的主要内容,如果未能解决你的问题,请参考以下文章