我有一些圆角和彩色边框的div。我希望div的边框具有渐变,以便当用户将鼠标悬停在div上时它会发生变化。
我找到了有关如何使用渐变(http://css-tricks.com/css3-gradients/,http://gradients.glrzad.com/等)的所有网站,但我仍然无法弄清楚如何使其适用于圆边边框
有人会引导我访问一个描述如何执行此操作的网站,甚至可以帮助我处理代码吗?
答案 0 :(得分:3)
您可以嵌套两个元素并让外部div
充当渐变边框,然后您可以解决此问题,例如:
<div class="container">
<div class="content">
...
</div>
</div>
然后在你的CSS中:
/*
unprefixed for conciseness, use a gradient generator por production code
*/
.container {
background: linear-gradient(red, black);
}
.content {
background: white;
padding: 10px;
}
答案 1 :(得分:2)
在我看来,使用a:before元素是最理想的解决方案,因为您可以通过CSS完全控制并且HTML标记保持干净。
.circle {
width: 300px;
height: 200px;
background: white;
border-radius: 100%;
position: relative;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.circle::before {
border-radius: 100%;
width: 100%;
height:100%;
content: '';
background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
padding: 10px;
top: -10px;
left: -10px;
position:absolute;
z-index:-1;
}
您可以调整填充以及顶部和左侧值以调整边框粗细。
这是一个JSFiddle,它显示了一个实际的例子:http://jsfiddle.net/wschwarz/e2ckdp2v/
答案 2 :(得分:1)
我知道这个答案已经得到了回答和接受,但我想发布一种我使用的不同方法,因为如果按钮位于具有其他渐变或图像的背景上,则此接受的答案将不起作用示例
我的解决方案仅适用于水平渐变和圆角(但不是圆形)按钮。我使用了&#34; border-image&#34;属性和伪元素来实现这种效果:
按钮只有顶部和底部&#34; border-image&#34;边界。左边框和右边框将使用伪元素完成。
这是一个有效的例子:
HTML:
<div class="background">
<button class="button">
My button!
</button>
</div>
CSS:
*, *:before, *:after {
box-sizing: border-box;
}
.background {
background: linear-gradient(to bottom, #002e4b 0%,#1c4722 100%);
width:500px;
height:500px;
display:flex;
align-items:center;
justify-content:center;
}
.button {
box-sizing:border-box;
display: inline-block;
padding:0.5em 0;
background:none;
border:none;
border-top:2px solid #0498f8;
border-bottom:2px solid #0498f8;
border-image: linear-gradient(to right, #0498f8 0%, #4db848 100%);
border-image-slice: 1;
position: relative;
text-transform: lowercase;
transition:background 0.3s;
color: #fff;
cursor: pointer;
font-size:1em;
&:before,
&:after {
content: '';
display: block;
width: 2em;
height: calc(100% + 4px);
border-radius: 3em 0 0 3em;
border: 2px solid #0498f8;
position: absolute;
border-right: none;
transition:background 0.3s;
left: -2em;
top: -2px;
}
&:after {
border-radius: 0 3em 3em 0;
border: 2px solid #4db848;
position: absolute;
border-left: none;
left:auto;
right: -2em;
top: -2px;
}
&:hover {
background:rgba(0,0,0,0.3);
&:after,
&:before {
background:rgba(0,0,0,0.3);
}
}
}
答案 3 :(得分:0)
这是为此的简单解决方案:
结果:CSS圆角带有渐变边框
public Map<String, Object> getComponents() {
Map<String, Object> components = new HashMap<>();
components.put("b", b);
components.put("c", c);
return components;
}