這篇文章主要講解了“實(shí)用的CSS代碼段有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“實(shí)用的CSS代碼段有哪些”吧！

目前創(chuàng)新互聯(lián)已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、惠東網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

文字加載...動(dòng)畫

html

正在加載中<dot>...</dot>

css

dot{   display: inline-block;   height: 1em;   line-height: 1;   text-align: left;   vertical-align: -.25em;   overflow: hidden;  }  dot::before{   display: block;   content: '...\A..\A.';   white-space: pre-wrap;   animation: dot 2s infinite step-start both;  }  @keyframes dot{   33% {   transform: translateY(-2em);   }   66% {   transform: translateY(-1em);   }  }

如果你看上圖代碼沒有看懂，請看下圖，我注釋掉一行代碼，你就明白了。原來是dot元素，沿著Y軸在循環(huán)位移，隱藏掉就讓你看到了加載的動(dòng)畫效果。

border 實(shí)現(xiàn)邊框

當(dāng)你需要這樣一個(gè)上傳文件，按鈕時(shí)，你考慮的是找設(shè)計(jì)弄個(gè)圖片，還是自己寫一個(gè)？？？

其實(shí)CSS寫，也很簡單的。

<a href="javascript:;" class="upload" title="繼續(xù)上傳">添加圖片</a> .upload{   position: relative;   display: inline-block;   width: 76px;   height: 76px;   color: #ccc;   border: 2px dashed; /*邊框虛線*/   text-indent: -12em; /*使其文字看不到*/   transition: color .25s; /*hover事件：顏色漸變動(dòng)畫*/   overflow: hidden;   margin: 50px 100px;  }  /*用before/after偽類做 + 號(hào)樣式*/  .upload:before, .upload:after{   content: '';   position: absolute;   top: 50%;   left: 50%;  }  .upload:hover{   color: #34538b;  }  .upload::before{   width: 20px;   border-top: 4px solid;   margin: -2px 0 0 -10px;  }  .upload::after{   height: 20px;   border-left: 4px solid;   margin: -10px 0 0 -2px;  }

不規(guī)則的投影 filter

當(dāng)我們想給一個(gè)矩形或其他能用 border-radius 生成的形狀加投影時(shí)，用 box-shadow 都可以解決，如下圖：

但是，當(dāng)元素添加了一些偽元素或半透明的裝飾之后，box-shadow就有些 力不從心了，因?yàn)?border-radius 會(huì)無恥地忽視透明部分。這類情況包括下列幾種情況:

1、半透明圖像、背景圖像、或者 border-image(比如老式的金質(zhì)像框);

2、元素設(shè)置了點(diǎn)狀、虛線或半透明的邊框，但沒有背景(或者當(dāng) background-clip 不是 border-box 時(shí));

3、對話氣泡，它的小尾巴通常是用偽元素生成的;

4、幾乎所有的折角效果

5、通過 clip-path 生成的形狀。

下面來看看這個(gè)示例： html代碼

<div class="speech">不規(guī)則的投影</div>

css樣式

div {   position: relative;   display: inline-flex;   flex-direction: column;   justify-content: center;   vertical-align: bottom;   box-sizing: border-box;   width: 8em;   padding: .5em;   height: 5em;   margin: .6em;   background: #0cc071;   color: #fff;   /*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此時(shí)是偽類是沒有陰影的*/   -webkit-filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5));   filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5));  }    .speech {   border-radius: .3em;  }  .speech::before {   content: '';   position: absolute;   top: 1em;   right: -.7em;   width: 0;   height: 0;   border: 1em solid transparent;   border-left-color: #0cc071;   border-right-width: 0;  }

從上圖可以看出box-shadow搞不定的，drop-shadow給搞定了。這是為什么了？

可以很明顯的看出區(qū)別，為什么會(huì)這樣呢？在這里我用的是div標(biāo)簽，大家都知道，div標(biāo)簽是個(gè)塊標(biāo)簽，說白了是個(gè)盒模型，指的是一塊區(qū)域，box-shadow的屬性只能添加到盒模型外面，因此內(nèi)部的東西是不會(huì)添加上的，就變成上圖的樣子，中間還是白色部分。而drop-shadow就不一樣了，他是把所有的非透明區(qū)域都做了陰影效果，就相當(dāng)于一種真正的投影。

css 實(shí)現(xiàn)自適應(yīng)的彈框

經(jīng)常在網(wǎng)頁中看到一些Dialog，例如有些網(wǎng)頁點(diǎn)擊登錄注冊時(shí)就會(huì)跳出一個(gè)彈框來顯示登錄注冊頁面，下面就使用 css 完成一個(gè)可以自適應(yīng)，無論窗口的大小，始終能保持水平垂直居中的dialog。

<div class="c-pupup">   <div class="dialog">   <div class="content">   我是內(nèi)容   </div>   </div>  </div>

css樣式

.c-pupup{   position: fixed;   top:0;   bottom: 0;   left: 0;   right: 0;   background: rgba(0,0,0,.5);   text-align: center;   white-space: nowrap;   z-index: 99;  }  .c-pupup:after{   content: '';   display: inline-block;   height: 100%;   vertical-align: middle;  }  .dialog{   background-color: #fff;   display: inline-block;   vertical-align: middle;   border-radius: 6px;   text-align: left;   white-space: normal;   width: 400px;   height: 250px;  }

感謝各位的閱讀，以上就是“實(shí)用的CSS代碼段有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對實(shí)用的CSS代碼段有哪些這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)頁名稱：實(shí)用的CSS代碼段有哪些
網(wǎng)站網(wǎng)址：http://aaarwkj.com/article44/ipdjee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、建站公司、網(wǎng)站收錄、品牌網(wǎng)站制作、做網(wǎng)站、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)