CSS中添加阴影的方法有哪些
在CSS中添加阴影的方法有三种，box-shadow、drop-shadow以及text-shadow，box-shadow添加阴影最简单，drop-shadow可以根据图像大小添加阴影，text-shadow为文字添加阴影，下面我们就来看看这三种阴影添加的方法。
使用box-shadow添加阴影
使用CSS添加阴影时，box-shadow是最常用的方法。
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影的大小 阴影的颜色;水平位置和垂直位置指定阴影显示的位置
根据正值和负值，位置将如下变化。
水平位置：正值：右，负值：左
垂直位置：正值：底部，负值：上部
阴影的模糊距离和阴影的范围是决定阴影外观的数值。
所有数值单位都是px。
我们来看具体的示例
代码如下
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="sample.css" />
</head>
<body>
<img src="img/girl.jpg" class="sample-box-shadow" >
</body>
</html>CSS
.sample-box-shadow{
box-shadow: 10px 10px 15px -10px;
}运行效果如下
通过以上这种方式，可以轻松地为图像添加阴影。
如何使用drop-shadow根据图像大小添加阴影？
filter: drop-shadow(左右的阴影 上下的阴影 模糊距离 阴影颜色);左右位置以及上下位置是指定原始图像的阴影位置的数字。
模糊条件指定轮廓的阴影的模糊程度，所有的单位都是px
drop-shadow与box-shadow的最大区别在于，您可以根据图像的大小设置阴影。
显示box-shadow和drop-shadow之间的差异：
这是一种非常有用的强调图像本身的方法，因为它可以像上面的图像一样为图像添加阴影
如何使用text-shadow为文字添加阴影？
这是一种为文字添加阴影的方法
用法如下
text-shadow:水平阴影 垂直阴影 模糊程度 阴影颜色;我们来看一个具体的示例
代码如下
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="sample.css" />
</head>
<body>
<p class="sample-text-shadow" style="font-size: 40px">Text-Shadow-Sample</p>
</body>
</html>CSS
.sample-text-shadow{
text-shadow:1px 3px 3px #513c3c;
}运行效果如下
绛旓細瑕佸湪HTML鐨勫厓绱涓坊鍔犻槾褰鏁堟灉锛屼綘鍙互浣跨敤CSS鐨box-shadow灞炴с俠ox-shadow灞炴т娇浣犺兘澶熷湪鍏冪礌鍛ㄥ洿鍒涘缓涓涓垨澶氫釜闃村奖鏁堟灉銆備互涓嬫槸涓浜涚ず渚嬩唬鐮侊紝婕旂ず濡備綍浣跨敤box-shadow灞炴ф潵娣诲姞闃村奖鏁堟灉锛氬湪涓婇潰鐨勭ず渚嬩腑锛屾垜浠垱寤轰簡涓や釜鍏冪礌锛屼竴涓叿鏈夊闃村奖鏁堟灉锛屽彟涓涓叿鏈夊唴闃村奖鏁堟灉銆備笅闈㈡槸box-shadow灞炴х殑涓浜涘弬鏁...
绛旓細box-shadow 灞炴--璁剧疆鍏冪礌闃村奖 瀹炰緥锛 鍚 div 鍏冪礌娣诲姞 box-shadow <!DOCTYPE html> div{ width:300px; height:100px; background-color:#ff9900; -moz-box-shadow: 10px 10px 5px #888888; /* 鑰鐨 Firefox */ box-shadow: 10px 10px 5px #888888; } ...
绛旓細娌℃湁鏁板艰寖鍥鐨鏃跺欓鑹插潎鍒,浠庡渾蹇冨紑濮嬪埌鐭╁舰鏈杩滅殑鐐瑰潎鍒嗛鑹,鐒跺悗缁曞渾蹇冪敾鍦嗘煋鑹,鏀寔寰堝寰堝棰滆壊 瀹炰緥:鍘熺偣鏀惧皠娓愬彉鐨勫浘鍍忋傚畠绫讳技浜庡苟涓旈噰鍙栫浉鍚岀殑璁烘嵁锛屼絾瀹冮噸澶嶆棤闄愬湴鍦ㄥ悇涓柟鍚戜笂鍋滄棰滆壊浠ヨ鐩栨暣涓鍣ㄣ傛笎鍙樺钩閾 repeating- 娓愬彉灞炴 浜嗚В涓涓 缁欑洅瀛娣诲姞闃村奖琛ㄧ幇鏁堟灉锛屼豢浣涙湁鍏夋墦鍒扮洅瀛愪笂 ...
绛旓細闃村奖: 閫氳繃鍚堢悊娣诲姞闃村奖鍙互浣垮钩闈㈢綉椤靛唴瀹规樉绀哄嚭绔嬩綋鐨勬晥鏋 1銆 box-shadow锛氱洅瀛愰槾褰 (1) 闃村奖鍦▁杞存柟鍚戠殑鍋忕Щ, 姝ｅ彸璐熷乏 (2) 闃村奖鍦▂杞存柟鍚戠殑鍋忕Щ, 姝ｄ笅璐熶笂 (3) 闃村奖鐨妯＄硦搴, 鏁板艰秺澶, 闃村奖瓒婃ā绯 (4) 闃村奖鐨勮寖鍥, 鏁板艰秺澶, 闃村奖瓒婂ぇ (5) 闃村奖棰滆壊 (6) ...
绛旓細2銆佸湪test.html鏂囦欢鍐咃紝缁檇iv娣诲姞涓涓猚lass灞炴э紝灞炴у艰缃负myway銆3銆佺劧鍚鍦╟ss鏍囩鍐咃紝閫氳繃class璁剧疆div鐨勬牱寮忥紝瀹氫箟瀹冪殑瀹藉害涓200px锛岄珮搴︿负200px锛岃儗鏅鑹蹭负榛戣壊銆4銆佹帴鐫鍦╟ss鏍囩鍐咃紝鍐嶄娇鐢╞ox-shadow灞炴ц缃甦iv鐨勯槾褰鏁堟灉锛屽叾涓紝宸﹁竟闃村奖涓虹豢鑹诧紝椤堕儴闃村奖涓鸿摑鑹诧紝搴曢儴闃村奖涓虹孩鑹诧紝鍙宠竟闃村奖涓...
绛旓細閭ｄ箞锛岄檷浣庝寒搴︿技涔庝篃瀵归ケ鍜屽害鏈夊奖鍝嶆槸涓嶆槸鏈夌偣濂囨紵杩欎釜闂浠ュ悗鏈夋椂闂寸粰澶у缁嗚銆傚湪鏈枃涓紝鎴戜滑涓鐩村湪浣跨敤 box-shadow 灞炴с box-shadow 鏄竴涓緢濂界殑鍏ㄩ潰宸ュ叿锛屼絾瀹冧笉鏄垜浠鍦 CSS 涓鍞竴鐨闃村奖閫夐」銆😮鐪嬬湅 filter: drop-shadow 锛氳娉曞嚑涔庣浉鍚岋紝浣嗗畠浜х敓鐨勯槾褰变笉鍚屻傝繖鏄洜涓 filter...
绛旓細浣犲ソ锛屾牴鎹綘鐨勬弿杩帮紝鍙互濡備笅璁剧疆锛氶氳繃鏍峰紡text-shadow鏉ヨ缃枃瀛楅槾褰憋紝涓巄ox-shadow璁剧疆鐩掑瓙闃村奖绫讳技銆傝娉曪細text-shadow: h-shadow v-shadow blur color;鍙傛暟瑙ｉ噴锛歨-shadow锛 璁剧疆姘村钩闃村奖鐨浣嶇疆锛坸 杞存柟鍚戯級锛屽繀闇瑕佽缃殑鍙傛暟锛涘厑璁歌礋鍊笺倂-shadow 锛 璁剧疆鍨傜洿闃村奖鐨勪綅缃紙y 杞存柟鍚戯級锛屽繀闇瑕佽缃...
绛旓細渚嬪锛歩ndex.html銆2銆佸湪index.html涓鐨鏍囩涓紝杈撳叆css浠ｇ爜锛歞iv{width: 300px;height: 150px;border: 3px solid blue;border-radius: 0 0 30px 30px;box-shadow: 0 7px 7px -7px #5E5E5E;} 3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃跺疄鐜颁簡div鍙湁搴曢儴鏈夊渾瑙掑拰闃村奖鏁堟灉銆
绛旓細璁捐甯堝父甯镐娇鐢ㄤ竴浜涚嫭鐗圭殑瀛椾綋鏁堟灉鍜岄〉闈㈡晥鏋滐紝闃村奖鏄叾涓竴涓紝瀹冨彲浠ヨ椤甸潰涓殑鏂囧瓧鍜屽厓绱犲叿鏈夌珛浣撶殑鏁堟灉锛屼粠鑰岃绐佸嚭鍑烘潵銆傛瘮濡傚浜庢枃瀛楅槾褰憋紝浼犵粺鐨勬柟娉鍙兘闇瑕佸皢鏂囧瓧鍒囧嚭鏉ワ紝鐩存帴浣跨敤鍥剧墖锛屽鏋滆冭檻SEO鍜岀綉绔欐ц兘锛岃繕鍙兘浼氫娇鐢CSS Sprites绛夋妧鏈皢鍥剧墖鏁村悎锛歔code]h2{ background:url(sprites.png) no...
绛旓細鍥炵瓟锛氬彲浠鐨銆俿ublime text2鏄釜浠ｇ爜缂栬緫鍣紝鍙互閫氳繃css鏉ヨ缃闃村奖銆傞槾褰辨晥鏋滀唬鐮侊細闃村奖鏁堟灉鍥撅細瀹炵幇鍘熺悊锛歜ox-shadow:10px 10px 5px #444;闃村奖鈥斺旈槾褰卞悜涓20PX锛涘悜鍙10px;鎵╂暎锛5px;棰滆壊涓#ccc
