新手玩CSS中的一些黑科技，新手css科技

最後更新：2017-11-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

哎哎

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>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群提問，群裡每天還會更新一些學習資源。禁止閑聊，非喜勿進。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More