哎哎

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中的一些黑科技的更多相关文章

  1. Python3实现ICMP远控后门(中)之“嗅探”黑科技

    ICMP后门 前言 第一篇:Python3实现ICMP远控后门(上) 第二篇:Python3实现ICMP远控后门(上)_补充篇 在上两篇文章中,详细讲解了ICMP协议,同时实现了一个具备完整功能的pi ...

  2. 黑科技!仅需 3 行代码,就能将 Gitter 集成到个人网站中,实现一个 IM 即时通讯聊天室功能?

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...

  3. localStorage的黑科技-js和css缓存机制

    一.发现黑科技的起因  今天在微信公众号看到一篇技术博文,想用印象笔记收藏,所以发送了文章链接到pc上.然后习惯性地打开控制台,看看源码,想了解下最近微信用了什么新技术.  呵呵,以下勾起了我侦探的欲 ...

  4. Cnblogs关于嵌入js和css的一些黑科技

    #pong .spoiler{cursor:none;display:inline-block;line-height:1.5;}sup{cursor:help;color:#3BA03B;} Pon ...

  5. 几个CSS的黑科技

    这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性. border-radius 很多开发者估计都没有正确认识这个border-radius,因为基本上很多人都是这么用的: ...

  6. 黑科技抢先尝(续) - Windows terminal中WSL Linux 终端的极简美化指南

    目录 修改默认源,为apt-get安装提速 安装python 和 python pip 安装 zsh 安装powerline-font中的特定字体 安装powerline-shell 修改~目录下的配 ...

  7. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...

  8. [自己动手玩黑科技] 1、小黑科技——如何将普通的家电改造成可以与手机App联动的“智能硬件”

    NOW, 步 将此黑科技传授予你~ 一.普通家电控制电路板分析 普通家电,其人机接口一般由按键和指示灯组成(高端的会稍微复杂,这里不考虑) 这样交互过程,其实就是:由当前指示灯信息,按照操作流程按相应 ...

  9. css中的border还可以这样玩

    在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人 ...

随机推荐

  1. Delphi ActiveForm发布全攻略

    论坛上很多朋友(也包括我)提到ActiveForm的发布问题,都没有得到很好的解决.下面是本人开发ActiveForm的一点经验,拿出来跟大家分享,开发环境为 Win2000Server,IIS5.0 ...

  2. uuid.js

    // On creation of a UUID object, set it's initial valuefunction UUID(){    this.id = this.createUUID ...

  3. Netty代码分析

    转自:http://www.blogjava.net/BucketLi/archive/2010/12/28/332462.html Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开 ...

  4. SPOJ:Help BTW(二分)

    BTW wants to buy a gift for her BF and plans to buy an integer array. Generally Integer arrays are c ...

  5. SPOJ:PATHETIC STRINGS(分配问题&贪心)

    Problem statement: A string is said to be “PATHETIC” if all the characters in it are repeated the sa ...

  6. kali-linux简单学习

    一. curl --head 返回操作系统的版本 同样的Xprobe2可以和nmap一起返回操作系统的版本 nmap 直接加域名或者ip地址,比较权威判断操作系统版本,或者服务版本,以及开的端口 nm ...

  7. flex兼容新

    /* 子元素-平均分栏 */.flex1 { -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OL ...

  8. error the @annotation pointcut expression is only supported at Java 5

    eclipse搭建环境后报错 the pointcut is supported at Java 5 错误意思大致是:注释切入点表达式只支持在Java 5版本以上,我就纳闷了我安装的是jdk1.8啊, ...

  9. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 05.Controller 的路由

    视频地址: https://www.bilibili.com/video/av38392956/?p=5 这里面就包含了MVC相关的库 可以通过打开右侧的Nuget库进行查看 这里修改下 ,只需要静态 ...

  10. Codeforces732E Sockets

    首先检测有木有和Computer匹配的Socket,如果有则将其匹配. 然后将所有没有匹配的Socket连上Adapter,再去检测有木有Computer与Socket匹配. 重复这个操作31次,所有 ...