7个CSS你可能不知道的技巧
1、CSS的恶作剧
相信你看完以下代码后能够预料到会出现什么效果。
*{ cursor: none!important; }
2、简单的文字模糊效果
以下两行简单的CSS3代码可达到将文字模糊化处理的目的,出来的效果有点像使用PS的滤镜,so cool!
p { color: transparent; text-shadow: #111 0 0 5px; }
3、垂直居中
有好多次博主都有这样的需求,垂直居中显示某个DIV,我们知道CSS中天然有水平居中的样式text-align:center。唯独这个垂直居中无解。
当然你可以将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现,但此种实现往往会因为display:table而破坏整体布局,那还不如直接用table标签了呢。
下面这个样式利用了translate来巧妙实现了垂直居中样式,需IE9+。
.center-vertical { position: relative; top: 50%; transform: translateY(-50%); }
相比而言,水平居中要简单得多,像上面提到的text-align:center,经常用到的技巧还有margin:0 auto。但对于margin大法也只在子元素宽度小于容器宽度时管用,当子元素宽度大于容器宽度时此法失效。
如法炮制,利用left和transform同样可实现水平居中,不过意义不大,毕竟text-align和margin差不多满足需求了。
.center-horizontal { position: relative; left: 50%; transform: translateX(-50%); }
4、多重边框
利用重复指定box-shadow来达到多个边框的效果
在线演示
/*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 }
5、实时编辑CSS
通过设置style标签的display:block样式可以让页面的style标签显示出来,并且加上contentEditable属性后可以让样式成为可编辑状态,更改后的样式效果也是实时更新呈现的。此技巧在IE下无效。拥有此技能者,逆天也!
<!DOCTYPE html> <html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>
6、创建长宽比固定的元素
通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的,这在响应式页面设计中比较有用,能够保持元素不变形。
<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>
7、CSS中也可以做简单运算
通过CSS中的calc方法可以进行一些简单的运算,从而达到动态指定元素样式的目的。
.container{ background-position: calc(100% - 50px) calc(100% - 20px); }
文章推荐程序员效率:画流程图常用的工具程序员效率:整理常用的在线笔记软件远程办公:常用的远程协助软件,你都知道吗?51单片机程序下载、ISP及串口基础知识硬件:断路器、接触器、继电器基础知识
7个CSS你可能不知道的技巧相关推荐
- 被低估的css滤镜,你所不知道的 CSS 滤镜技巧与细节
本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏. OK,下面直接进入正文.本文所描述的滤镜,指 ...
- html h1标签字体颜色css,你可能不知道的h1标签美化技巧
一看这个标题,相信大家会有这样一种感觉:美化h1标签不就是改变标题文本字体.字号或者颜色吗,还需要什么技巧?其实技巧还是有的,下面小编就为大家简单介绍一下. 美化h1标签可不仅仅局限于改变文本的字体. ...
- eclipse提示方法已过时_提高效率,eclipse上你可能不知道的技巧
一张思维导图 1.控制台(console )日志输出另保存 经常会遇到这种情况,习惯性的清掉控制台上的输出日志,再然后发现刚才的日志居然还有用,不得不又重新调试一遍,为了解决这种"手贱&qu ...
- python熊猫图案_Python熊猫:您可能不知道的技巧和功能
python熊猫图案 Pandas is a foundational library for analytics, data processing, and data science. It's a ...
- 关于CSS(你所不知道的小秘密)
CSS规则 包含选择器和声明块选择器:选中元素 1. 元素选择器(h1,p,a,span...) 2. id选择器(#选择器名称)唯一的 在html中的写法:id=选择器名 3. 类选择器(.选择器名 ...
- axure设计出的原型打开自动跳转的问题_Axure原型设计中你不得不知道的技巧(二)...
上篇讲了控件的使用技巧,相信读者还记忆犹新,这里再跟大家回顾下,控件使用技巧:1.滚动显示动态面板内容 2.如何画折线 3.整块的点击效果 4.输入框加上提示文字 5.连接流程图 6.优化导入图像.这 ...
- Python熊猫:您可能不知道的技巧和功能
熊猫是用于分析,数据处理和数据科学的基础库.这是一个庞大的项目,具有大量的可选项和深度. 如果您对Python的Pandas库的核心概念感到满意,希望您会在本文中找到以前从未偶然发现过的一两个窍门. ...
- 针对Spring的Spring Retry 我发现了这样一个大家都不知道的技巧!
外部服务对于调用者来说一般都是不可靠的,尤其是在网络环境比较差的情况下,网络抖动很容易导致请求超时等异常情况,这时候就需要使用失败重试策略重新调用 API 接口来获取.重试策略在服务治理方面也有很广泛 ...
- 介绍一些老鸟知道,新鸟不知道的技巧
第一: 需要解决比较复杂数学问题的时候,请直接找数学专业人士,而不是自己跳坑. 比如:汽车工业界几十年来都想消除 NURBS 曲面上的曲率突变,结果丘成桐直接从理论上证明他们是痴心妄想,后来业界就关注 ...
最新文章
- oracle调整字段精度的四种方法
- 8个方法解决90%的NLP问题
- 纪念逝去的岁月——C/C++选择排序
- Mac git clone速度太慢
- iOS- UITableView could not hold the selected row after reload
- ssh端口映射,本地转发
- 千岛湖救人工程师再次暖心,“感动阿里奖”奖金都捐公益
- VTK:图像平面小部件用法实战
- 将多张图整合到一张大图中,再用css定位技术
- 小a与黄金街道(欧拉函数)/**模运算规则总结*/
- cryptico.js java解密_從Cryptico.js中提取RSA私鑰
- 13凯越门锁继电器在哪里_凯越中控门锁不工作.更换中央门锁装置故障依旧.
- 海思加鸿蒙的零距离思考,自主生态之路在何方
- Eclipse 汉化方法
- 学生表,选课表,课程表
- 【MATLAB】MATLAB 2017A 软件安装
- Java实现在线打开word文档加盖印章/盖章/签名功能
- 计算机辅助设计排版,计算机辅助设计
- zabbix监控系统
- beyong compare激活
热门文章
- 研究相机和IMU坐标系变换
- TCP/IP 通信示例
- 学习笔记(11):Python网络编程并发编程-粘包底层原理分析
- html期末网页设计,求网页设计的期末作业一份 HTML的
- oracle 升级前备份,rac(exadata)升级前的备份及LVM快照的恢复
- ipv4地址是几位二进制数_几张思维导图,让你清楚的知道ip地址怎么回事?
- mysql分析sql语句性能_sql语句执行性能分析
- 第3章 Python 数字图像处理(DIP) - 灰度变换与空间滤波8 - 直方图处理 - 直方图均衡化(全局直方图均衡化)
- 自定义vue全局组件use使用
- Eclipse基金会