css中斜向下阴影怎么写,CSS3 文本斜向长阴影

最新推荐文章于 2023-11-11 11:24:59 发布

Nan Chiang

最新推荐文章于 2023-11-11 11:24:59 发布

阅读量502

点赞数

CSS

语言：

CSSSCSS

确定

body{margin:0}

.foo {

text-shadow: 0.66913px 0.74314px 0 #16a085, 1.33826px 1.48629px 0 #16a085, 2.00739px 2.22943px 0 #16a085, 2.67652px 2.97258px 0 #16a185, 3.34565px 3.71572px 0 #16a186, 4.01478px 4.45887px 0 #16a186, 4.68391px 5.20201px 0 #16a186, 5.35304px 5.94516px 0 #16a286, 6.02218px 6.6883px 0 #16a287, 6.69131px 7.43145px 0 #16a287, 7.36044px 8.17459px 0 #16a387, 8.02957px 8.91774px 0 #16a387, 8.6987px 9.66088px 0 #16a387, 9.36783px 10.40403px 0 #16a388, 10.03696px 11.14717px 0 #16a488, 10.70609px 11.89032px 0 #16a488, 11.37522px 12.63346px 0 #16a488, 12.04435px 13.37661px 0 #16a589, 12.71348px 14.11975px 0 #16a589, 13.38261px 14.8629px 0 #16a589, 14.05174px 15.60604px 0 #16a589, 14.72087px 16.34919px 0 #16a68a, 15.39px 17.09233px 0 #16a68a, 16.05913px 17.83548px 0 #16a68a, 16.72827px 18.57862px 0 #17a78a, 17.3974px 19.32177px 0 #17a78a, 18.06653px 20.06491px 0 #17a78b, 18.73566px 20.80806px 0 #17a78b, 19.40479px 21.5512px 0 #17a88b, 20.07392px 22.29434px 0 #17a88b, 20.74305px 23.03749px 0 #17a88c, 21.41218px 23.78063px 0 #17a88c, 22.08131px 24.52378px 0 #17a98c, 22.75044px 25.26692px 0 #17a98c, 23.41957px 26.01007px 0 #17a98d, 24.0887px 26.75321px 0 #17aa8d, 24.75783px 27.49636px 0 #17aa8d, 25.42696px 28.2395px 0 #17aa8d, 26.09609px 28.98265px 0 #17aa8d, 26.76522px 29.72579px 0 #17ab8e, 27.43435px 30.46894px 0 #17ab8e, 28.10349px 31.21208px 0 #17ab8e, 28.77262px 31.95523px 0 #17ac8e, 29.44175px 32.69837px 0 #17ac8f, 30.11088px 33.44152px 0 #17ac8f, 30.78001px 34.18466px 0 #17ac8f, 31.44914px 34.92781px 0 #17ad8f, 32.11827px 35.67095px 0 #17ad90, 32.7874px 36.4141px 0 #17ad90, 33.45653px 37.15724px 0 #18ae90, 34.12566px 37.90039px 0 #18ae90, 34.79479px 38.64353px 0 #18ae90, 35.46392px 39.38668px 0 #18ae91, 36.13305px 40.12982px 0 #18af91, 36.80218px 40.87297px 0 #18af91, 37.47131px 41.61611px 0 #18af91, 38.14044px 42.35926px 0 #18af92, 38.80958px 43.1024px 0 #18b092, 39.47871px 43.84554px 0 #18b092, 40.14784px 44.58869px 0 #18b092, 40.81697px 45.33183px 0 #18b193, 41.4861px 46.07498px 0 #18b193, 42.15523px 46.81812px 0 #18b193, 42.82436px 47.56127px 0 #18b193, 43.49349px 48.30441px 0 #18b293, 44.16262px 49.04756px 0 #18b294, 44.83175px 49.7907px 0 #18b294, 45.50088px 50.53385px 0 #18b394, 46.17001px 51.27699px 0 #18b394, 46.83914px 52.02014px 0 #18b395, 47.50827px 52.76328px 0 #18b395, 48.1774px 53.50643px 0 #18b495, 48.84653px 54.24957px 0 #18b495, 49.51566px 54.99272px 0 #18b496, 50.1848px 55.73586px 0 #19b596, 50.85393px 56.47901px 0 #19b596, 51.52306px 57.22215px 0 #19b596, 52.19219px 57.9653px 0 #19b596, 52.86132px 58.70844px 0 #19b697, 53.53045px 59.45159px 0 #19b697, 54.19958px 60.19473px 0 #19b697, 54.86871px 60.93788px 0 #19b697, 55.53784px 61.68102px 0 #19b798, 56.20697px 62.42417px 0 #19b798, 56.8761px 63.16731px 0 #19b798, 57.54523px 63.91045px 0 #19b898, 58.21436px 64.6536px 0 #19b899, 58.88349px 65.39674px 0 #19b899, 59.55262px 66.13989px 0 #19b899, 60.22175px 66.88303px 0 #19b999, 60.89089px 67.62618px 0 #19b999, 61.56002px 68.36932px 0 #19b99a, 62.22915px 69.11247px 0 #19ba9a, 62.89828px 69.85561px 0 #19ba9a, 63.56741px 70.59876px 0 #19ba9a, 64.23654px 71.3419px 0 #19ba9b, 64.90567px 72.08505px 0 #19bb9b, 65.5748px 72.82819px 0 #19bb9b, 66.24393px 73.57134px 0 #19bb9b, 66.91306px 74.31448px 0 #1abc9c;

}

