การเปลี่ยนสีขององค์ประกอบชั่วโมง

ฉันต้องการเปลี่ยนสีของhrแท็กด้วย CSS รหัสที่ฉันลองด้านล่างดูเหมือนจะไม่ทำงาน:

hr {
    color: #123455;
}

ฉันคิดว่าคุณควรใช้border-colorแทนcolorหากคุณต้องการเปลี่ยนสีของบรรทัดที่ผลิตโดย<hr>แท็ก

แม้ว่าจะมีการชี้ให้เห็นในความคิดเห็นว่าหากคุณเปลี่ยนขนาดของเส้นของคุณเส้นขอบจะยังคงกว้างตามที่คุณระบุในรูปแบบและเส้นจะเต็มไปด้วยสีเริ่มต้น (ซึ่งไม่ใช่ผลที่ต้องการมากที่สุดของ เวลา). ดังนั้นดูเหมือนว่าในกรณีนี้คุณจะต้องระบุbackground-color(ตามที่ @Ibu แนะนำในคำตอบของเขา)

โครงการหม้อไอน้ำHTML 5ในสไตล์ชีทเริ่มต้นระบุกฎต่อไปนี้:

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }

บทความที่ชื่อ“12 ที่รู้จักกันน้อยข้อเท็จจริง CSS”ตีพิมพ์เมื่อเร็ว ๆ นี้โดย SitePoint, กล่าวว่า<hr>สามารถตั้งค่าของมันborder-colorไปยังผู้ปกครองของมันคือถ้าคุณระบุcolorhr { border-color: inherit }

• border-colorทำงานในChromeและSafari
• background-color ทำงานใน Firefox และ Opera
• colorผลงานในIE7 +

ฉันคิดว่านี่จะมีประโยชน์ นี่คือตัวเลือก CSS อย่างง่าย

hr { background-color: red; height: 1px; border: 0; }

hr {
    height: 1px;
    color: #123455;
    background-color: #123455;
    border: none;
}

การทำเช่นนี้ช่วยให้คุณสามารถเปลี่ยนความสูงได้ถ้าต้องการ โชคดี. ที่มา: วิธีการจัดสไตล์ HR ด้วย CSS

ทดสอบใน Firefox, Opera, Internet Explorer, Chrome และ Safari

hr {
    border-top: 1px solid red;
}

ดูซอ

เส้นขอบด้านบนเท่านั้นที่มีสีก็เพียงพอที่จะทำให้เส้นในสีที่ต่างกัน

hr {
    border-top: 1px solid #ccc;
}

hr {
  height:0; 
  border:0; 
  border-top:1px solid #083972; 
}

สิ่งนี้จะทำให้ความหนาของกฎแนวนอน 1px ในขณะที่ยังเปลี่ยนสีของมัน

ฉันเชื่อว่านี่เป็นวิธีที่มีประสิทธิภาพที่สุด:

<hr style="border-top: 1px solid #ccc; background: transparent;">

หรือถ้าคุณชอบที่จะทำมันในทุกองค์ประกอบชั่วโมงเขียนสิ่งนี้บน CSS ของคุณ:

hr {
    background-color: transparent;
    border-top: 1px solid #ccc;
}

ชม
{
สี: # f00;
สีพื้นหลัง: # f00;
ความสูง: 5px;
}

hr
{
  background-color: #123455;
}

พื้นหลังเป็นสิ่งที่คุณควรลองเปลี่ยน

คุณยังสามารถทำงานกับสีเส้นขอบ ฉันไม่แน่ใจว่าฉันคิดว่ามีปัญหากับเบราว์เซอร์นี้ คุณควรทดสอบในเบราว์เซอร์ที่แตกต่างกัน

ถ้าคุณใช้คลาส css จากนั้นแท็ก 'hr' ทั้งหมดจะถูกนำมาใช้ แต่ถ้าคุณต้องการ 'hr' ที่เฉพาะเจาะจงให้ใช้โค้ดด้านล่างเช่น inline css

<hr style="color:#99CC99" />

ถ้ามันไม่ทำงานในโครเมี่ยมลองรหัสด้านล่าง:

<hr color="red" />

หลังจากอ่านคำตอบทั้งหมดที่นี่และเห็นความซับซ้อนที่อธิบายไว้ฉันตั้งความผันแปรเล็กน้อยเพื่อทดสอบกับ HR และข้อสรุปคือคุณสามารถโยน CSS ที่มีขนาดใหญ่ที่สุดที่คุณเขียนอ่านไพรเมอร์ขนาดเล็กนี้และใช้ CSS บริสุทธิ์สองบรรทัดนี้:

