小编Tem*_*fif的帖子
Flexbox垂直填充可用空间
现在flexbox连续我都可以写
<div layout="row">
<div>some content</div>
<div flex></div> <!-- fills/grows available space -->
<div>another content</div>
</div>
我希望实现相同但垂直,就像在这张照片上
目前的问题是需要增长的div没有任何高度,因此两个内容相互低于一致.我希望我的第二个内容位于具有固定高度的父容器的底部!
我知道我可以通过将第二个内容定位为绝对来解决这个问题bottom: 0;但是我可以实现flexbox吗？
推荐指数
解决办法
查看次数
如何使用Javascript更新占位符颜色？
我在网上搜索,但没有找到任何东西.我正在尝试使用javascript更新文本框的占位符颜色,但我该怎么做？我有一个颜色选择器,颜色正在改变.
如果我在CSS中有这样的东西,我该如何更新它？
::placeholder {
color: red;
}<input placeholder="placeholder" />是否有javascript命令来编辑它？就像是
document.getElementById('text').style.placeholderColor = newColor;
推荐指数
解决办法
查看次数
如何制作一个骨头形状的按钮
我目前正在为我的网站试验一个按钮。我希望它看起来像一个普通的按钮，但是一旦你将它悬停，它就会变成一个骨头（我的网站是关于狗的）。
所以我使用了一个已经存在的 codepen 项目，我最终得到了这个：
:root {
--bg: #1a1e24;
--color: #eee;
--font: Montserrat, Roboto, Helvetica, Arial, sans-serif;
}
.wrapper {
padding: 1.5rem 0;
filter: url('#goo');
}
.bone {
display: inline-block;
text-align: center;
background: var(--color);
color: var(--bg);
font-weight: bold;
padding: 1em 1em 1.03em;
line-height: 1;
border-radius: 0.4em;
position: relative;
min-width: 8.23em;
text-decoration: none;
font-family: var(--font);
font-size: 1.25rem;
}
.bone:before,
.bone:after {
width: 2em;
height: 2em;
position: absolute;
content: "";
display: inline-block;
background: var(--color);
border-radius: 50%;
transition: transform 1s ease;
transform: scale(0);
z-index: …推荐指数
解决办法
查看次数
Font Awesome在CSS中直接使用时显示正方形而不是图标
我试图span直接从CSS页面更改带有Font Awesome图标的a的内容,但似乎无法使其正常工作.
1)我从文档中导入了FA <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
2)我的HTML看起来像这样:
<span class='myClass'>Movies</span>
3)现在让我说我想直接从CSS页面用图标更改跨度的内容.
我的css目前看起来像这样,但它不起作用,它给了我一个正方形而不是图标.
.myClass {
visibility: hidden;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: '\f008';
visibility: visible;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'>Movies</span>有趣的是,它看起来像是在使用一些图标.如果我测试content: '\f007';它的工作原理.知道为什么吗？
(如果你想知道我为什么要直接在CSS中更改图标,那是因为我正在使用媒体查询,所以我不能直接在HTML页面中添加它)
推荐指数
解决办法
查看次数
Chrome 83：更改新表单样式的颜色
随着新的 Chrome 更新， Chrome 显示改进的默认表单样式。根据帖子，我会说应该可以更改此表单主题以匹配网站的颜色集。
我们追求美丽、韦比和中性。我们希望每个设计系统都能在新设计中看到自己的一面，并轻松想象它们如何适应自己的品牌。
在过去的几个小时里，我一直在搜索并试图摆脱与我网站的其余部分形成鲜明对比的默认蓝色。除了使用 '-webkit-appearance: none;' 并自己重新设计复选框之类的东西，我不确定是否可能。
有没有人也遇到过这个问题，或者有我遗漏的解决方案或文档？
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
margin-block-start 和 margin-top 有什么区别？
试图了解两者在用法上的核心区别，但我找不到详细介绍此类比较的文章或文档。以此处提供的示例为例，假设如下：
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-lr;
margin-block-start: 20px;
background-color: #c8c800;
}<div>
<p class="exampleText">Example text</p>
</div>此实例与其中margin-top 使用的实例之间的差异非常小（但可见）。
的规格状态margin-block-start 取决于布局模型而margin-top 指的是包含块的宽度。如果有人可以用外行的术语解释它，我会喜欢它。
推荐指数
解决办法
查看次数
为什么在2D变换期间文本会变得模糊和抖动
我想让这张卡在悬停时缩放(包括其中的元素),但文本在转换过程中摇摆/抖动(当你悬停卡片时)并在缩放期间和之后变得模糊(有时,某些比率比其他比例更高) ,我认为是由于子像素值四舍五入).
如何在转型过程中消除这种摇晃和模糊？
我不关心IE浏览器,我只想让它在最新的Chrome中运行.
它似乎是由
transition财产造成的.
Codepen#1: https ://codepen.io/x84733/pen/yEpYxX
.scalable {
transition: 0.3s ease-in-out;
box-shadow: 0 6px 10px rgba(0,0,0,0.14);
}
.scalable:hover {
transform: scale(1.05);
box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.card {
width: 100%;
background: white;
padding: 20px;
}
body {
width: 50%;
height: 100%;
background: #999;
padding: 20px;
}<div class="card scalable">
<div>here's some description</div>
</div>更新:
我刚刚发现,当你以编程方式为它设置动画时,它不会抖动/抖动:
我能以某种方式使用JS吗？
Codepen: https ://codepen.io/anon/pen/LqXwOb ？editors = 1100
.anim {
animation: scale 0.3s ease-in-out infinite alternate;
}
@keyframes scale { …推荐指数
解决办法
查看次数
如何创建具有均匀间距的虚线圆圈？
我想用 CSS 制作一个虚线圆圈，并通过以下过程创建它。
虽然通过这个过程可以显示虚线圆圈，但是虚线的末端和起点之间的间隙变窄了，并且间隙不均匀。
.c {
width: 500px;
height: 500px;
border-width: 15px;
border-style: dashed;
border-radius: 600px;
}<div class="c"></div>有没有办法使间隙均匀？我们也可以控制破折号之间的差距吗？
如果单独使用 CSS 无法做到这一点，我们正在考虑使用 JavaScript 或类似的东西。
推荐指数
解决办法
查看次数
使用纯css隐藏除元素的第一个子元素以外的所有子元素
我试图在classa类元素的第一个孩子之后隐藏所有其他孩子.
div.classa {
display:none;
}
div.classa:first-child {
display:block !important;
}<div class="content">
<h3>abc</h3>
<div class="classa">some content</div>
<h3>xyz</h3>
<div class="classa">more content</div>
<h3>header3</h3>
<div class="classa">another content</div>
</div>如何使用纯css实现这一目标.
推荐指数
解决办法
查看次数
标签 统计
css ×10
html ×7
css3 ×2
javascript ×2
border ×1
checkbox ×1
css-shapes ×1
flexbox ×1
font-awesome ×1
forms ×1
margin ×1
scale ×1
svg ×1