小编Tem*_*fif的帖子
如何在输入上添加线性悬停效果？
我试图在我的输入按钮上添加线性效果.当用户将鼠标悬停在按钮上时,我希望底部边框线从中心开始,然后同时向右和向左移动.因此,当用户将鼠标悬停在其上时,该线从中心扩展到角落.
我设法添加了一个悬停线,但它不能按我的意愿工作.我环顾四周,我只能找到有关标题或标签的问题,而不是按钮.
#btn {
margin: 10px;
padding: 20px;
width: 470px;
height: 50px;
border: 2px solid #f7f7f7;
text-align: center;
text-transform: uppercase;
position: relative;
}
#btn:hover {
cursor: pointer;
border-bottom: 2px solid red;
transition: 0.3s;
}<input id="btn" type="submit" name="" value="Click">推荐指数
解决办法
查看次数
如何使HTML元素从同一行开始,但以换行符结束？
我想<br>在每次input控制后都有一个换行符().我如何在CSS中做到这一点？
我必须补充一点:我希望输入控件在与标签或其前面的任何内容相同的行上开始,但在其末尾有一个换行符,以便后面的任何内容都在一个单独的行上开始.
我知道这与Flex盒子模型有关,但我还不太了解它.
label {
font-weight: bold;
}
input {
display: / * what goes here? */
}<label for="theButton">Button</label>
<input name="theButton" type="button" value="Click me">
<label for="theTextBox">Button</label>
<input name="theTextBox" type="text">推荐指数
解决办法
查看次数
为什么在 grid-template-columns 中显示 100% 的网格会脱离主体？
.parent {
position:fixed;
width:100%;
left:0;
top:14px;
display:grid;
grid-template-columns:40% 60%;
grid-gap:5px;
background:#eee;
}
.left {
border:2px solid red;
}
.right {
border:2px solid red;
}<div class='parent'>
<div class='left'>LEFT</div>
<div class='right'>RIGHT</div>
</div>如果位置不是，fixed则没有问题，但如果位置是fixed-parent则右侧不完全可见。
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
带有 CSS 变量的文本阴影
我对文本阴影属性有疑问。
这有效：
text-shadow: 1px 1px 0 var(--primary-color);
这不起作用：
text-shadow: 1px 1px 0 rgba(var(--primary-color), 0.5);
有谁知道问题是什么？
谢谢你！
推荐指数
解决办法
查看次数
How to make .svg transparent area NOT clickable
I'm trying to set an .svg image as a button. Only problem is that i'm able to click not only in the painted are, but the transparency aswell. This i need to disable so i can only click on the painted are.
下面，我提供到目前为止的html代码（基本上是我从实际文件中复制的内容。为清楚起见，我从Windows机器上的Adobe Illustrator导出了此图像。
我尚未通过.css进行任何修改。
<div id="brand"><a href="index.html"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 106"><defs><style>.cls-1{fill:#ff7800;}</style></defs><path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/><path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/></svg></a></div>推荐指数
解决办法
查看次数
是否值得删除未使用的CSS？
我正在与2位其他大学开发人员一起开发一个简单的Web应用程序。我们正在使用几个库和包。我现在正在尝试准备好我们的应用程序以进行部署，但是注意到它的运行速度很慢。有很多未使用的CSS规则。
我尝试手动浏览编译的样式，搜索引用并删除。但这确实很乏味。
我的问题是：
- 删除未使用的CSS规则是否值得，或者结果可以忽略不计？
- 如何做到这一点的最佳方法是什么？
推荐指数
解决办法
查看次数
我可以选择以“＃”开头的ID吗
我有一个作业，必须在不触摸html的情况下对页面进行样式设置。ID中以“＃”开头的两个ID名称是否有办法让我使用ID在CSS文件中选择它们？
推荐指数
解决办法
查看次数
如何在不使用任何样式和类的情况下为html中的第二个p标签着色？
我有3个p标签，
<p> hi </p>
<p>hello</P>
<p>bye</P>
我想p仅通过使用纯CSS（不使用任何javascript）将第二个标签着色为红色。在不使用任何内联样式和类的情况下，我该如何实现？
<p> hi </p>
<p>hello</P>
<p>bye</P>
推荐指数
解决办法
查看次数
如何在输入元素上创建具有不同颜色和宽度/高度的重叠边框？
我目前正在使用vue.js拖放Web应用程序。在此应用程序中，我们在输入HTML元素上具有一些特殊设计的边框。
设计看起来像这样：（忽略灰色垂直线。这是动态绘制的）
我尝试过类似创建同级div的操作，使它比输入大一点，在输入后面设置z-index并设置颜色。但是问题在于，浅蓝色的右边界和左边界将始终占据高度的100％。我需要大约75％或80％的东西。
“重叠”边框也可以在元素的顶部，右侧或左侧
有谁知道解决此问题的最佳方法？
推荐指数
解决办法
查看次数