hr {
  border-style: solid;
  border-color: cornflowerblue; /* or whatever */
}

นั่นคือทั้งหมดที่คุณต้องการในการออกแบบ HR ของคุณ

• ทำงานข้ามเบราว์เซอร์, ข้ามอุปกรณ์, ข้ามระบบปฏิบัติการ, ข้ามช่องทางภาษาอังกฤษ, ข้ามวัย
• ไม่"ฉันคิดว่ามันจะใช้งานได้ ... " , "คุณต้องจำ Safari / IE ไว้ในใจ ... "ฯลฯ
• ไม่มี CSS พิเศษ - ไม่height, width, background-color, colorและอื่น ๆ ที่เกี่ยวข้อง

เพียงกระสุนที่มีสีสัน HRs มันเป็นเรื่องที่ง่ายTM

โบนัส: เพื่อให้ทรัพยากรบุคคลสูงบางHเพียงแค่ตั้งค่าเป็นborder-widthH/2

เบราว์เซอร์บางตัวใช้colorคุณสมบัติและบางตัวใช้background-colorคุณสมบัติ เพื่อความปลอดภัย:

hr{
    color: #color;
    background-color: #color;
}

ฉันกำลังทดสอบกับ IE, Firefox และ Chrome พฤษภาคม 2015 และสิ่งนี้ทำงานได้ดีที่สุดกับเวอร์ชันปัจจุบัน มันเป็นศูนย์ทรัพยากรบุคคลและทำให้มันกว้าง 70%:

hr.light { 
    width:70%; 
    margin:0 auto; 
    border:0px none white; 
    border-top:1px solid lightgrey; 
}

<hr class="light" />

คุณควรตั้งค่าความกว้างชายแดนเป็น 0 มันทำงานได้ดีใน Firefox และ Chrome

hr {
  clear: both;
  color: red;
  background-color: red;
  height: 1px;
  border-width: 0;
}

<hr />
This is a test
<hr />

มันง่ายและเป็นที่ชื่นชอบ

<hr style="background-color: #dd3333" />

คุณสามารถเพิ่ม bootstrap bg class เช่น

<hr class="bg-light" />

เนื่องจากฉันไม่มีชื่อเสียงที่จะแสดงความคิดเห็นฉันจะให้แนวคิดบางอย่างที่นี่

หากคุณต้องการความสูงของตัวแปร css ให้ทำการตัดขอบทั้งหมดและให้สีพื้นหลัง

    hr{
        height:2px;
        border:0px;
        background:green;
        margin:0px;/*sometimes useful*/
    }
    /*Doesn't work in ie7 and below and in Quirks Mode*/

ถ้าคุณต้องการสไตล์ที่คุณรู้ว่าจะใช้งานได้ (ตัวอย่าง: เพื่อแทนที่เส้นขอบใน :: ก่อนองค์ประกอบสำหรับไคลเอนต์อีเมลส่วนใหญ่หรือ

    hr{
        height:0px;
        border:0px;
        border-top:2px solid blue;
        margin:0px;/*useful sometimes*/
    }

ในทั้งสองวิธีถ้าคุณตั้งค่าความกว้างมันจะมีขนาดเสมอ

ไม่จำเป็นต้องตั้งค่าdisplay:block;สำหรับสิ่งนี้

เพื่อความปลอดภัยโดยสิ้นเชิงคุณสามารถผสมทั้งสองได้ 'ทำให้เบราว์เซอร์บางตัวสับสนกับheight:0px;:

    hr{
        height:1px;
        border:0px;
        background:blue;
        border-top:1px solid blue;
        margin:0px;/*useful sometimes*/
    }

ด้วยวิธีนี้คุณสามารถมั่นใจได้ว่าจะมีความสูงอย่างน้อย 2px

มันเป็นสิ่งที่มากกว่า แต่ความปลอดภัยก็คือความปลอดภัย

นี่เป็นวิธีที่คุณควรใช้เพื่อให้เข้ากันได้กับเกือบทุกอย่าง

โปรดทราบว่า: Gmail จะตรวจพบเฉพาะอินไลน์ css และไคลเอนต์อีเมลบางรายอาจไม่สนับสนุนพื้นหลังหรือเส้นขอบ หากล้มเหลวคุณจะยังคงมีบรรทัด 1px ดีกว่าไม่มีอะไร

ในกรณีที่เลวร้ายที่สุดคุณสามารถลองเพิ่มcolor:blue;ได้

ในกรณีที่เลวร้ายที่สุดคุณสามารถลองใช้<font color="blue"></font>แท็กและวาง<hr/>แท็กที่มีค่าของคุณไว้ภายใน มันจะสืบทอด<font></font>สีแท็ก

ด้วยวิธีนี้คุณจะ<hr width="50" align="left"/>ต้องการที่จะทำเช่นนี้

ตัวอย่าง:

    <span>
        awhieugfrafgtgtfhjjygfjyjg
        <font color="#42B3E5"><hr width="50" align="left"/></font>
    </span>
    <!--Doesn't work in ie7 and below and in Quirks Mode-->

นี่คือลิงค์สำหรับให้คุณตรวจสอบ: http://jsfiddle.net/sna2D/

คุณสามารถใช้ CSS เพื่อสร้างบรรทัดที่มีสีแตกต่างกันตัวอย่างเช่นจะเป็นเช่นนั้น:

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);

