1. 文字描边效果
<p class="outline">Why didn't I know about this sooner?</p>
<style>
.outline {
color: white;
-webkit-text-stroke: 2px black;
}
</style>
2. 在 Grid 布局中实现垂直居中
<div class="grid">
<div class="grid-item">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio, in?</p>
</div>
</div>
<style>
.grid {
display: grid;
place-items: center;
}
</style>
3. 通过 outline 排查问题
在网页布局中,有时候会莫名其妙出现横向滚动条,不知道那个元素导致。这个时候,可以给网页所有元素加上 outline
方便快速定完问题。
* { outline: 2px solid limegreen; }
4. 实现浮动标签效果(float label)
<div class="input-field">
<input type="text" placeholder="Enter your first name" id="fname" />
<label for="fname">First name</label>
</div>
<div class="input-field">
<input type="text" placeholder="Enter your last name" id="lname" />
<label for="lname">Last name</label>
</div>
<style>
label {
/* 默认标签文本是透明的 */
opacity: 0;
/* 有所偏移的 */
transform: translateY(5px);
/* 设置了过渡动画效果的(针对 opacity 和 transform 属性) */
transition: opacity linear 200ms, transform ease-in 150ms;
}
/* 在输入框中输入内容后,占位文本不可见,词条声明生效 */
input:not(:placeholder-shown) ~ label {
/* 标签文本设置为可见 */
opacity: 1;
/* 与 transition 结合起来,标签文本在可见的过程中,出现浮动效果 */
transform: translateY(0px);
}
<style>
5. 混合模式
<h1>混合模式:颜色减淡</h1>
<style>
h1 {
mix-blend-mode: color-dodge; /* 这里 */
font-family: yahei;
font-size: 5rem;
text-align: center;
margin: 0;
padding: 20vh 200px;
color: #D1956C;
}
html,
body {
margin: 0;
background-color: white;
}
body {
background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80);
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
overflow: hidden;
}
</style>
最新评论
大佬
Nignx主要是后台做负载用,没想到你也这么用心
这个评论虽然不能一针见血,但是喜欢这个文章,一直喜欢这个时间管理法。很好
优秀
你对加密的定义很严谨,在平时及网络各种文章中,通常将 base64 称之为“加密”,上面及文章中提到的“加密”同样是这个意思,并非严格意义的加密。严格讲 base64 是一种编码方式。感谢你的回复。
严格意义上来说 base64 不算是加密(Encryption),而是一种编码形式(Encoding)。对于 UTF-8 这种也可以叫它为 Encoding。 加密(Encryption)是指像 R
Base64: 可逆性。 可以将图片等二进制文件转换为文本文件。 可以把非ASCII字符的数据转换成ASCII字符,避免不可见字符。 MD5: 不可逆性。 任意长度的明文字符串,加密后得到的密文字符
第一个问题BASE64的加密方式和MD5的加密方式在这里 哪种 好用?