資訊專欄INFORMATION COLUMN
摘要：是的一半半徑至少設(shè)置為的值是向盒子添加陰影。我們來看下語法軸偏移量軸偏移量陰影模糊半徑陰影擴(kuò)展半徑陰影顏色投影方式參數(shù)介紹注意可以寫在參數(shù)的第一個(gè)或最后一個(gè)，其它位置是無效的。如效果邊框?yàn)檫吙驊?yīng)用圖片
border-radius是向元素添加圓角邊框。
使用方法：
border-radius:10px;/* 所有角都使用半徑為10px的圓角 */
border-radius: 5px 4px 3px 2px;/* 四個(gè)半徑值分別是左上角、右上角、右下角和左下角，順時(shí)針 */
實(shí)心上半圓：
方法：把高度(height)設(shè)為寬度（width）的一半，并且只設(shè)置左上角和右上角的半徑與元素的高度一致（大于也是可以的）。
div{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0; /*半徑至少設(shè)置為height的值*/
}
box-shadow是向盒子添加陰影。支持添加一個(gè)或者多個(gè)。
很簡單的一段代碼，就實(shí)現(xiàn)了投影效果，酷斃了。我們來看下語法：
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴(kuò)展半徑] [陰影顏色] [投影方式];
參數(shù)介紹：
注意：inset 可以寫在參數(shù)的第一個(gè)或最后一個(gè)，其它位置是無效的。
x軸向右為正，y軸向下為正
陰影模糊半徑與陰影擴(kuò)展半徑的區(qū)別
陰影模糊半徑：此參數(shù)可選，其值只能是為正值，如果其值為0時(shí)，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴(kuò)展半徑：此參數(shù)可選，其值可以是正負(fù)值，如果值為正，則整個(gè)陰影都延展擴(kuò)大，反之值為負(fù)值時(shí)，則縮?。?/p>
為元素設(shè)置外陰影：
示例代碼：
.box_shadow{box-shadow:4px2px6px#333333;}
效果：
為元素設(shè)置內(nèi)陰影：
示例代碼：
.box_shadow{box-shadow:4px2px6px#333333inset;}
效果：
添加多個(gè)陰影：
以上的語法的介紹，就這么簡單，如果添加多個(gè)陰影，只需用逗號隔開即可。如：
.box_shadow{
box-shadow:4px 2px 6px #f00,-4px -2px6px #000,0px 0px 12px 5px #33CC00 inset;}
效果：
CSS3邊框 為邊框應(yīng)用圖片 border-image
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112841.html
摘要：不在指定漸變區(qū)域的，以距離其最近的顏色填充。設(shè)置漸變?yōu)閺挠业阶?。這是默認(rèn)值，等同于留空不寫。最后奉上一碗純拉面。 Talk is cheap.Show me the code. 1.box-shadow showImg(https://segmentfault.com/img/bVypxt); .chopsticks{ position: absolute; ...
摘要：原文第一次發(fā)文章，比較激動(dòng)。其實(shí)簡單點(diǎn)的話直接在里面定好動(dòng)畫規(guī)則就行了時(shí)針秒旋轉(zhuǎn)度，分針秒針以此類推。好了，以上代碼我已經(jīng)放在了上就這些了，獻(xiàn)個(gè)丑，各位輕拍 原文：http://margox.me/css3clock.html 第一次發(fā)文章，比較激動(dòng)。 本碼農(nóng)長期浸淫于Dribbble等設(shè)計(jì)師網(wǎng)站，看到那些好看的設(shè)計(jì)作品就非常激動(dòng)，但是無奈PS不精通，AI也早忘光了，只不過對...
摘要：陰影距離原位置的垂直位移，正數(shù)表示向下移動(dòng)，負(fù)數(shù)表示向上移動(dòng)。實(shí)現(xiàn)原理純個(gè)人理解創(chuàng)建一個(gè)與元素尺寸一致的陰影盒子將陰影盒子定位到于元素重合，并位于元素之上水平和垂直各畫兩條線，分別跟元素重合共條分別記為根據(jù)和移動(dòng)。 前言 說起box-shadow那第一個(gè)想法當(dāng)然就是用來實(shí)現(xiàn)陰影，其實(shí)它還能用于實(shí)現(xiàn)其他好玩的效果的，本篇就打算說說box-shadow的那些事。 二話不說看效果 showI...
閱讀 797·2019-08-30 15:55
閱讀 1542·2019-08-30 15:52
閱讀 2702·2019-08-30 15:44
閱讀 2124·2019-08-30 11:14
閱讀 2633·2019-08-29 13:59
閱讀 1835·2019-08-29 13:45
閱讀 1022·2019-08-29 13:21
閱讀 3384·2019-08-26 13:31