.bar {

box-shadow: -0.15em 0em 0 #2a7fb7, -0.3em 0em 0 #2c7fb5, -0.45em 0em 0 #2e7fb4, -0.6em 0em 0 #307fb2, -0.75em 0em 0 #327fb1, -0.9em 0em 0 #347faf, -1.05em 0em 0 #367fae, -1.2em 0em 0 #387fac, -1.35em 0em 0 #3a7fab, -1.5em 0em 0 #3b7fa9, -1.65em 0em 0 #3d7fa8, -1.8em 0em 0 #3f7fa6, -1.95em 0em 0 #417fa5, -2.1em 0em 0 #437fa3, -2.25em 0em 0 #457fa2, -2.4em 0em 0 #477fa0, -2.55em 0em 0 #497f9f, -2.7em 0em 0 #4b7f9d, -2.85em 0em 0 #4c7f9c, -3em 0em 0 #4e7f9a, -3.15em 0em 0 #507f99, -3.3em 0em 0 #527f97, -3.45em 0em 0 #547f96, -3.6em 0em 0 #567f94, -3.75em 0em 0 #587f93, -3.9em 0em 0 #5a7f91, -4.05em 0em 0 #5c7f90, -4.2em 0em 0 #5d7f8e, -4.35em 0em 0 #5f7f8d, -4.5em 0em 0 #617f8b, -4.65em 0em 0 #637f8a, -4.8em 0em 0 #657f88, -4.95em 0em 0 #677f87, -5.1em 0em 0 #697f85, -5.25em 0em 0 #6b7f84, -5.4em 0em 0 #6d7f82, -5.55em 0em 0 #6e7f81, -5.7em 0em 0 #707f7f, -5.85em 0em 0 #727f7e, -6em 0em 0 #747f7c, -6.15em 0em 0 #767f7b, -6.3em 0em 0 #787f79, -6.45em 0em 0 #7a7f78, -6.6em 0em 0 #7c7f76, -6.75em 0em 0 #7e7f75, -6.9em 0em 0 #7f7f73, -7.05em 0em 0 #817f72, -7.2em 0em 0 #837f70, -7.35em 0em 0 #857f6f, -7.5em 0em 0 #877f6d, -7.65em 0em 0 #897e6b, -7.8em 0em 0 #8b7e6a, -7.95em 0em 0 #8d7e68, -8.1em 0em 0 #8f7e67, -8.25em 0em 0 #907e65, -8.4em 0em 0 #927e64, -8.55em 0em 0 #947e62, -8.7em 0em 0 #967e61, -8.85em 0em 0 #987e5f, -9em 0em 0 #9a7e5e, -9.15em 0em 0 #9c7e5c, -9.3em 0em 0 #9e7e5b, -9.45em 0em 0 #a07e59, -9.6em 0em 0 #a17e58, -9.75em 0em 0 #a37e56, -9.9em 0em 0 #a57e55, -10.05em 0em 0 #a77e53, -10.2em 0em 0 #a97e52, -10.35em 0em 0 #ab7e50, -10.5em 0em 0 #ad7e4f, -10.65em 0em 0 #af7e4d, -10.8em 0em 0 #b17e4c, -10.95em 0em 0 #b27e4a, -11.1em 0em 0 #b47e49, -11.25em 0em 0 #b67e47, -11.4em 0em 0 #b87e46, -11.55em 0em 0 #ba7e44, -11.7em 0em 0 #bc7e43, -11.85em 0em 0 #be7e41, -12em 0em 0 #c07e40, -12.15em 0em 0 #c27e3e, -12.3em 0em 0 #c37e3d, -12.45em 0em 0 #c57e3b, -12.6em 0em 0 #c77e3a, -12.75em 0em 0 #c97e38, -12.9em 0em 0 #cb7e37, -13.05em 0em 0 #cd7e35, -13.2em 0em 0 #cf7e34, -13.35em 0em 0 #d17e32, -13.5em 0em 0 #d37e31, -13.65em 0em 0 #d47e2f, -13.8em 0em 0 #d67e2e, -13.95em 0em 0 #d87e2c, -14.1em 0em 0 #da7e2b, -14.25em 0em 0 #dc7e29, -14.4em 0em 0 #de7e28, -14.55em 0em 0 #e07e26, -14.7em 0em 0 #e27e25, -14.85em 0em 0 #e47e23, -15em 0em 0 #e67e22;

}

.baz {

box-shadow: -9.82982px -6.88292px 0 rgba(142, 68, 173, 0.9), -19.65965px -13.76583px 0 rgba(142, 68, 173, 0.8), -29.48947px -20.64875px 0 rgba(142, 68, 173, 0.7), -39.3193px -27.53167px 0 rgba(142, 68, 173, 0.6), -49.14912px -34.41459px 0 rgba(142, 68, 173, 0.5), -58.97895px -41.2975px 0 rgba(142, 68, 173, 0.4), -68.80877px -48.18042px 0 rgba(142, 68, 173, 0.3), -78.6386px -55.06334px 0 rgba(142, 68, 173, 0.2), -88.46842px -61.94626px 0 rgba(142, 68, 173, 0.1), -98.29825px -68.82917px 0 rgba(142, 68, 173, 0);

}

.foo {

font-family: 'Raleway', sans-serif;

color: white;

line-height: 100vh;

font-size: 10em;

margin: auto;

text-align: center;

}

.bar,

.baz {

height: 10em;