box-shadow属性是什么？
box-shadow 属性接受值最多由五个不同的部分组成：offset-x；offset-y；blur；spread；color；position。
1、offset-x
第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。
2、offset-y
第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。
4、blur
第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用 高斯模糊 滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0。
5、spread
第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。
6、color
color 部分的值正如所预料的，是指阴影的颜色，可以是任意的颜色单元 。
7、position
此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影。
box-shadow的作用：
box-shadow是css3的一个新属性，用来实现阴影效果，阴影分为内阴影和外阴影两个效果，可以通过逗号添加多个阴影效果。通过对box-shadow使用的理解，想要一个div的四周都有阴影的话，可通过box-shadow的四周阴影叠加来实现。
box-Shadow属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
绛旓細box-shadow鏄痗ss3鐨勪竴涓柊灞炴э紝鐢ㄦ潵瀹炵幇闃村奖鏁堟灉锛岄槾褰卞垎涓哄唴闃村奖鍜屽闃村奖涓や釜鏁堟灉锛屽彲浠ラ氳繃閫楀彿娣诲姞澶氫釜闃村奖鏁堟灉銆傞氳繃瀵筨ox-shadow浣跨敤鐨勭悊瑙ｏ紝鎯宠涓涓猟iv鐨勫洓鍛ㄩ兘鏈夐槾褰辩殑璇濓紝鍙氳繃box-shadow鐨勫洓鍛ㄩ槾褰卞彔鍔犳潵瀹炵幇銆俠ox-Shadow灞炴ф妸涓涓垨澶氫釜涓嬫媺闃村奖娣诲姞鍒版涓娿傝灞炴ф槸涓涓敤閫楀彿鍒嗛殧闃村奖鐨勫垪...
绛旓細box-shadow鏄疌SS涓殑涓绉嶅睘鎬э紝鐢ㄤ簬鍦ㄥ厓绱犲懆鍥村垱寤轰竴涓槾褰辨晥鏋滄剰鎬銆傜煡璇嗘嫇灞曪細box-shadow鏄疌SS3涓柊澧炵殑灞炴э紝鐢ㄤ簬缁欏厓绱犳坊鍔犱竴涓洅瀛愰槾褰辨晥鏋溿傞氳繃璁剧疆闃村奖鐨勯鑹层佹ā绯婅窛绂汇佹墿灞曡窛绂诲拰鏂瑰悜绛夊弬鏁帮紝鍙互瀹炵幇涓嶅悓绫诲瀷鐨勯槾褰辨晥鏋滐紝浠庤屼负椤甸潰鍏冪礌澧炲姞灞傛鎰熷拰绔嬩綋鎰熴俠ox-shadow鐨勮娉曟牸寮忎负锛歜ox-shadow锛...
绛旓細box-shadow锛氱粰鍏冪礌鍧楁坊鍔犲懆杈归槾褰辨晥鏋銆 璇硶锛歜ox-shadow: h-shadow v-shadow blur spread color inset;杩樻湁鍙︿竴绉嶆儏鍐碉細 box-shadow: 0 2px 2px #FECC84 褰撴垜浠湪鑹插煎墠鍙啓浜嗕笁涓暟鍊肩殑鎯呭喌涓嬶紝鍒欑涓変釜鍊兼槸 blur 锛堟ā绯婅窛绂伙級銆傚埄鐢ㄩ槾褰卞睘鎬э紝涔熷彲浠ュ疄鐜板杈规鐨勬晥鏋滐細褰撴垜浠啀涓哄畠...
绛旓細瑕佸湪HTML鐨勫厓绱犱腑娣诲姞闃村奖鏁堟灉锛屼綘鍙互浣跨敤CSS鐨刡ox-shadow灞炴сbox-shadow灞炴т娇浣犺兘澶熷湪鍏冪礌鍛ㄥ洿鍒涘缓涓涓垨澶氫釜闃村奖鏁堟灉銆備互涓嬫槸涓浜涚ず渚嬩唬鐮侊紝婕旂ず濡備綍浣跨敤box-shadow灞炴ф潵娣诲姞闃村奖鏁堟灉锛氬湪涓婇潰鐨勭ず渚嬩腑锛屾垜浠垱寤轰簡涓や釜鍏冪礌锛屼竴涓叿鏈夊闃村奖鏁堟灉锛屽彟涓涓叿鏈夊唴闃村奖鏁堟灉銆備笅闈㈡槸box-shadow灞炴х殑涓浜涘弬鏁...
绛旓細box-shadow: 姘村钩闃村奖 鍨傜洿闃村奖 妯＄硦璺濈 闃村奖鐨勫ぇ灏 闃村奖鐨勯鑹;姘村钩浣嶇疆鍜屽瀭鐩翠綅缃寚瀹氶槾褰辨樉绀虹殑浣嶇疆鏍规嵁姝ｅ煎拰璐熷硷紝浣嶇疆灏嗗涓嬪彉鍖栥傛按骞充綅缃細姝ｅ硷細鍙筹紝璐熷硷細宸﹀瀭鐩翠綅缃細姝ｅ硷細搴曢儴锛岃礋鍊硷細涓婇儴闃村奖鐨勬ā绯婅窛绂诲拰闃村奖鐨勮寖鍥存槸鍐冲畾闃村奖澶栬鐨勬暟鍊笺傛墍鏈夋暟鍊煎崟浣嶉兘鏄痯x銆傛垜浠潵鐪嬪叿浣撶殑绀轰緥浠ｇ爜濡備笅HTML...
绛旓細涓冦乥order-image灞炴 border-image锛氬皢鍥剧墖瑙勫畾涓哄寘鍥 div 鍏冪礌鐨勮竟妗 border-image鍩虹璇硶锛歜order-image: url(border.png) 30 30 round鍏box-shadow灞炴 box-shadow灞炴э細鍚戞娣诲姞涓涓垨澶氫釜闃村奖銆傦紙鐩掗槾褰憋級box-shadow鍩虹璇硶锛歜ox-shadow: 10px 10px 5px #888888涔濄佸獟浣撴煡璇 濯掍綋鏌ヨ瀹氫箟...
绛旓細瀛樺湪銆俠oxshadow鏀寔鎵鏈夋祻瑙堝櫒瀛樺湪鍏煎鎬ч棶棰橈紝鐢变簬鍔爄nset鍓嶇紑鍚庯紝宸﹀彸涓よ竟閮芥湁鍐呴槾褰憋紝濡傛灉涓嶅姞inset宸﹀彸涓よ竟閮芥湁澶栭槾褰憋紝boxshadow鏄css3鐨勪竴涓柊灞炴锛岀敤鏉ュ疄鐜伴槾褰辨晥鏋溿
绛旓細杈规闃村奖锛box-shadow锛夛細鍙互缁欒竟妗嗘坊鍔犻槾褰辨晥鏋滐紝浣块〉闈㈢湅璧锋潵鏇村姞绔嬩綋銆傝竟妗嗙殑浣嶇疆锛坆order-position锛夛細鍙互璁剧疆杈规鐨勪綅缃紝渚嬪鍙互鍙粰椤甸潰鐨勯《閮ㄣ佸簳閮ㄣ佸乏渚ф垨鍙充晶娣诲姞杈规銆備互涓婃槸椤甸潰甯冨眬涓彲浠ヨ缃殑椤甸潰杈规鐩稿叧鐨灞炴锛岄氳繃鍚堢悊鐨勮缃繖浜涘睘鎬э紝鍙互瀹炵幇涓嶅悓鏍峰紡鍜屾晥鏋滅殑椤甸潰杈规銆
绛旓細box-shadow 浠ョ敱閫楀彿鍒嗛殧鐨勫垪琛ㄦ潵鎻忚堪涓涓垨澶氫釜闃村奖鏁堟灉銆傝灞炴璁╀綘鍙互瀵瑰嚑涔庢墍鏈夊厓绱犵殑杈规浜х敓闃村奖銆傚鏋滃厓绱犲悓鏃惰缃簡 border-radius 锛岄槾褰变篃浼氭湁鍦嗚鏁堟灉銆傚涓槾褰辩殑z-ordering 鍜屽涓 text shadows 瑙勫垯鐩稿悓(绗竴涓槾褰卞湪鏈涓婇潰)銆 inset 榛樿闃村奖鍦ㄨ竟妗嗗銆傚弬鏁帮細<offset-x> ...
绛旓細澶у閮界煡閬box-shadow鏄h5鏂板灞炴锛岀敤鏉ュ疄鐜扮洅瀛愯竟缂樻湁闃村奖鐨勬晥鏋滐紝浣嗙粡甯镐細鐪嬭璁稿鍦烘櫙閲岄槾褰辩殑鏍峰紡鍚勭鍚勬牱锛屽苟涓嶆槸绠鍗曠殑鍥涘懆鏈夐槾褰辩殑鏁堟灉锛屽畠浠槸鎬庝箞瀹炵幇鐨勫憿锛屼粖澶╁氨璺熷ぇ瀹跺垎浜袱绉嶉槾褰卞疄鐜扮殑鏂规硶銆備竴銆佹洸杈归槾褰辨晥鏋滃浘濡備笅锛氬畠涓嶄粎鏄洓鍛ㄦ湁闃村奖锛屼笅閮ㄨ繕鏈変竴灞傛洸杈圭殑闃村奖锛屽畠鐨勫師鐞嗗叾瀹炲緢绠鍗曪紝棣栧厛...
