新手玩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还可以这样玩".这篇文章主要是很早以前看了别人 ...
随机推荐
- linux内存操作--ioremap和mmap
最近在做视频输出相关的东西,对于预留给framebuffer的内存使用不是很清楚,现在找到一些资料整理一下,以备使用.if (想看使用方法) goto 使用方法: 对于一个系统来讲,会有很多的外 ...
- 异常、Throwable、finally、File类(十九)
1.异常的概述和分类 * A:异常的概述 * 异常就是Java程序在运行过程中出现的错误.* B:异常的分类 * 通过API查看Throwable * Error * 服务器宕机,数据库崩溃等 * E ...
- sublime text3 3176激活
更改hosts sudo vim /etc/hosts 127.0.0.1 www.sublimetext.com 127.0.0.1 license.sublimehq.com 输入激活码 ---- ...
- [原创]java调用PageOffice生成word
一.在开发OA办公或与文档相关的Web系统中,难免会遇到动态生成word文档的需求,为了解决工作中遇到导出word文档的需求,前一段时间上网找了一些资料,在word导出这方面有很多工具可以使用,jac ...
- codeforces 673D D. Bear and Two Paths(构造)
题目链接: D. Bear and Two Paths time limit per test 2 seconds memory limit per test 256 megabytes input ...
- Watir: 如果安装sougou浏览器，有可能导致Watir不能工作
如果安装了搜狗,Watir::Browser.new并不一定能打开新的IE浏览器.这种情况下,必须卸载搜狗浏览器,当然,attach,find方法还是可以用的
- iphone 在设置了initial-scale=1 之后，在设置滚动条之后，没有滑动效果的解决办法
iphone在设置了initial-scale=1 之后,我们终于可以以1:1 的比例进行页面设计了. 关于viewport,还有一个很重要的概念是:iphone 的safari 浏览器完全没有滚动条 ...
- DELL R730服务器配置RAID及安装服务器系统 以及域的控制
https://wenku.baidu.com/view/ad45d85a9ec3d5bbfd0a74d9.html
- Linux中的gdb调试方法总结
- codeforces 611C
题意: 给你一个矩阵,矩阵里有" . "和" # "," . "表示空的," # "表示禁止的. 多米诺骨牌将占据正好有 ...