新手玩CSS中的一些黑科技
哎哎
1、鼠标移进网页里，不见了= =
*{
cursor: none!important;
}2、简单的文字模糊效果
*{
color: transparent;
text-shadow: #111 0 0 5px;
}
3、多重边框
.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
}
4、实时编辑CSS
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>
5、CSS中简单运算
.div{
width: calc(100% - 500px);
}
6、border-radius
因为基本上很多人都是这么用的：
.div {
border-radius: 4px;
}
稍微高端一点的是这样的：
.div {
border-radius: 4px 6px 6px 4px;
}
然而，终极黑科技是这样用的：
.div {
border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}
border-radius 它可以赋8个值：
斜线前面的影响的是水平方向，斜线后面影响的是垂直方向，
各个数字就分别代表四个不一样的方向。
7、outline-offset
在input下写CSS的时候对下面的语句会很熟悉：
input {
outline : none;
}
input:focus {
outline : none;
}这就是将input输入框去掉默认的蓝线框的方法。
CSS中还有一个outline-offset属性，在这个属性中，你可以设置默认线框的距离：
input {
outline-offset: 4px ;
}
（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）
调节该属性值的大小你就可以看到outline的距离变化了。
最后献上一同事实习前的大白demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Baymax</title>
<link rel=stylesheet href="demo2.css"/>
</head>
<style>
body {
background: #595959;
}
#baymax{
/*设置为 居中*/
margin: 0 auto;
/*高度*/
height: 600px;
/*隐藏溢出*/
overflow: hidden;
}
#head{
height: 64px;
width: 100px;
/*以百分比定义圆角的形状*/
border-radius: 50%;
/*背景*/
background: #fff;
margin: 0 auto;
margin-bottom: -20px;
/*设置下边框的样式*/
border-bottom: 5px solid #e0e0e0;
/*属性设置元素的堆叠顺序； 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
z-index: 100;
/*生成相对定位的元素*/
position: relative;
}
#eye,
#eye2{
width: 11px;
height: 13px;
background: #282828;
border-radius: 50%;
position: relative;
top: 30px;
left: 27px;
/*旋转该元素*/
transform: rotate(8deg);
}
#eye2{
/*使其旋转对称*/
transform: rotate(-8deg);
left: 69px; top: 17px;
}
#mouth{
width: 38px;
height: 1.5px;
background: #282828;
position: relative;
left: 34px;
top: 10px;
}
/*躯干和腹部*/
#torso,
#belly{
margin: 0 auto;
height: 200px;
width: 180px;
background: #fff;
border-radius: 47%;
/*设置边框*/
border: 5px solid #e0e0e0;
border-top: none;
z-index: 1;
}
#belly{
height: 300px;
width: 245px;
margin-top: -140px;
z-index: 5;
}
#cover{
width: 190px;
background: #fff;
height: 150px;
margin: 0 auto;
position: relative;
top: -20px;
border-radius: 50%;
}
/*心脏*/
#heart{
width:25px;
height:25px;
border-radius:50%;
position:relative;
/*向边框四周添加阴影效果*/
box-shadow:2px 5px 2px #ccc inset;
right:-115px;
top:40px;
z-index:111;
border:1px solid #ccc;
}
/*手臂*/
#left-arm,
#right-arm{
height: 270px;
width: 120px;
border-radius: 50%;
background: #fff;
margin: 0 auto;
position: relative;
top: -350px;
left: -100px;
transform: rotate(20deg);
z-index: -1;
}
#right-arm{
transform: rotate(-20deg);
left: 100px;
top: -620px;
}
/*手指头*/
#l-bigfinger,
#r-bigfinger{
height: 50px;
width: 20px;
border-radius: 50%;
background: #fff;
position: relative;
top: 250px;
left: 50px;
transform: rotate(-50deg);
}
#r-bigfinger{
left: 50px;
transform: rotate(50deg);
}
#l-smallfinger,
#r-smallfinger{
height: 35px;
width: 15px;
border-radius: 50%;
background: #fff;
position: relative;
top: 195px;
left: 66px;
transform: rotate(-40deg);
}
#r-smallfinger{
background: #fff;
transform: rotate(40deg);
top: 195px;
left: 37px;
}
/*大腿*/
#left-leg,
#right-leg{
height: 170px;
width: 90px;
border-radius: 40% 30% 10px 45%;
background: #fff;
position: relative;
top: -640px;
left: -45px;
transform: rotate(-1deg);
z-index: -2;
margin:0 auto;
}
#right-leg{
background:#fff;
border-radius:30% 40% 45% 10px;
margin:0 auto;
top: -810px;
left:50px;
transform:rotate(1deg);
}
</style>
<body>
<div id="baymax">
<!-- 定义头部，包括两个眼睛、嘴 -->
<div id="head">
<div id="eye"></div>
<div id="eye2"></div>
<div id="mouth"></div>
</div>
<!-- 定义躯干，包括心脏 -->
<div id="torso">
<div id="heart"></div>
</div>
<!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->
<div id="belly">
<div id="cover"></div>
</div>
<!-- 定义左臂，包括一大一小两个手指 -->
<div id="left-arm">
<div id="l-bigfinger"></div>
<div id="l-smallfinger"></div>
</div>
<!-- 定义右臂，同样包括一大一小两个手指 -->
<div id="right-arm">
<div id="r-bigfinger"></div>
<div id="r-smallfinger"></div>
</div>
<!-- 定义左腿 -->
<div id="left-leg"></div>
<!-- 定义右腿 -->
<div id="right-leg"></div>
</div>
</body>
<html> 
我有一个前端学习交流QQ群：328058344 如果你在学习前端的过程中遇到什么问题，欢迎来我的QQ群提问，群里每天还会更新一些学习资源。禁止闲聊，非喜勿进。
新手玩CSS中的一些黑科技的更多相关文章
- Python3实现ICMP远控后门(中)之“嗅探”黑科技
ICMP后门 前言 第一篇:Python3实现ICMP远控后门(上) 第二篇:Python3实现ICMP远控后门(上)_补充篇 在上两篇文章中,详细讲解了ICMP协议,同时实现了一个具备完整功能的pi ...
- 黑科技！仅需 3 行代码，就能将 Gitter 集成到个人网站中，实现一个 IM 即时通讯聊天室功能？
欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...
- 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的黑科技
这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性. border-radius 很多开发者估计都没有正确认识这个border-radius,因为基本上很多人都是这么用的: ...
- 黑科技抢先尝(续) - Windows terminal中WSL Linux 终端的极简美化指南
目录 修改默认源,为apt-get安装提速 安装python 和 python pip 安装 zsh 安装powerline-font中的特定字体 安装powerline-shell 修改~目录下的配 ...
- 原来css中的border还可以这样玩
原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...
- [自己动手玩黑科技] 1、小黑科技——如何将普通的家电改造成可以与手机App联动的“智能硬件”
NOW, 步 将此黑科技传授予你~ 一.普通家电控制电路板分析 普通家电,其人机接口一般由按键和指示灯组成(高端的会稍微复杂,这里不考虑) 这样交互过程,其实就是:由当前指示灯信息,按照操作流程按相应 ...
- css中的border还可以这样玩
在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人 ...
随机推荐
- HDU 1022 之 Train Problem I
Train Problem I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- POJ3045 Cow Acrobats —— 思维证明
题目链接:http://poj.org/problem?id=3045 Cow Acrobats Time Limit: 1000MS Memory Limit: 65536K Total Sub ...
- SpringBoot发送简单文本邮件
1.pom.xml添加 spring-boot-starter-mail 依赖 <dependency> <groupId>org.springframework.boot&l ...
- SPFA 最短路 带负权边的---- 粗了解
SPFA(Shortest Path Faster Algorithm)是Bellman-Ford算法的一种队列实现,减少了不必要的冗余计算. 算法大致流程是用一个队列来进行维护. 初始时将源加入队列 ...
- BZOJ_2251_[2010Beijing Wc]外星联络_后缀数组
BZOJ_2251_[2010Beijing Wc]外星联络_后缀数组 Description 小 P 在看过电影<超时空接触>(Contact)之后被深深的打动,决心致力于寻 找外星人的 ...
- Ubuntu 16.04 如何使用Samba服务器
对于Windows与Ubuntu之间的数据传输,我们习惯于使用FTP工具,不过还是有学员问到samba服务器搭建和使用的问题,这便是本文的来由. Ubuntu版本:ARM裸机1期加强版配套的Ubunt ...
- Linux限制端口
设置防火墙 iptables -a input -p 协议 -s 可以访问ip -dport端口 -j ACCEPT
- UVaLive 6950 && Gym 100299K Digraphs (DFS找环或者是找最长链)
题意:有n个只包含两个字母的字符串, 要求构造一个m*m的字母矩阵, 使得矩阵的每行每列都不包含所给的字符串, m要尽量大, 如果大于20的话构造20*20的矩阵就行了. 析:开始吧,并没有读对题意, ...
- $(function() {})，即$(document).ready(function()，什么时候执行？以此为准
$(function() { //执行操作 }); $(function() {}) 是$(document).ready(function()的简写. 这个函数什么时候执行的呢? 答案:DOM加载完 ...
- E20170509-hm
slice vt. 切成片; 切下; 划分; n. 薄片,切片 slicing n. 切割; 限幅,限制; inspect v. 视察; 检查 inspector n. 检查员; (英 ...