ใช้ css ทำ corners แค่ 1 pixel

โอ้ยๆๆๆๆๆๆๆ -..- อยากจะบ้าตาย เขียน blog ใกล้จะเสร็จแหล่ะ ลืมตัว กด F5 (โง่นิ) หายไปหมด แล้วจะเขียนเหมือนเดิมไหมเนี่ย วันนี้บังเอิญไปเจอบทความที่เขียนถึง Google Analytics พอเห็นแล้วสงสัยว่าเขียน code ยังไง....555+ จะพลาดอังคณาไปได้ยังไง.....อย่ารอช้า มาดูกันดีกว่า



/*-----Code CSS------*/
ul {
    width:180px;
    list-style-type:none;
    margin:0 auto;
    padding:0;
}

li a {
    display:block;
    position:relative; /*ตัวนี้ไม่รู้เขาใส่ไว้ทำไม แต่อังลองเอาออกดู ใน ie6,firefox ไม่มีปัญหา*/
    border-width:1px 0; /*กำหนด border ด้านบนกับล่าง*/
    border-color:#00F;
    border-style:solid;
    color:#555;
    text-decoration:none;
    margin:4px 1px;
}

li a span {
    display:block;
    position:relative; /*ตัวนี้ไม่รู้เขาใส่ไว้ทำไม แต่อังลองเอาออกดู ใน ie6,firefox ไม่มีปัญหา*/
    margin:0 -1px; /* เขาตั้งให้ทางด้านซ้ายและขวาขยับเข้ามา 1px*/
    border-width:0 1px; /*กำหนด border ด้านซ้ายกับขวา*/
    border-color:#ccc;
    border-style:solid;
    background-color:#eee;
    padding:2px 6px;
}

li a:hover {
    border-color:#aaa;
    color:#333;
}

li a:hover span {
    border-color:#aaa;
    background-color:#ddd;
}

/*------Code HTML-------*/
<ul>

    <li>

        <a href="#"><span>Testlink</span></a>

        <a href="#"><span>Testlink</span></a>

        <a href="#"><span>Testlink</span></a>

    </li>

</ul>

**สังเกตดูว่า ทำไมเขาใส่ background-color:#ddd; ของ li a:hover span ไว้ในของ li a:hover ถ้าเอาสองตัวนี้มารวมกัน เมื่อเมาส์ hover ตัวปุ่มก็จะไม่เปลี่ยนสี เพราะ browser จะมองว่า มีลิสอยู่หนึ่งตัวต่อด้วย tag ลิงค์ที่เป็น hover อยู่ และมี span คุม text อยู่ ("li+a:hover+span")



นับถือคนทำขึ้นจริง ๆ แค่เอา element ของ html มาใช้งานให้เป็นประโยชน์ โดยไม่ต้องตั้ง class เลยสักตัว....ความเก่งสร้างกันได้ ขึ้นอยู่กับเราว่าจะเปิดรับมันหรือเปล่า......อิอิ หนีมาเขียน blog ซะนาน งานพี่เอยังไม่เสร็จเลย กำจริง ๆ -..-""