Vairāk

Javascript API Scalebar halo CSS veidošana


Esmu ļoti jauns HTML, CSS un JS lietojumos.

Esmu savai kartei pievienojis mērogvaru un izdomājis, kā ap etiķetēm pievienot oreolu, lai tos labāk redzētu uz tumša vai gaiša fona, taču es, šķiet, nespēju to atkārtot pašā līnijā. Zemāk ir paraugs, kuru tiešsaistē atradu un kuru izmantoju etiķetēm.

.esriScalebarLabel, .esriScalebarLineLabel, .esriScalebarSecondNumber, .esriScalebarLabelDiv {text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }

Esmu mēģinājis šo pašu kodu (kopā ar citiem CSS rekvizītiem, piemēram, box-shadow, outline, text-shadow) izmantot atlasītājam .esriScalebarLine, bet vistuvākais, ko esmu ieguvis, ir ap līniju konteineru, nevis pati faktiskā līnija.

Mana josla šobrīd izskatās šādi:

Un man tas ir vajadzīgs, lai tas izskatās vairāk šādi:

Ievērojat līniju ap 1 pikseļu baltu kontūru? Man to vajag! Vai ir kādas idejas, kā to izdarīt? Vai es izmantoju nepareizo selektoru?


Es to nevarēju saprast, nezinot, vai tas ir iespējams. Jūs varat iegūt baltu lodziņu visa mēroga joslas laukuma lielumā, kas izskatās diezgan dumjš. To var izdarīt, mainot .esriScalebarLine css uz border-bottom-color: white; border-bottom-style: ciets; apmales apakšdaļas platums: 5 pikseļi; Vai arī varat pievienot vēl vienu div un mainīt div fona krāsu, lai maskētu visu laukumu ap mēroga joslas div.

Varbūt jūs varētu kopēt mēroga joslu un padarīt vienu biezāku.

Es arī tiešām nedomāju, ka tas ir liels darījums. Mani nekad nav uztraukušas grūtības izlasīt mērogu tīmekļa kartē. Lielākā daļa cilvēku to pat neskatās, un tie, kas to skatās, uzmanīgi aplūkos vai, ja nepieciešams, pārvietos karti uz lasāmāku fonu.

Ja jums ir tumša stila karte, varat mainīt skalebar CSS un padarīt visu baltu, pārspiežot .esriScalebarLine apmales css uz border-color: white.