所以我开始使用这个长文本阴影来表达我喜欢的样子。尽管文本阴影在其各自的div元素之外延伸。我试图找出一种方法来包含它包含在div中的文本阴影。这是我的例子:
CSS:
.first_shadow_header {
font-size: 56px;
color: #fff;
text-shadow: -2px 2px 0 #E53935,-4px 4px 0 #E53935,-6px 6px 0 #E53935,-8px 8px 0 #E53935,-10px 10px 0 #E53935,-12px 12px 0 #E53935,-14px 14px 0 #E53935,-16px 16px 0 #E53935,-18px 18px 0 #E53935,-20px 20px 0 #E53935,-22px 22px 0 #E53935,-24px 24px 0 #E53935,-26px 26px 0 #E53935,-28px 28px 0 #E53935,-30px 30px 0 #E53935,-32px 32px 0 #E53935,-34px 34px 0 #E53935,-36px 36px 0 #E53935,-38px 38px 0 #E53935,-40px 40px 0 #E53935,-42px 42px 0 #E53935,-44px 44px 0 #E53935,-46px 46px 0 #E53935,-48px 48px 0 #E53935,-50px 50px 0 #E53935,-52px 52px 0 #E53935,-54px 54px 0 #E53935,-56px 56px 0 #E53935,-58px 58px 0 #E53935,-60px 60px 0 #E53935,-62px 62px 0 #E53935,-64px 64px 0 #E53935,-66px 66px 0 #E53935,-68px 68px 0 #E53935,-70px 70px 0 #E53935,-72px 72px 0 #E53935,-74px 74px 0 #E53935,-76px 76px 0 #E53935,-78px 78px 0 #E53935,-80px 80px 0 #E53935,-82px 82px 0 #E53935,-84px 84px 0 #E53935,-86px 86px 0 #E53935,-88px 88px 0 #E53935,-90px 90px 0 #E53935,-92px 92px 0 #E53935,-94px 94px 0 #E53935,-96px 96px 0 #E53935,-98px 98px 0 #E53935,
-100px 100px 0 #E53935,-102px 102px 0 #E53935,-104px 104px 0 #E53935,-106px 106px 0 #E53935,-108px 108px 0 #E53935,-110px 110px 0 #E53935,-112px 112px 0 #E53935,-114px 114px 0 #E53935,-116px 116px 0 #E53935,-118px 118px 0 #E53935,-120px 120px 0 #E53935,-122px 122px 0 #E53935,-124px 124px 0 #E53935,-126px 126px 0 #E53935,-128px 128px 0 #E53935,-130px 130px 0 #E53935,-132px 132px 0 #E53935,-134px 134px 0 #E53935,-136px 136px 0 #E53935,-138px 138px 0 #E53935,-140px 140px 0 #E53935,-142px 142px 0 #E53935,-144px 144px 0 #E53935,-146px 146px 0 #E53935,-148px 148px 0 #E53935,-150px 150px 0 #E53935,-152px 152px 0 #E53935,-154px 154px 0 #E53935,-156px 156px 0 #E53935,-158px 158px 0 #E53935,-160px 160px 0 #E53935,-162px 162px 0 #E53935,-164px 164px 0 #E53935,-166px 166px 0 #E53935,-168px 168px 0 #E53935,-170px 170px 0 #E53935,-172px 172px 0 #E53935,-174px 174px 0 #E53935,-176px 176px 0 #E53935,-178px 178px 0 #E53935,-180px 180px 0 #E53935,-182px 182px 0 #E53935,-184px 184px 0 #E53935,-186px 186px 0 #E53935,-188px 188px 0 #E53935,-190px 190px 0 #E53935,-192px 192px 0 #E53935,-194px 194px 0 #E53935,-196px 196px 0 #E53935,-198px 198px 0 #E53935,
-200px 200px 0 #E53935,-202px 202px 0 #E53935,-204px 204px 0 #E53935,-206px 206px 0 #E53935,-208px 208px 0 #E53935,-210px 210px 0 #E53935,-212px 212px 0 #E53935,-214px 214px 0 #E53935,-216px 216px 0 #E53935,-218px 218px 0 #E53935,-220px 220px 0 #E53935,-222px 222px 0 #E53935,-224px 224px 0 #E53935,-226px 226px 0 #E53935,-228px 228px 0 #E53935,-230px 230px 0 #E53935,-232px 232px 0 #E53935,-234px 234px 0 #E53935,-236px 236px 0 #E53935,-238px 238px 0 #E53935,-240px 240px 0 #E53935,-242px 242px 0 #E53935,-244px 244px 0 #E53935,-246px 246px 0 #E53935,-248px 248px 0 #E53935,-250px 250px 0 #E53935,-252px 252px 0 #E53935,-254px 254px 0 #E53935,-256px 256px 0 #E53935,-258px 258px 0 #E53935,-260px 260px 0 #E53935,-262px 262px 0 #E53935,-264px 264px 0 #E53935,-266px 266px 0 #E53935,-268px 268px 0 #E53935,-270px 270px 0 #E53935,-272px 272px 0 #E53935,-274px 274px 0 #E53935,-276px 276px 0 #E53935,-278px 278px 0 #E53935,-280px 280px 0 #E53935,-282px 282px 0 #E53935,-284px 284px 0 #E53935,-286px 286px 0 #E53935,-288px 288px 0 #E53935,-290px 290px 0 #E53935,-292px 292px 0 #E53935,-294px 294px 0 #E53935,-296px 296px 0 #E53935,-298px 298px 0 #E53935,
-300px 300px 0 #E53935,-302px 302px 0 #E53935,-304px 304px 0 #E53935,-306px 306px 0 #E53935,-308px 308px 0 #E53935,-310px 310px 0 #E53935,-312px 312px 0 #E53935,-314px 314px 0 #E53935,-316px 316px 0 #E53935,-318px 318px 0 #E53935,-320px 320px 0 #E53935,-322px 322px 0 #E53935,-324px 324px 0 #E53935,-326px 326px 0 #E53935,-328px 328px 0 #E53935,-330px 330px 0 #E53935,-332px 332px 0 #E53935,-334px 334px 0 #E53935,-336px 336px 0 #E53935,-338px 338px 0 #E53935,-340px 340px 0 #E53935,-342px 342px 0 #E53935,-344px 344px 0 #E53935,-346px 346px 0 #E53935,-348px 348px 0 #E53935,-350px 350px 0 #E53935,-352px 352px 0 #E53935,-354px 354px 0 #E53935,-356px 356px 0 #E53935,-358px 358px 0 #E53935,-360px 360px 0 #E53935,-362px 362px 0 #E53935,-364px 364px 0 #E53935,-366px 366px 0 #E53935,-368px 368px 0 #E53935,-370px 370px 0 #E53935,-372px 372px 0 #E53935,-374px 374px 0 #E53935,-376px 376px 0 #E53935,-378px 378px 0 #E53935,-380px 380px 0 #E53935,-382px 382px 0 #E53935,-384px 384px 0 #E53935,-386px 386px 0 #E53935,-388px 388px 0 #E53935,-390px 390px 0 #E53935,-392px 392px 0 #E53935,-394px 394px 0 #E53935,-396px 396px 0 #E53935,-398px 398px 0 #E53935,
-400px 400px 0 #E53935,-402px 402px 0 #E53935,-404px 404px 0 #E53935,-406px 406px 0 #E53935,-408px 408px 0 #E53935,-410px 410px 0 #E53935,-412px 412px 0 #E53935,-414px 414px 0 #E53935,-416px 416px 0 #E53935,-418px 418px 0 #E53935,-420px 420px 0 #E53935,-422px 422px 0 #E53935,-424px 424px 0 #E53935,-426px 426px 0 #E53935,-428px 428px 0 #E53935,-430px 430px 0 #E53935,-432px 432px 0 #E53935,-434px 434px 0 #E53935,-436px 436px 0 #E53935,-438px 438px 0 #E53935,-440px 440px 0 #E53935,-442px 442px 0 #E53935,-444px 444px 0 #E53935,-446px 446px 0 #E53935,-448px 448px 0 #E53935,-450px 450px 0 #E53935,-452px 452px 0 #E53935,-454px 454px 0 #E53935,-456px 456px 0 #E53935,-458px 458px 0 #E53935,-460px 460px 0 #E53935,-462px 462px 0 #E53935,-464px 464px 0 #E53935,-466px 466px 0 #E53935,-468px 468px 0 #E53935,-470px 470px 0 #E53935,-472px 472px 0 #E53935,-474px 474px 0 #E53935,-476px 476px 0 #E53935,-478px 478px 0 #E53935,-480px 480px 0 #E53935,-482px 482px 0 #E53935,-484px 484px 0 #E53935,-486px 486px 0 #E53935,-488px 488px 0 #E53935,-490px 490px 0 #E53935,-492px 492px 0 #E53935,-494px 494px 0 #E53935,-496px 496px 0 #E53935,-498px 498px 0 #E53935,
-500px 500px 0 #E53935,-502px 502px 0 #E53935,-504px 504px 0 #E53935,-506px 506px 0 #E53935,-508px 508px 0 #E53935,-510px 510px 0 #E53935,-512px 512px 0 #E53935,-514px 514px 0 #E53935,-516px 516px 0 #E53935,-518px 518px 0 #E53935,-520px 520px 0 #E53935,-522px 522px 0 #E53935,-524px 524px 0 #E53935,-526px 526px 0 #E53935,-528px 528px 0 #E53935,-530px 530px 0 #E53935,-532px 532px 0 #E53935,-534px 534px 0 #E53935,-536px 536px 0 #E53935,-538px 538px 0 #E53935,-540px 540px 0 #E53935,-542px 542px 0 #E53935,-544px 544px 0 #E53935,-546px 546px 0 #E53935,-548px 548px 0 #E53935,-550px 550px 0 #E53935,-552px 552px 0 #E53935,-554px 554px 0 #E53935,-556px 556px 0 #E53935,-558px 558px 0 #E53935,-560px 560px 0 #E53935,-562px 562px 0 #E53935,-564px 564px 0 #E53935,-566px 566px 0 #E53935,-568px 568px 0 #E53935,-570px 570px 0 #E53935,-572px 572px 0 #E53935,-574px 574px 0 #E53935,-576px 576px 0 #E53935,-578px 578px 0 #E53935,-580px 580px 0 #E53935,-582px 582px 0 #E53935,-584px 584px 0 #E53935,-586px 586px 0 #E53935,-588px 588px 0 #E53935,-590px 590px 0 #E53935,-592px 592px 0 #E53935,-594px 594px 0 #E53935,-596px 596px 0 #E53935,-598px 598px 0 #E53935,
-600px 600px 0 #E53935,-602px 602px 0 #E53935,-604px 604px 0 #E53935,-606px 606px 0 #E53935,-608px 608px 0 #E53935,-610px 610px 0 #E53935,-612px 612px 0 #E53935,-614px 614px 0 #E53935,-616px 616px 0 #E53935,-618px 618px 0 #E53935,-620px 620px 0 #E53935,-622px 622px 0 #E53935,-624px 624px 0 #E53935,-626px 626px 0 #E53935,-628px 628px 0 #E53935,-630px 630px 0 #E53935,-632px 632px 0 #E53935,-634px 634px 0 #E53935,-636px 636px 0 #E53935,-638px 638px 0 #E53935,-640px 640px 0 #E53935,-642px 642px 0 #E53935,-644px 644px 0 #E53935,-646px 646px 0 #E53935,-648px 648px 0 #E53935,-650px 650px 0 #E53935,-652px 652px 0 #E53935,-654px 654px 0 #E53935,-656px 656px 0 #E53935,-658px 658px 0 #E53935,-660px 660px 0 #E53935,-662px 662px 0 #E53935,-664px 664px 0 #E53935,-666px 666px 0 #E53935,-668px 668px 0 #E53935,-670px 670px 0 #E53935,-672px 672px 0 #E53935,-674px 674px 0 #E53935,-676px 676px 0 #E53935,-678px 678px 0 #E53935,-680px 680px 0 #E53935,-682px 682px 0 #E53935,-684px 684px 0 #E53935,-686px 686px 0 #E53935,-688px 688px 0 #E53935,-690px 690px 0 #E53935,-692px 692px 0 #E53935,-694px 694px 0 #E53935,-696px 696px 0 #E53935,-698px 698px 0 #E53935,
-700px 700px 0 #E53935,-702px 702px 0 #E53935,-704px 704px 0 #E53935,-706px 706px 0 #E53935,-708px 708px 0 #E53935,-710px 710px 0 #E53935,-712px 712px 0 #E53935,-714px 714px 0 #E53935,-716px 716px 0 #E53935,-718px 718px 0 #E53935,-720px 720px 0 #E53935,-722px 722px 0 #E53935,-724px 724px 0 #E53935,-726px 726px 0 #E53935,-728px 728px 0 #E53935,-730px 730px 0 #E53935,-732px 732px 0 #E53935,-734px 734px 0 #E53935,-736px 736px 0 #E53935,-738px 738px 0 #E53935,-740px 740px 0 #E53935,-742px 742px 0 #E53935,-744px 744px 0 #E53935,-746px 746px 0 #E53935,-748px 748px 0 #E53935,-750px 750px 0 #E53935,-752px 752px 0 #E53935,-754px 754px 0 #E53935,-756px 756px 0 #E53935,-758px 758px 0 #E53935,-760px 760px 0 #E53935,-762px 762px 0 #E53935,-764px 764px 0 #E53935,-766px 766px 0 #E53935,-768px 768px 0 #E53935,-770px 770px 0 #E53935,-772px 772px 0 #E53935,-774px 774px 0 #E53935,-776px 776px 0 #E53935,-778px 778px 0 #E53935,-780px 780px 0 #E53935,-782px 782px 0 #E53935,-784px 784px 0 #E53935,-786px 786px 0 #E53935,-788px 788px 0 #E53935,-790px 790px 0 #E53935,-792px 792px 0 #E53935,-794px 794px 0 #E53935,-796px 796px 0 #E53935,-798px 798px 0 #E53935,
-800px 800px 0 #E53935,-802px 802px 0 #E53935,-804px 804px 0 #E53935,-806px 806px 0 #E53935,-808px 808px 0 #E53935,-810px 810px 0 #E53935,-812px 812px 0 #E53935,-814px 814px 0 #E53935,-816px 816px 0 #E53935,-818px 818px 0 #E53935,-820px 820px 0 #E53935,-822px 822px 0 #E53935,-824px 824px 0 #E53935,-826px 826px 0 #E53935,-828px 828px 0 #E53935,-830px 830px 0 #E53935,-832px 832px 0 #E53935,-834px 834px 0 #E53935,-836px 836px 0 #E53935,-838px 838px 0 #E53935,-840px 840px 0 #E53935,-842px 842px 0 #E53935,-844px 844px 0 #E53935,-846px 846px 0 #E53935,-848px 848px 0 #E53935,-850px 850px 0 #E53935,-852px 852px 0 #E53935,-854px 854px 0 #E53935,-856px 856px 0 #E53935,-858px 858px 0 #E53935,-860px 860px 0 #E53935,-862px 862px 0 #E53935,-864px 864px 0 #E53935,-866px 866px 0 #E53935,-868px 868px 0 #E53935,-870px 870px 0 #E53935,-872px 872px 0 #E53935,-874px 874px 0 #E53935,-876px 876px 0 #E53935,-878px 878px 0 #E53935,-880px 880px 0 #E53935,-882px 882px 0 #E53935,-884px 884px 0 #E53935,-886px 886px 0 #E53935,-888px 888px 0 #E53935,-890px 890px 0 #E53935,-892px 892px 0 #E53935,-894px 894px 0 #E53935,-896px 896px 0 #E53935,-898px 898px 0 #E53935,
-900px 900px 0 #E53935,-902px 902px 0 #E53935,-904px 904px 0 #E53935,-906px 906px 0 #E53935,-908px 908px 0 #E53935,-910px 910px 0 #E53935,-912px 912px 0 #E53935,-914px 914px 0 #E53935,-916px 916px 0 #E53935,-918px 918px 0 #E53935,-920px 920px 0 #E53935,-922px 922px 0 #E53935,-924px 924px 0 #E53935,-926px 926px 0 #E53935,-928px 928px 0 #E53935,-930px 930px 0 #E53935,-932px 932px 0 #E53935,-934px 934px 0 #E53935,-936px 936px 0 #E53935,-938px 938px 0 #E53935,-940px 940px 0 #E53935,-942px 942px 0 #E53935,-944px 944px 0 #E53935,-946px 946px 0 #E53935,-948px 948px 0 #E53935,-950px 950px 0 #E53935,-952px 952px 0 #E53935,-954px 954px 0 #E53935,-956px 956px 0 #E53935,-958px 958px 0 #E53935,-960px 960px 0 #E53935,-962px 962px 0 #E53935,-964px 964px 0 #E53935,-966px 966px 0 #E53935,-968px 968px 0 #E53935,-970px 970px 0 #E53935,-972px 972px 0 #E53935,-974px 974px 0 #E53935,-976px 976px 0 #E53935,-978px 978px 0 #E53935,-980px 980px 0 #E53935,-982px 982px 0 #E53935,-984px 984px 0 #E53935,-986px 986px 0 #E53935,-988px 988px 0 #E53935,-990px 990px 0 #E53935,-992px 992px 0 #E53935,-994px 994px 0 #E53935,-996px 996px 0 #E53935,-998px 998px 0 #E53935,
-1000px 1000px 0 #E53935;
}
我有两个完全类似的div,它们都在标题上使用了这个文本阴影,并且顶部阴影标题渗入底部div。
以下是div:
<div class="first_section">
<div class="first_section_container">
<h1 class="first_shadow_header">First Section</h1>
</div>
</div>
<div class="second_section">
<div class="second_section_container">
<h1 class="second_shadow_header">Second Section</h1>
</div>
</div>
以下是我所指的图片:
如您所见,红色阴影与第二部分重叠。我已经尝试为第二部分设置z-index高于第一部分,但是没有用。任何和所有的帮助非常感谢。提前谢谢。
答案 0 :(得分:1)
如果你设置overflow:hidden;在每个部分它将修复它。 :)