web前端的一些不为人知的冷知识点_CSS篇整理
CSS篇整理：关于CSS的恶作剧、简单的文字模糊效果、垂直居中、多重边框、实时编辑CSS、创建长宽比固定的元素、CSS中也可以做简单运算
关于CSS的恶作剧
*{
cursor: none!important;
}
简单的文字模糊效果
p {
color: transparent;
text-shadow: #111 0 0 5px;
}
垂直居中
.center-vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.center-horizontal {
position: relative;
left: 50%;
transform: translateX(-50%);
}
多重边框
/*CSS Border with Box-Shadow Example*/
div {
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
height: 200px;
margin: 50px auto;
width: 400px
}
实时编辑CSS
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>
创建长宽比固定的元素
<div style="width: 100%; position: relative; padding-bottom: 20%;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
this content will have a constant aspect ratio that varies based on the width.
</div>
</div>
CSS中也可以做简单运算
.container{
background-position: calc(100% - 50px) calc(100% - 20px);
}
实时编辑css
原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
服务热线 19970861797
