几个CSS的黑科技
这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。
border-radius
很多开发者估计都没有正确认识这个border-radius,因为基本上很多人都是这么用的:
.box {
border-radius: 4px;
}
稍微高端一点的是这样的:
.box {
border-radius: 4px 6px 6px 4px;
}
然而,终极黑科技是这样用的:
.box {
border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}
对,它可以赋8个值,没见过?不着急,具体的解释是这样的:
斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,各个数字就分别代表四个不一样的方向。
outline-offset
相信很多开发者在写CSS的时候对下面的语句会很熟悉:
input {
outline : none;
} input:focus {
outline : none;
}
这就是将input输入框去掉默认的蓝线框的方法。其实,这里还有说一个就是,CSS中还有一个outline-offset属性,在这个属性中,你可以设置默认线框的距离;像这样
input {
outline-offset: 4px ;
}
调节该属性值的大小你就可以看到outline的距离变化了。
类的声明
对于下面的类的声明,可能大家都很熟悉:
.col-8 { }
这当然没什么,但是如果你这样写呢:
.♥ {
color: hotpink;
} .★ {
color: yellow;
}
嗯,看起来怎么样,你是可以这么用的:
<div class="♥ ★"></div>
只要是Unicode的,你都可以这么来声明你的类。
选中连续的几个元素
ol li:nth-child(n+7):nth-child(-n+14) {
background: lightpink;
}
/** Or Safari Way **/
ol li:nth-child(-n+14):nth-child(n+7) {
background: lightpink;
}
上面的这种写法其实就可以达到选中ol下面的第七到第十四个li元素。
伪类设置单标签
html中有几个常见的单标签:<br> ,<hr>等。具体可以查看这里:
http://www.w3.org/TR/html5/syntax.html#void-elements
下面的示例是实现对<hr>的修饰。
hr:before {
content: "♪♪";
} hr:after {
content: " This is an <hr> element";
}
没错,关键就是使用:before和:after这两个伪类。在这里,顺便说一点就是,其实你还可以用这两个伪类来修饰<meta> 和 <link>,不过这个前提是,你把这两个的display属性设置为:
display: block
属性区分大小写
假如我们在写html的时候有类似下面的代码:
<div class="box"></div>
<input type="email">
然后我们用属性选择器进行CSS修饰:
div[class="box"] {
color: blue;
} input[type="email"] {
border: solid 1px red;
}
这样的声明方式毫无疑问地就会生效。然而,如果我们声明成下面这个样子,结果会是怎么样的呢:
div[class="BOX"] {
color: blue;
} input[type="EMAIL"] {
border: solid 1px red;
}
这变成了大写之后,第一个class="BOX"并不会影响到<div class="box"></div>,而第二个type="EMAIL"还是会正常修饰<input type="email">。所以在使用属性选择器的时候,注意大小写问题。
目前就只觉得这些CSS黑科技需要提醒自己一下,有可以补充。
几个CSS的黑科技的更多相关文章
- localStorage的黑科技-js和css缓存机制
一.发现黑科技的起因 今天在微信公众号看到一篇技术博文,想用印象笔记收藏,所以发送了文章链接到pc上.然后习惯性地打开控制台,看看源码,想了解下最近微信用了什么新技术. 呵呵,以下勾起了我侦探的欲 ...
- Cnblogs关于嵌入js和css的一些黑科技
#pong .spoiler{cursor:none;display:inline-block;line-height:1.5;}sup{cursor:help;color:#3BA03B;} Pon ...
- 新手玩CSS中的一些黑科技
哎哎 1.鼠标移进网页里,不见了= = *{ cursor: none!important; } 2.简单的文字模糊效果 *{ color: transparent; text-shadow: #11 ...
- 黑科技!仅需 3 行代码,就能将 Gitter 集成到个人网站中,实现一个 IM 即时通讯聊天室功能?
欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...
- JS黑科技
1.论如何优雅的取随机字符串 Math.random().toString(16).substring(2) // 13位 Math.random().toString(36).substring(2 ...
- 一文带你了解 HTTP 黑科技
这是 HTTP 系列的第三篇文章,此篇文章为 HTTP 的进阶文章. 在前面两篇文章中我们讲述了 HTTP 的入门,HTTP 所有常用标头的概述,这篇文章我们来聊一下 HTTP 的一些 黑科技. HT ...
- 聊聊H5与JS近几年的黑科技
聊聊H5与JS近几年的黑科技 自ajax技术的诞生,编程界兴起了一股WEB开发热,facebook,Twitter等众多大佬级企业都在网页应用上大放异彩,这十年我们见证了前端技术的崛起.这期间产生了众 ...
- ACM: FZU 2105 Digits Count - 位运算的线段树【黑科技福利】
FZU 2105 Digits Count Time Limit:10000MS Memory Limit:262144KB 64bit IO Format:%I64d & ...
- 黑科技项目:英雄无敌III Mod <<Fallen Angel>>介绍
英雄无敌三简介(Heroes of Might and Magic III) 英3是1999年由New World Computing在Windows平台上开发的回合制策略魔幻游戏,其出版商是3DO. ...
随机推荐
- java 集合(转载)
一.集合与数组 数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用. ...
- Metasploit 读书笔记-神器Meterpreter
一、基本命令 截屏 screenshot 2.获取系统平台信息 sysinfo 3.进程信息 ps 4.获取键盘记录 查看进程信息ps--migrate将会话迁移至explorer.exe进程空间中- ...
- C++日志模块实现的经验之谈
以类的方式对日志模块进行封装,可创建一个单实例的接口或创建一个全局的日志对象指针,同时提供相应的对外写日志接口. 写日志的接口采用可变参数来建立,可使用va_list类型和##args参数,同时在写日 ...
- Python字典基础知识补充
1.添加键值对 #!/usr/bin/env python i1 = {'k1':'cai' , 'k2':123} print(i1) i1['k3'] = 0 i1['k4'] = "r ...
- vue file-loader vs url-loader
1.前言 如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿backgroun ...
- Python-6-字典-函数dict,字典的基本操作及将字符串设置功能用于字典
phonebook = {'Alice': '2341', 'Beth': '9102', 'Cecil': '3258'} 字典由键及其相应的值组成,这种键-值对称为项. 键必须为独一无二,值不必如 ...
- JavaScript Succinctly 读后笔记
1.JavaScript does not have block scope 2.Scope is determined during function definintion, not invo ...
- Django 09 博客小案例
Django 09 博客小案例 urls.py from django.urls import path from . import views urlpatterns = [ path('index ...
- Educational Codeforces Round 11 B
Description Consider 2n rows of the seats in a bus. n rows of the seats on the left and n rows of th ...
- sqlserver 数据库表分区
参考文档 https://msdn.microsoft.com/zh-cn/library/ms345146(SQL.90).aspx http://blog.sina.com.cn/s/blog_4 ...