哎哎 1、滑鼠移進網頁里，不見了= = 2、簡單的文字模糊效果 3、多重邊框 4、實時編輯CSS 5、CSS中簡單運算 6、border-radius 因為基本上很多人都是這麼用的： 稍微高端一點的是這樣的： v v 然而，終極黑科技是這樣用的： border-radius 它可以賦8個值：斜線前面 ...
哎哎
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;
}
v
然而，終極黑科技是這樣用的：
.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 ;
}
調節該屬性值的大小你就可以看到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群提問，群里每天還會更新一些學習資源。禁止閑聊，非喜勿進。
