2. 程式人生 > >box-shadow 製作單邊陰影效果,不影響其它邊的效果

box-shadow 製作單邊陰影效果,不影響其它邊的效果

阿新 • • 發佈：2019-01-27
以前在使用box-shadow製作單邊陰影效果的時候發現或多或少會影響其它邊的展示效果. 今天在閱讀文章的時候,終於發現了一個解決的方法. 就是利用box-shadow中的一個引數.spread來解決這個問題. 首先我們先要區分 box-shadow:0 10px 10px #ccc; box-shadow:0 10px 10px -10px #ccc; 首先,我們應當認知到這兩種書寫方法都是正確的,其次,它們的展示效果肯定是不同的. 關於box-shadow的具體語法: E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
物件選擇器 {text-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色} spread引數可以用於改變陰影的大小,其值可以試正負值,如果值為正,則整個陰影都延展擴大,反之值為負值是縮小. 如圖:

html: <div class="dv1">           </div>           <div class="dv2">           </div> style: .dv1,.dv2{ width: 100px; height: 100px; border: 1px solid #ccc;
 } .dv1{ box-shadow: -5px 0 5px #ccc, /*左邊陰影*/ 0 -5px 5px #ccc, /*頂部陰影*/ 0 5px 5px #ccc, /*底部陰影*/ 5px 0 5px #ccc; /*右邊陰影*/ } .dv2{ box-shadow: -5px 0 5px -5px #ccc, /*左邊陰影*/ 0 -5px 5px -5px #ccc, /*頂部陰影*/ 0 5px 5px -5px #ccc, /*底部陰影*/ 5px 0 5px 1px #ccc; /*右邊陰影*/ } 注意控制第四個spread值來達到顯示單邊陰影的效果.

參考:http://www.w3cplus.com/css3/css3-box-shadows-unnoticed-spread

相關推薦

box-shadow 製作單邊陰影效果,不影響其它邊的效果

以前在使用box-shadow製作單邊陰影效果的時候發現或多或少會影響其它邊的展示效果. 今天在閱讀文章的時候,終於發現了一個解決的方法. 就是利用box-shadow中的一個引數.spread來解決這個問題. 首先我們先要區分 box-shadow:0 10px 10p

css3的box-shadow圖層陰影效果

一. CSS3的box-shadow屬性可以讓我們輕鬆實現圖層陰影效果 box-shadow：length length length length color length：陰影水平偏移值 length：陰影垂直偏移值 length：陰影模糊值 length：陰影邊框

CSS3 box-shadow 設定元素陰影

box-shadow 屬性 box-shadow 屬性可以設定一個或多個下拉陰影的框。即為元素設定陰影效果！ 語法：box-shadow: h-shadow v-shadow blur spread color inset; 值 說明

box-shadow的內外陰影

一般我們設一個框的陰影都是用box-shadow：0px 2px 1px 5px #000;使框的內外都有陰影； 但設定inset會捨棄框外的陰影，留下框內的陰影,渲染盒子內部的 box-shadow:0px 2px 0px 6px inset;

CSS3之------box-shadow屬性使用方法（1），即單邊陰影效果設定

《圖解CSS3：核心技術與案例實戰》第3章CSS3邊框，本章主要介紹CSS3新增的邊框特性，首先從CSS的border屬性著手切入，分別介紹了CSS3新增邊框特性，border-color、border-image、border-radius以及box-shadow。詳細介紹了每個特性的語法規則，並且結合

box-shadow 單邊陰影 雙邊陰影

單邊陰影 box-shadow: -12rpx 0rpx 16rpx -10rpx #ccc; 雙邊陰影 box-shadow: 5px 0px 5px -5px black, -5px 0px 5px -5px black; 陰影半徑很關鍵，為負值 單邊內側陰影：

css3邊框——圓角效果(border-radius)、陰影(box-shadow)、邊框應用圖片(border-image)

1.圓角效果（border-radius） border-radius是向元素新增圓角邊框 使用方法如下：注：下面4個div分別實現了不同的圓角效果 <!DOCTYPE html> <html> <head> <meta chars

盒子陰影——Box-shadow

strong 半徑 類型 web 設定 chrome瀏覽器 瀏覽器 可選 tro box-shadow:陰影水平偏移量 陰影垂直偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色 box-shadow屬性的參數設置取值： 陰影類型：此參數可選。如不設值，默認投影方式是外陰影；如

探索盒子陰影box-shadow

box-shadow 盒子陰影 html css盒子陰影之探索盒子陰影：box-shadow作用；在盒子不同的方位添加你想要的陰影效果。box-shadow有六個參數值，下面一一舉例說明 語法:Box-shadow: offset-x | offset-y | blur | sperd | color| p

【轉】CSS3陰影 box-shadow的使用和技巧總結

x模型 man sco ie瀏覽器 bsp 基礎 mage script www text-shadow是給文本添加陰影效果，box-shadow是給元素塊添加周邊陰影效果。隨著HTML5和CSS3的普及，這一特殊效果使用越來越普遍。 基本語法是{box-shadow:[i

box-shadow陰影詳解

多個 chrom color lur 表示 技術 com .com lac 每次使用box-shadow,都要查閱資料才能實現對應的效果,現在總結一下,方便以後查看。 使用語法： 　　element{box-shadow: inset x-offset y-offset b

css3 box-shadow陰影(外陰影與外發光)講解

希望 不同 實現 了解 內嵌 基礎練習 寫法 www 低版本 基礎說明： 外陰影：box-shadow: X軸 Y軸 Rpx color; 屬性說明（順序依次對應）： 陰影的X軸(可以使用負值) 陰影的Y軸(可以使用負值) 陰影模糊值（

Box-shadow制作漂亮的外陰影輸入框

chrom 內容 如果 效果 iphone pict rom 輸入 以及 背景：之前做項目中的一個移動端頁面，關於在搜索框中輸入信息查找對應的照片。改了幾次ui圖之後，最終的搜索框的設計圖如下： 開始做頁面的時候，就想到了用box-shadow 來實現外陰影邊框、用

CSS3陰影 box-shadow的使用和技巧總結

引入 plain obj 方法 字符 prev track lur percent ext-shadow是給文本添加陰影效果，box-shadow是給元素塊添加周邊陰影效果。隨著html5和CSS3的普及，這一特殊效果使用越來越普遍。 基本語法是{box-shadow:[i

H5C3--邊框陰影box-shadow

inf doctype pad block html div eight 添加 nth 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta chars

【css】box-shadow匹配ps投影效果/text-shadow

csdn tail 實體 換算 sin 距離 css3 .com set 參照資料：http://blog.csdn.net/lpandeng/article/details/72778451 box-shaow: 距離(x-offset y-offset) 虛影(blu

box-shadow陰影 三面顯示

shadow prev 問題 html .com log http preview css3 想弄個只顯示三面的陰影效果，網上一搜沒有解決根本問題，最後還是在css3演示裏面找到方法http://www.css88.com/tool/css3Preview/Box-Shad

邊框陰影box-shadow

邊框的陰影： 引數說明：  box-shadow:1px 2px 3px 4px #ccc inset；   1px 從原點開始，沿x軸正方向的長度（倘若為負值，為沿x軸負方向的長度） 2px 從原點開始，沿y軸正方向的長度；（倘若為負值，為沿y軸負方向的長度） 3p

css box-shadow陰影

box-shadow: h-shadow v-shadow blur spread color inset; http://www.w3school.com.cn/cssref/pr_box-shadow.asp h-shadow 必需。水平陰影的位置。允許

前端基礎學習筆記 滑鼠樣式cursor與盒陰影box-shadow

滑鼠樣式屬性 div{ cursor:default; } 如上程式碼可設定滑鼠劃入div盒子時的滑鼠樣式，滑鼠樣式有以下屬性值： default 箭頭 pointer 小手 wait     等待 text  &n