要求
drop-shadow效果，其實就是大家熟悉的內容盒子陰影效果，在沒有css3之前，大家都是通過photoshop製作。而有了css3後，我們只需要利用box-shadow配合兩個偽元素:before和:after即可實現。首先我們需要給內容盒子新增相對定位屬性，然後給其新增兩個偽元素 :before和:after ，在偽元素上新增絕對定位屬性和z-index屬性，將其定位到盒子的底部。
photoshop製作drop-shadow效果:
css3 製作drop-shadows效果:
1，在body中新增html標籤
<2，給盒子新增基本樣式div
class
="box"
>licheng
div>
.box3，給盒子新增偽元素：before和 :after,新增盒子陰影和transform屬性，到目前我們只得到了盒子左邊的陰影。
.box:before,4，改變 :after 偽元素的方向，獲得右邊陰影。.box:after
.box:after最終效果如下:
如以上文章或鏈結對你有幫助的話，別忘了在文章結尾處輕輕點選一下 「還不錯」按鈕或到頁面右下角點選 「贊乙個」 按鈕哦。你也可以點選頁面右邊「分享」懸浮按鈕哦，讓更多的人閱讀這篇文章。
出處:
CSS3 CSS3外輪廓屬性
外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似，但和元素邊框border完全不同，外輪廓線不占用網頁布局空間，不一定是矩形，外輪廓是屬於一種動態樣式，只有元素獲取到焦點或者被啟用時呈現。outline屬性早在css2中就出現了，主要是用來在元素周圍繪製一條輪廓線，可以起到...
css3 css的3種引入方式
你好！這是你第一次使用css所需要了解的知識點。如果你想學習如何使用css,可以仔細閱讀這篇文章，了解一下css的基本語法知識。css的引入方式共有三種 行內樣式 內部樣式表 外部樣式表。使用style屬性引入css樣式。示例 直接在html標籤中設定的樣式 實際在寫頁面時不提倡使用，在測試的時候可...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...