《CSS3揭秘》上（邊框，投影，漸變，條紋效果，螞蟻行軍）
最近看了《CSS3揭秘》一書，里面真的是干貨滿滿呀，現將常用到的一些技巧歸納總結，便於日后用到查找。不得不感嘆學無止境哦~ 1、邊框與背景 半透明邊框 技巧歸納：使用背景剪切屬性，將背景的顯示不包含邊框 background-clip：對背景進行剪切，這個是根據css的盒模型分 ...
原文：[css 揭秘]：CSS揭秘 技巧（二）：多重邊框
我的github地址：https: github.com FannieGirl ifannie 源碼都在這上面哦 喜歡的給我一個星吧 多重邊框 問題：我們通常希望在css代碼層面以更靈活的方式來調整邊框樣式 方案一：box shadow 目前為止，我們大多數人可能已經用過 或者濫用過 box shadow來生成投影，不太為人之的是，它還接受四個參數 擴張半徑 ，通過制定正值或負值，可以讓投影面積加 ...
2017-02-20 19:16 0 1339 推薦指數：
相關推薦
《CSS揭秘》筆記（一）
前言 我們在現代 CSS 中所面臨的挑戰已經不在於如何繞過這些轉瞬即逝的瀏覽器 bug。如今的挑戰是，在保證 DRY ① 、可維護、靈活性、輕量級並且盡可能符合標准的前提下，把我們手中的這些CSS特性轉化為網頁中的各種創意。這正是這本書將要呈現的內容。——引用自前言 ①DRY ...
[CSS揭秘]切角效果
將角切掉也是一種流行的設計風格 傳統解決方案可能是使用三角形或者其他形狀的圖片來蓋住邊角從而模擬切角效果 有了CSS3,我們完全可以使用新技術來實現 第一種方案: CSS漸變 需求一: 一個矩形需要切掉一個45°角 使用線性漸變來實現 background: #58a ...
《css3揭秘》的效果code
1.在閱讀css3揭秘的基礎上，跟着書中的效果組合起來的這組代碼。 2.代碼中有四張圖片分別是 1.jpg 2.jpg 3.jpg 4.jpg; 作為demo，圖片名稱沒有語義。 3.兼容性： IE上有部分並不兼容，Edge，FF，chrome沒有問題。 4.下面是一個選擇器的實現 ...
《css揭秘》下（偽元素，文字背景，垂直居中技巧，文字環繞）
本篇主要記錄《CSS3揭秘》一書中后面幾章的常用技巧。 1、偽元素換行 先看下HTML代碼，如下 默認顯示效果： 一般情況下，我們喜歡直接在第一個span元素后面加個換行符<br>，但是它對於語義來說並不友好,或者將第一個span設置成塊元素。這里說的換行技巧是使用 偽 ...
[CSS揭秘]擴大可點擊區域
目的: 想給一個簡單的小按鈕擴大其熱區在四個方向上均向外擴張10px 解決方案: 1. 常規的解決方案可能是設置一圈透明邊框。 border: 10px solid transparent; 2. 但是如果按鈕有背景色，那么邊框很可能會擴大按鈕的可視尺寸。於是可以采用 ...
CSS實現多重邊框和內凹圓角
CSS實現多重邊框 CSS實現內凹圓角的思路【截圖來自慕課網】： ...
【基礎】CSS實現多重邊框的5種方式
簡言 目前最優雅地實現多重邊框的方案是利用CSS3 的 box-shadow屬性，但如果要兼容老的瀏覽器，則需要選擇其它的方案。本文簡要地列舉了幾種多重邊框的實現方案，大家可以根據項目實際及兼容性要求等情況，選擇最適合的實現方案。 1 利用描邊(outline)屬性 方案1利用描 ...