前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端少为人知的知识–前端冷知识集锦(css篇)

前端少为人知的知识–前端冷知识集锦(css篇)

作者头像
疯狂的技术宅
发布2019-03-27 15:36:48
9750
发布2019-03-27 15:36:48
举报
文章被收录于专栏:京程一灯

CSS篇

关于CSS的恶作剧

相信你看完以下代码后能够预料到会出现什么效果。

代码语言:javascript
复制
*{    cursor: none!important;}

简单的文字模糊效果

以下两行简单的CSS3代码可达到将文字模糊化处理的目的,出来的效果有点像使用PS的滤镜,so cool!

代码语言:javascript
复制
p {    color: transparent;    text-shadow: #111 0 0 1px;}

这是一段文字模糊化的示例这是一段文字模糊化的示例这是一段文字模糊化的示例

垂直居中

有好多次博主都有这样的需求,垂直居中显示某个DIV,我们知道CSS中天然有水平居中的样式text-align:center。唯独这个垂直居中无解。

当然你可以将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现,但此种实现往往会因为display:table而破坏整体布局,那还不如直接用table标签了呢。

下面这个样式利用了translate来巧妙实现了垂直居中样式,需IE9+。

代码语言:javascript
复制
.center-vertical {    position: relative;    top: 50%;    transform: translateY(-50%);}

相比而言,水平居中要简单得多,像上面提到的text-align:center,经常用到的技巧还有margin:0 auto。但对于margin大法也只在子元素宽度小于容器宽度时管用,当子元素宽度大于容器宽度时此法失效。

如法炮制,利用left和transform同样可实现水平居中,不过意义不大,毕竟text-align和margin差不多满足需求了。

代码语言:javascript
复制
.center-horizontal {    position: relative;    left: 50%;    transform: translateX(-50%); }

多重边框

利用重复指定box-shadow来达到多个边框的效果 查看演示

代码语言:javascript
复制
/*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

通过设置style标签的display:block样式可以让页面的style标签显示出来,并且加上contentEditable属性后可以让样式成为可编辑状态,更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。拥有此技能者,逆天也!

代码语言:javascript
复制
<!DOCTYPE html><html>    <body>        <style style="display:block" contentEditable>        	body { color: blue }        </style>    </body></html>

创建长宽比固定的元素

通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的,这在响应式页面设计中比较有用,能够保持元素不变形。

代码语言:javascript
复制
<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中也可以做简单运算

通过CSS中的calc方法可以进行一些简单的运算,从而达到动态指定元素样式的目的

代码语言:javascript
复制
.container{	background-position: calc(100% - 50px) calc(100% - 20px);}

往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-09-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 京程一灯 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • CSS篇
    • 关于CSS的恶作剧
      • 简单的文字模糊效果
        • 垂直居中
          • 多重边框
            • 实时编辑CSS
              • 创建长宽比固定的元素
                • CSS中也可以做简单运算
                相关产品与服务
                容器服务
                腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档