欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css陰影詳解之Box-shadow修飾性屬性詳解

  發(fā)布時(shí)間：2024-08-13 16:49:45   作者：喵喵醬仔__   我要評論
Box-shadow屬性是css效果非常實(shí)用的修飾效果，可以在很多地方見到它的影子，這篇文章主要介紹了css陰影詳解之Box-shadow修飾性屬性詳解,需要的朋友可以參考下

Box-shadow屬性是css效果非常實(shí)用的修飾效果，可以在很多地方見到它的影子。

知乎中的Box-shadow

百度中的Box-shadow

所以，來詳細(xì)看一下Box-shadow的參數(shù)：

box-shadow:（inset）2px 2px 5px #000;

其中有六個(gè)參數(shù)，分別為

inset:內(nèi)陰影/外陰影，

2px 2px （陰影偏移位置），

5px（陰影模糊程度），

5px（陰影長度擴(kuò)展），

#000（顏色）

接下來看一些常用的實(shí)例：

<div style="
box-shadow:2px 2px 5px #000;
border-radius:10px;
">
</div>

陰影位置向right和bottom偏移了2px，使其獲得立體感。

<div style="
box-shadow:0px 0px 10px #000;
border-radius:10px;
">
</div>

陰影位置不進(jìn)行偏移，模糊范圍10px。

還可以在模糊范圍后加上一個(gè)像素值，用來表示陰影擴(kuò)展長度的 值：

<div style="
box-shadow:0px 0px 10px 10px #000;
border-radius:10px;
">
</div>

擴(kuò)展長度值為正；

<div style="
box-shadow:0px 0px 10px -10px #000;
border-radius:10px;
">
</div>

擴(kuò)展長度值為負(fù)，可以用來模擬展示效果。

我們還可以用多組陰影屬性來模擬動(dòng)漫效果：

<div style="
box-shadow:0px 0px 0px 3px #000,
           0px 0px 0px 6px #2e56bf,
           0px 0px 0px 9px #ea982e;
border-radius:10px;
">
</div>

三重陰影，制造動(dòng)漫描邊效果。

使用偽元素創(chuàng)造陰影效果,可以實(shí)現(xiàn)非常逼真的真實(shí)感:

<div class="box shadow"></div>
<style>
.box {  margin:10px auto;
	width: 180px;
	height: 90px;
	background: #ccc;
	border-radius: 10px;
}
.shadow {
	position: relative;
	max-width: 270px;
	box-shadow: 0px 1px 4px rgba(0,0,0,0.3),
	0px 0px 20px rgba(0,0,0,0.1) inset;
}
.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
}
.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
}
.shadow::before,
.shadow::after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   transform:rotate(-4deg);
}
.shadow::after{
   right:10px;
   left:auto;
   transform:rotate(3deg);
 }
</style>

到此這篇關(guān)于css陰影詳解之Box-shadow修飾性屬性詳解的文章就介紹到這了,更多相關(guān)css Box-shadow修飾性屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • CSS3里box-shadow屬性的使用方法示例詳解

    這篇文章主要介紹了CSS3里box-shadow屬性的使用方法示例詳解,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧需要的朋友可以參
    2020-07-03

  • CSS陰影效果的比較之drop-Shadow與box-Shadow

    這篇文章主要介紹了CSS陰影效果的比較之drop-Shadow與box-Shadow，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小
    2019-05-23

  • css box-shadow實(shí)現(xiàn)曲邊陰影與翹邊陰影

    這篇文章主要介紹了css box-shadow實(shí)現(xiàn)曲邊陰影與翹邊陰影,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-05

  • Photoshop投影與CSS中box-shadow的轉(zhuǎn)換

    box-shadow是給元素塊添加周邊陰影效果，本文給大家介紹Photoshop投影與CSS中box-shadow的轉(zhuǎn)換，對css中box shadow相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2015-11-27

  • CSS偽元素 :before, :after, box-shadow應(yīng)用

    利用CSS偽元素 ：before 和 ：after 可以在文檔前后插入內(nèi)容而不改變文檔原有結(jié)構(gòu)，下面有個(gè)不錯(cuò)的示例，大家可以參考下
    2014-03-04

  • ie-css3.htc 讓IE6, 7, and 8也支持box-shadow

    IE6/7并不支持CSS3的屬性，IE8也不能很好的支持CSS3。如何讓IE 6/7/8支持border-radius (rounded)，box-shadow ( shadow)，text-shadow等這些屬性呢？這里介紹一個(gè)通過htc
    2012-10-12

  • css box-shadow陰影不透明的解決辦法

    你在使用box-shadow來實(shí)現(xiàn)陰影效果的時(shí)候，有沒有注意到有些情況下，陰影并不是透明的效果
    2011-08-28

  • CSS text-shadow，box-shadow，border-radius屬性

    篇文章將對 CSS 的幾個(gè)新屬性 (text-shadow，box-shadow，and border-radius) 做基本介紹。這些 CSS3 屬性通常用來加強(qiáng)頁面布局。
    2010-03-09

最新評論