相关疑难解决方法(0)
渐变边框
我正在尝试将渐变应用到边框,我认为这样做很简单:
border-color: -moz-linear-gradient(top, #555555, #111111);
但这不起作用.
有谁知道边界渐变的正确方法是什么？
259
推荐指数
推荐指数
9
解决办法
解决办法
54万
查看次数
查看次数
可以将border-radius与具有渐变的border-image一起使用吗？
我正在设置一个输入字段,它具有圆角边框(border-radius),并尝试向所述边框添加渐变.我可以成功地制作渐变和圆形边框,但不能同时工作.它既可以是没有渐变的圆角,也可以是带渐变的边框,但没有圆角.
-webkit-border-radius: 5px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;
反正有两个CSS属性一起工作,还是这不可能？
62
推荐指数
推荐指数
5
解决办法
解决办法
7万
查看次数
查看次数
SVG：如何圆角和矩形角？
是否可以在 SVG 中对矩形进行圆化处理，同时确保笔划遵循角的圆度？下面的代码不起作用。
无中风：
stroke-width="0px"
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="0px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>有中风：
stroke-width="10px"
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>笔画似乎遵循原来的尖角而不是圆角。
9
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数
有没有办法创建一个具有渐变和圆角的边框(或div)？
它应该是这样的:
到目前为止的尝试:
- 使用渐变背景加上内部元素来覆盖它,只留下一个外部"边框".该背景显然不是透明的.
body {
background: #242424;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
color: #FFFFFF;
}
div {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
h1 {
margin: 2em;
text-align: center;
}
a {
cursor: pointer;
transition: ease-in-out,.2s,color;
}
a:hover {
color: #DDD;
}
.nested {
display: block;
max-width: 20em;
padding: 2px;
overflow: hidden;
border-radius: 2em;
background: linear-gradient(to right, #00ff00 0%, #00e5ff 100%);
} …7
推荐指数
推荐指数
1
解决办法
解决办法
1748
查看次数
查看次数
具有透明背景的按钮渐变边框
这是我会得到的结果：
所以默认按钮有透明背景的渐变边框（因为我想通过它看到父级的背景）。当用户将鼠标悬停在按钮上时，我想用相同的渐变填充它有边框。
所以首先我尝试使用 border-image 属性和我的边框的 .svg 图像：
button {
background: transparent;
background-repeat: no-repeat;
border: 3px;
border-style: solid;
border-color: transparent;
border-image-source: url(assets/images/icons/border.svg);
border-image-repeat: stretch stretch;
border-image-slice: 49;
border-image-width: 100px;
border-image-outset: 6px;
padding: 16px 28px;
border-radius: 100px;
}
所以我或多或少得到了我正在等待的结果：
现在，如何管理悬停动画并在不改变大小的情况下填充背景！？
也许边框图像不是最好的方法？
感谢您的帮助，干杯！
6
推荐指数
推荐指数
1
解决办法
解决办法
6134
查看次数
查看次数
是否可以使用css3在CIRCLE上创建渐变边框？
我有一个圆形的背景图像.给它一个黄色边框.我想将边框更改为从黄色到白色的渐变.我见过许多带方形边框的例子,但没有应用于圆圈.这是我的代码:
.Profileimage{
background-image: url("images/profilePic.jpg");
background-repeat: no-repeat;
background-size: cover;
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50%;
width:100px;
height:100px;
border: 5px solid rgb(252,238,33);
}<div class="Profileimage"></div>谢谢!!
5
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
具有透明背景和旋转渐变边框的按钮
我想要实现的是一个按钮
完成后，我需要在悬停时设置动画。我能找到的最接近的例子是这个代码笔
https://codepen.io/Chester/pen/QPoyjN
问题是::after需要在按钮上应用白色背景
按钮的大小可能会根据文本长度而变化，因此此处给出的解决方案无效： 仅使用 CSS 旋转边框
这是我到目前为止所得到的，目标是保持类似的动画但删除白色背景
.background {
width: 600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
background-image: url("https://via.placeholder.com/600");
}
.button-file {
display: block;
position: relative;
text-align: center;
z-index: 0;
border-radius: 30px;
max-width: 363px;
max-height: 46px;
border-radius: 30px;
overflow: hidden;
padding: 1rem 2rem;
}
.button-file::before {
content: '';
position: absolute;
z-index: -2;
left: 50%;
top: 50%;
width: 400px;
height: 400px;
border-radius: 30px;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, …5
推荐指数
推荐指数
1
解决办法
解决办法
883
查看次数
查看次数
CSS渐变边框无法正确显示
我想设置半蓝色和橙色border-color的text输入.
我尝试使用渐变但它不起作用.
我的代码问题是什么？
.search {
width: 550px;
height: 50px;
margin-left: 350px;
border-radius: 20px;
outline: none;
margin-top: 70px;
border: solid;
border-image: linear-gradient(to right, rgb(254, 113, 53) 50%, rgb(55, 154, 214) 50%);
font-size: 20px;
text-align: center;
transition: all 0.2s linear;
}
.search:hover,
.search:focus {
border: #4cbea5 solid;
}<div>
<form method="post">
<input type="Search" class="search" placeholder="Search">
</form>
</div>4
推荐指数
推荐指数
1
解决办法
解决办法
816
查看次数
查看次数
仅使用 css 的百分比饼图
我发现了非常漂亮的“百分比饼图”，并且只想用 CSS 创建它。不需要动画。只是静态的“图片”。
我明白如果我想创建这种图表，我需要使用这些元素
问题是
- 如何创建元素#2？
- 如何为更小 (5%) 或更高百分比 (80%) 值管理元素 #2 的形状？
4
推荐指数
推荐指数
2
解决办法
解决办法
8869
查看次数
查看次数
CSS - 按钮边框渐变
经过广泛搜索后，我陷入了如何在 CSS 中复制此按钮的问题，特别是边框，因为如果可能的话，我将在其他元素上使用它。
\n设计好的按钮
\n
\r\n
\r\n
button.rounded-button {\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 1.125rem 2rem;\n \n position: absolute;\n width: 13.5919rem;\n height: 4.375rem;\n \n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(0.7942rem);\n\n border-radius: 5.8652rem;\n border-image-slice: 1 1 0 0;\n border: 1px solid;\n border-image-source: linear-gradient(257.34deg, #FFFFFF 4.56%, rgba(255, 255, 255, 0) 29.19%);\n \n font-size: 1.25rem;\n line-height: 2.125rem;\n color: #fff;\n}\n\nbody {\n background: #393939;\n}<!-- SVG Not included with the example -->\n<button type="button" class="rounded-button">\n Watch …4
推荐指数
推荐指数
1
解决办法
解决办法
2883
查看次数
查看次数
带边框图像的边框半径
在下面的代码中，我希望两个 div 都是圆形的。但第一个border-image应用的是方形的。我怎样才能解决这个问题并使其圆润呢？
div {
float: left;
width: 130px;
height: 130px;
margin: auto;
border: 30px solid transparent;
border-radius: 50%;
border-image: linear-gradient(45deg, red, blue) 30;
}
div + div {
margin-left: 1em;
border-image: none;
border-color: green;
}<div></div>
<div></div>3
推荐指数
推荐指数
2
解决办法
解决办法
9027
查看次数
查看次数
具有边框半径和渐变文本的渐变边框
我正在努力实现以下设计！我已经设法用渐变边框实现边框半径，但如果我尝试使用-webkit-background-clip&-webkit-text-fill-color作为渐变文本，则边框半径不起作用，整个按钮都会获得渐变颜色。我使用它作为渐变文本的参考并附加渐变边框的代码
.btn {
background-image: linear-gradient(to right, #006175 0%, #00a950 100%);
border-radius: 40px;
box-sizing: border-box;
color: #00a84f;
display: block;
font: 1.125rem 'Oswald', Arial, sans-serif;
/*18*/
height: 80px;
letter-spacing: 1px;
margin: 0 auto;
padding: 4px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 264px;
z-index: 2;
}
.btn:hover {
color: #fff;
}
.btn span {
align-items: center;
background: #e7e8e9;
border-radius: 40px;
display: flex;
justify-content: center;
height: 100%;
transition: background .5s ease;
width: 100%;
}
.btn:hover span { …3
推荐指数
推荐指数
1
解决办法
解决办法
5527
查看次数
查看次数
使用边框图像源实现按钮的圆角是线性渐变
我想在使用边框图像源到线性渐变的同时实现按钮的圆角。
片段如下 -
按钮类 :card-approve-btn
CSS:-
.card-approve-btn {
width: 85px;
height: 30px;
text-align: center;
color: #485564;
font-size: 14px;
line-height :10px;
font-weight: 600;
border-radius: 6px;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-image-source: linear-gradient(291deg, #ffb37c, #f9514f);
border-image-slice: 1;
}
使用上面的 css 会导致尖角。并且，在谷歌搜索之后，我知道不可能同时拥有边界半径和线性梯度。真的不可能吗？如果没有，那么请建议是否有人有答案。
2
推荐指数
推荐指数
1
解决办法
解决办法
1586
查看次数
查看次数