Po prostu próbowałem zrobić to, co zrobiłeś z innym kolorem i działa to w Firefox 5 Beta, ale nie w IE 9, jsfiddle.net/TGtSd
6
@Keoki Zee Nie działa dla mnie (Chrome).
Marty
1
@Marty Kolor tła działa w Chrome, ale masz rację, nie kolor ... dziwne ...
2
chrom nie działa kolor tła też nie działa dla mnie
koool
2
Okej, na wypadek, gdyby ktoś chciał przetestować, oto skrzypce, do której do tej pory się udałem , jsfiddle.net/TGtSd/9 ...
Odpowiedzi:
1125
Myślę, że powinieneś użyć border-colorzamiast tego color, jeśli masz zamiar zmienić kolor linii produkowanej przez <hr>tag.
Chociaż w komentarzach zaznaczono, że jeśli zmienisz rozmiar linii, ramka będzie nadal tak szeroka, jak określono w stylach, a linia zostanie wypełniona domyślnym kolorem (co nie jest pożądanym efektem większości czas). Wygląda więc na to, że w tym przypadku należałoby również określić background-color(jak sugerował @Ibu w swojej odpowiedzi).
Projekt HTML 5 Boilerplate w domyślnym arkuszu stylów określa następującą zasadę:
Artykuł zatytułowany „12 mało znanych faktów CSS” , opublikowany niedawno przez SitePoint, wspomina o tym, że <hr>można go ustawić border-colorjako nadrzędny, colorjeśli go określisz hr { border-color: inherit }.
Problem z kolorem obramowania polega na tym, że jeśli powiększysz godzinę, to po prostu pokoloruje ramkę, jsfiddle.net/TGtSd/9 ...
@Anton nie o to mi chodziło w kwestii wielkości godziny ... jeśli zwiększysz wysokość, a użyjesz tylko koloru obramowania, otrzymasz prostokąt z kolorową ramką, ale wnętrze nie będzie kolorowe ...
Po co w ogóle zawracać sobie głowę granicą? Dlaczego nie nadać mu koloru tła i skończyć z nim? Edycja: nvm, nie widziałem odpowiedzi na temat zgodności przeglądarki.
Jeśli chcemy, aby nasza strona była wyświetlana we wszystkich przeglądarkach, czy powinniśmy korzystać z nich wszystkich?
MEM
4
border-colornie działa w Chrome. Spróbuj ustawić kolor biały na białym tle. Te dwa będą działać: albo 1)color:white; border-style:solid; albo 2)border-color:white; border-style:solid; .
Pacerier
4
@Pacerier tak to robi. Może trzeba określić styl i / lub szerokość
GôTô
informacje dotyczące IE (przynajmniej) jest niepoprawny. „kolor obramowania” działa dobrze w IE; „Kolor” nie (IE11)
taiji123
88
Myślę, że to może być przydatne. był to prosty selektor CSS.
Możesz także pracować z kolorem ramek. nie jestem pewien, czy myślę, że są z tym problemy z przeglądarką. powinieneś przetestować to w różnych przeglądarkach
Próbowałem w Firefox 5 Beta, IE 9, Chrome, Opera i Safari ... jesteś dobry, wszystkie działają;)
1
@kool, która część nie działa? kolor tła? czy kolor obramowania? właśnie przetestowałem kolor obramowania: niebieski; i działało to w chromie
Ibu
[kolor obramowania] działa w Chrome. [kolor tła] nie. Oddałbym głos, gdybym miał wystarczającą liczbę przedstawicieli.
samthebrand,
5
jeśli używasz klasy css, to zostaną one zajęte przez wszystkie tagi „hr”, ale jeśli chcesz dla konkretnego „hr” użyj poniższego kodu, tj. wbudowanego css
<hrstyle="color:#99CC99"/>
jeśli to nie działa w chrome, spróbuj kodu poniżej:
Po przeczytaniu wszystkich odpowiedzi tutaj i zobaczeniu opisanej złożoności, postanowiłem trochę oderwać się od eksperymentów z HR. Konkluzja jest taka, że możesz wyrzucić większość napisanego przez siebie CSS, przeczytaj ten mały elementarz i po prostu korzystać z tych dwóch linii czystego CSS:
hr {
border-style: solid;
border-color: cornflowerblue;/* or whatever */}
To wszystko czego potrzebujesz, aby stylizować swoje HR.
Działa w różnych przeglądarkach, na różnych urządzeniach, w różnych systemach operacyjnych, w różnych językach.
Nie „Myślę, że to zadziała ...” , „musisz pamiętać o Safari / IE…” itp.
bez dodatkowych css - no height, width, background-color, color, itd zaangażowany.
Po prostu kuloodporne kolorowe HR. To taka prosta TM .
Premia: Aby nadać HR pewien wzrost H, wystarczy ustawić border-widthjako H/2.
Okazuje się, że była to dla mnie idealna odpowiedź, chociaż robiłem to w przeszłości, dostosowując granicę. BTW, Bootstrap 4 robi to w ten sposób:.bg-light { background-color: #f8f9fa !important; }
nicorellius,
2
Ponieważ nie mam reputacji do komentowania, przedstawię tutaj kilka pomysłów.
jeśli chcesz zmiennej wysokości css, zdejmij wszystkie obramowania i podaj kolor tła.
hr{
height:2px;
border:0px;
background:green;
margin:0px;/*sometimes useful*/}/*Doesn't work in ie7 and below and in Quirks Mode*/
jeśli chcesz po prostu styl, o którym wiesz, że będzie działał (na przykład: zastąpienie ramki w elemencie :: before dla większości klientów e-mail lub
Dzięki tej metodzie możesz mieć pewność, że będzie miała co najmniej 2 piksele wysokości.
To coś więcej, ale bezpieczeństwo to bezpieczeństwo.
Jest to metoda, której powinieneś używać, aby być kompatybilnym z prawie wszystkim.
Pamiętaj: Gmail wykrywa tylko wbudowane css, a niektóre klienty e-mail mogą nie obsługiwać tła ani obramowań. Jeśli jeden zawiedzie, nadal będziesz mieć linię 1px. Lepsze niż nic.
W najgorszych przypadkach możesz spróbować dodać color:blue;.
W najgorszym z najgorszych przypadków możesz spróbować użyć <font color="blue"></font>tagu i umieścić w nim swój cenny <hr/>tag. Dziedziczy <font></font>kolor tagu.
Dzięki tej metodzie, to BĘDZIE chce zrobić tak:<hr width="50" align="left"/> .
Przykład:
<span>
awhieugfrafgtgtfhjjygfjyjg
<fontcolor="#42B3E5"><hrwidth="50"align="left"/></font></span><!--Doesn't work in ie7 and below and in Quirks Mode-->
Możesz użyć CSS, aby utworzyć linię w innym kolorze, przykład może wyglądać tak:
border-left:1px solid rgb(216,216,216);
border-right: medium none;
border-width: medium medium medium 2px;
border-style: none none none solid;
border-color:-moz-use-text-color -moz-use-text-color -moz-use-text-color rgb(216,216,216);
Cóż, jestem nowy w HTML, CSS i Javie, ale wypróbowałem swój sposób, który działał dla mnie we wszystkich przeglądarkach. Użyłem JS zamiast CSS, który nie działa z niektórymi przeglądarkami .
Przede wszystkim id="myHR"podałem element HR i wykorzystałem go w Java Script.
Oto kod.
x = document.getElementById("myHR");
y = x.style.width ="600px";
y = x.style.color ="white";
y = x.style.height ="2px";
y = x.style.border ="none";
y = x.style.backgroundColor ="lightgrey";
Zasadą ogólną jest to, że nie można ustawić koloru poziomej linii za pomocą CSS, tak jak w przypadku innych elementów. Po pierwsze, Internet Explorer potrzebuje koloru w twoim CSS, aby czytać w następujący sposób:
„Kolor: # 123455”
Ale Opera i Mozilla potrzebują koloru w twoim CSS, aby czytać w ten sposób:
„Kolor tła: # 123455”
Musisz dodać obie opcje do swojego CSS.
Następnie musisz nadać linii poziomej pewne wymiary, w przeciwnym razie domyślna wysokość, szerokość i kolor będą ustawione domyślnie w przeglądarce. Oto przykładowy kod tego, jak powinien wyglądać Twój CSS, aby uzyskać niebieską poziomą linię.
Odpowiedzi:
Myślę, że powinieneś użyć
border-color
zamiast tegocolor
, jeśli masz zamiar zmienić kolor linii produkowanej przez<hr>
tag.Chociaż w komentarzach zaznaczono, że jeśli zmienisz rozmiar linii, ramka będzie nadal tak szeroka, jak określono w stylach, a linia zostanie wypełniona domyślnym kolorem (co nie jest pożądanym efektem większości czas). Wygląda więc na to, że w tym przypadku należałoby również określić
background-color
(jak sugerował @Ibu w swojej odpowiedzi).Projekt HTML 5 Boilerplate w domyślnym arkuszu stylów określa następującą zasadę:
Artykuł zatytułowany „12 mało znanych faktów CSS” , opublikowany niedawno przez SitePoint, wspomina o tym, że
<hr>
można go ustawićborder-color
jako nadrzędny,color
jeśli go określiszhr { border-color: inherit }
.źródło
border-color
działa w Chrome i Safari .background-color
działa w Firefox i Opera.color
działa w IE7 + .źródło
border-color
nie działa w Chrome. Spróbuj ustawić kolor biały na białym tle. Te dwa będą działać: albo 1)color:white; border-style:solid;
albo 2)border-color:white; border-style:solid;
.Myślę, że to może być przydatne. był to prosty selektor CSS.
źródło
Wykonanie tej czynności pozwala w razie potrzeby zmienić wysokość. Powodzenia. Źródło: Jak stylizować HR za pomocą CSS
źródło
Testowane w Firefox, Opera, Internet Explorer, Chrome i Safari.
Zobacz skrzypce .
źródło
Wystarczy tylko obramowanie z kolorem, aby linia była w innym kolorze.
źródło
Dzięki temu reguła pozioma będzie gruba 1px, a jednocześnie zmieni się jej kolor
źródło
Uważam, że jest to najbardziej skuteczne podejście:
Lub jeśli wolisz robić to na wszystkich elementach HR, napisz to na swoim CSS:
źródło
źródło
tło należy zmienić
Możesz także pracować z kolorem ramek. nie jestem pewien, czy myślę, że są z tym problemy z przeglądarką. powinieneś przetestować to w różnych przeglądarkach
źródło
jeśli używasz klasy css, to zostaną one zajęte przez wszystkie tagi „hr”, ale jeśli chcesz dla konkretnego „hr” użyj poniższego kodu, tj. wbudowanego css
jeśli to nie działa w chrome, spróbuj kodu poniżej:
źródło
Po przeczytaniu wszystkich odpowiedzi tutaj i zobaczeniu opisanej złożoności, postanowiłem trochę oderwać się od eksperymentów z HR. Konkluzja jest taka, że możesz wyrzucić większość napisanego przez siebie CSS, przeczytaj ten mały elementarz i po prostu korzystać z tych dwóch linii czystego CSS:
To wszystko czego potrzebujesz, aby stylizować swoje HR.
height
,width
,background-color
,color
, itd zaangażowany.Po prostu kuloodporne kolorowe HR. To taka prosta TM .
Premia: Aby nadać HR pewien wzrost
H
, wystarczy ustawićborder-width
jakoH/2
.źródło
background-color
działa.Niektóre przeglądarki używają
color
atrybutu, a niektóre korzystają zbackground-color
atrybutu. Być bezpiecznym:źródło
Testuję na IE, Firefox i Chrome w maju 2015 r. I to działa najlepiej z bieżącymi wersjami. Centruje HR i czyni go 70% szerokim:
źródło
Powinieneś ustawić szerokość ramki na 0; Działa dobrze w Firefox i Chrome.
źródło
To proste i moje ulubione.
źródło
Możesz dodać klasę bootstrap bg jak
źródło
.bg-light { background-color: #f8f9fa !important; }
Ponieważ nie mam reputacji do komentowania, przedstawię tutaj kilka pomysłów.
jeśli chcesz zmiennej wysokości css, zdejmij wszystkie obramowania i podaj kolor tła.
jeśli chcesz po prostu styl, o którym wiesz, że będzie działał (na przykład: zastąpienie ramki w elemencie :: before dla większości klientów e-mail lub
W obu przypadkach, jeśli ustawisz szerokość, zawsze będzie miała swój rozmiar.
Nie trzeba tego ustawiać
display:block;
.Aby być całkowicie bezpiecznym, możesz mieszać oba, ponieważ niektóre przeglądarki mogą się mylić z
height:0px;
:Dzięki tej metodzie możesz mieć pewność, że będzie miała co najmniej 2 piksele wysokości.
To coś więcej, ale bezpieczeństwo to bezpieczeństwo.
Jest to metoda, której powinieneś używać, aby być kompatybilnym z prawie wszystkim.
Pamiętaj: Gmail wykrywa tylko wbudowane css, a niektóre klienty e-mail mogą nie obsługiwać tła ani obramowań. Jeśli jeden zawiedzie, nadal będziesz mieć linię 1px. Lepsze niż nic.
W najgorszych przypadkach możesz spróbować dodać
color:blue;
.W najgorszym z najgorszych przypadków możesz spróbować użyć
<font color="blue"></font>
tagu i umieścić w nim swój cenny<hr/>
tag. Dziedziczy<font></font>
kolor tagu.Dzięki tej metodzie, to BĘDZIE chce zrobić tak:
<hr width="50" align="left"/>
.Przykład:
Oto link do sprawdzenia: http://jsfiddle.net/sna2D/
źródło
Możesz użyć CSS, aby utworzyć linię w innym kolorze, przykład może wyglądać tak:
ten kod wyświetli pionową szarą linię.
źródło
Cóż, jestem nowy w HTML, CSS i Javie, ale wypróbowałem swój sposób, który działał dla mnie we wszystkich przeglądarkach. Użyłem JS zamiast CSS, który nie działa z niektórymi przeglądarkami .
Przede wszystkim
id="myHR"
podałem element HR i wykorzystałem go w Java Script.Oto kod.
źródło
Próbowałem wielu kolorów
źródło
Używanie kolorów czcionek do modyfikowania reguł poziomych czyni je bardziej elastycznymi i łatwymi w użyciu.
color
Nieruchomość nie jest dziedziczona domyślnie, więc poniższe musi zostać dodany do WP, aby umożliwić dziedziczenie koloru:źródło
Możesz to zrobić:
źródło
Możesz podać
<hr noshade>
tag i przejść do pliku css i dodać:źródło
Zasadą ogólną jest to, że nie można ustawić koloru poziomej linii za pomocą CSS, tak jak w przypadku innych elementów. Po pierwsze, Internet Explorer potrzebuje koloru w twoim CSS, aby czytać w następujący sposób:
„Kolor: # 123455”
Ale Opera i Mozilla potrzebują koloru w twoim CSS, aby czytać w ten sposób:
„Kolor tła: # 123455”
Musisz dodać obie opcje do swojego CSS.
Następnie musisz nadać linii poziomej pewne wymiary, w przeciwnym razie domyślna wysokość, szerokość i kolor będą ustawione domyślnie w przeglądarce. Oto przykładowy kod tego, jak powinien wyglądać Twój CSS, aby uzyskać niebieską poziomą linię.
Lub możesz po prostu dodać styl do swojej strony HTML bezpośrednio po wstawieniu poziomej linii, tak jak to:
Mam nadzieję że to pomoże.
źródło
Postawiłem na każdy sposób:
źródło