รหัสนั้นจะแสดงเส้นสีเทาแนวตั้ง

ฉันใหม่ใน HTML, CSS และใน Java แต่ฉันลองวิธีของฉันที่เหมาะกับฉันในเบราว์เซอร์ทั้งหมด ฉันใช้ JS แทน CSS ซึ่งใช้ไม่ได้กับเบราว์เซอร์บางตัว

ก่อนอื่นฉันได้มอบให้id="myHR"กับองค์ประกอบ HR และใช้มันในจาวาสคริปต์
นี่คือรหัส

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";

1. Code Works สำหรับ IE รุ่นเก่า

2. พยายามหลายสี

   <hr color="black">
   <hr color="blue">

การใช้สีแบบอักษรเพื่อแก้ไขกฎแนวนอนทำให้มีความยืดหยุ่นและใช้งานง่ายขึ้น

colorคุณสมบัติไม่ได้สืบเชื้อสายมาจากค่าเริ่มต้นเพื่อตอบสนองความต้องการดังต่อไปนี้ที่จะเพิ่มชั่วโมงที่จะช่วยให้มรดกสี:

/* allow hr to inherit color */
hr { border: 1px solid;}

/* reusable colour modifier */
.fc_-alpha { color: crimson;}

normal hr:

<hr>

hr with <span class="fc_-alpha">colour modifier</span>:

<hr class="fc_-alpha">

คุณสามารถทำได้:

hr {
  border: 1px solid red;
}

<hr />
This s a test
<hr />

คุณสามารถให้<hr noshade>แท็กและไปที่ไฟล์ css ของคุณและเพิ่ม:

hr {
    border-top:0;
    color: #123455;
}

<hr noshade />
This s a test
<hr noshade />

ตามกฎทั่วไปคุณไม่สามารถตั้งค่าสีของเส้นแนวนอนด้วย CSS ได้เหมือนอย่างอื่น ก่อนอื่น Internet Explorer ต้องการสีใน CSS ของคุณเพื่ออ่านดังนี้:

“ สี: # 123455”

แต่ Opera และ Mozilla ต้องการสีใน CSS เพื่ออ่านดังนี้:

“ สีพื้นหลัง: # 123455”

ดังนั้นคุณจะต้องเพิ่มตัวเลือกทั้งสองลงใน CSS ของคุณ

ถัดไปคุณจะต้องให้เส้นแนวนอนบางส่วนหรือจะเริ่มต้นกับความสูงมาตรฐานความกว้างและสีที่ตั้งค่าโดยเบราว์เซอร์ของคุณ นี่คือตัวอย่างโค้ดว่า CSS ของคุณควรมีลักษณะอย่างไรเพื่อรับเส้นแนวนอนสีน้ำเงิน

hr {
border: 0;
width: 100%;
color: #123455;
background-color: #123455;
height: 5px;
}

หรือคุณสามารถเพิ่มสไตล์ให้กับหน้า HTML ของคุณโดยตรงเมื่อคุณแทรกเส้นแนวนอนเช่นนี้

<hr style="background:#123455" />

หวังว่านี่จะช่วยได้

ฉันเดิมพันแต่ละวิธี:

  hr {
    border-top: 1px solid purple;
    border-color: purple;
    background-color: purple;
    color: purple;
  }