วิธีทำขอบโค้งด้วย CSS

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

Moderators: mindphp, ผู้ดูแลกระดาน

exTalion
PHP Newbie
PHP Newbie
Posts: 5
Joined: 10/12/2011 12:09 pm

วิธีทำขอบโค้งด้วย CSS

Post by exTalion » 28/01/2012 9:49 pm

ในการทำกรอบขอบโค้งด้วย CSS จะต้องเขียนไฟล์ CSS ขึ้นมาใช้ก่อนโดยในการสร้างฟังชั่นCSSจะประกาศด้วย
.ตามด้วยชื่อฟังชั่น การเรียกใช้จะใช้ class ตามด้วยชื่อฟังชั่น
หรือ #ตามด้วยชื่อฟังชั่น การเรียกใช้จะใช้ id ตามด้วยชื่อฟังชั่น
ตัวอย่างโค๊ด css
.sidebar {
background-color: #CADCEB;
color: inherit;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 1.2em;
margin-bottom: 10px;
padding: 0 10px;
}
#sidebar {
font-family: Verdana,Arial,Helvetica,sans-serif;
padding: 5px;
width: 175px;
}
.sidebar span.corners-top, .sidebar span.corners-bottom {
margin: 0 -10px;
}
.sidebar ul * {
background-image: none;
margin-top: 0;
padding-top: 0;
}
.sidebar a {
font-weight: normal;
}
.sidebar ul {
list-style: none outside none;
margin-bottom: 10px;
margin-left: 0;
margin-top: 0;
padding-left: 0;
}
.sidebar ul.translations li {
display: inline;
}
.sidebar ul.center {
font-family: Verdana,Arial,Helvetica,sans-serif;
}
.sidebar ul.center li {
text-align: center;
}
.sidebar a {
padding-left: 0 !important;
}
span.corners-top {
background-image: url("index-css_files/corners_left.png");
}
span.corners-top span {
background-image: url("index-css_files/corners_right.png");
}
span.corners-bottom {
background-image: url("index-css_files/corners_left.png");
}
span.corners-bottom span {
background-image: url("index-css_files/corners_right.png");
}
html span.corners-top, * html span.corners-bottom { background-image: url("corners_left2.gif"); }
html span.corners-top span, * html span.corners-bottom span { background-image: url("corners_right2.gif"); }

โดยปกติจะสร้างกรอบสี่เหลี่ยมขึ้นมาธรรมดาแต่เราได้อัพฟังชั่นเพิ่มเติมคือ span.corners ซึ่งจะอัพรูปที่มีมุมโค้งเข้ามาใส่แทนมุมเหลี่ยมของเดิม
โค๊ดการใช้งานไฟล์ CSS
<div class="sidebar">
<span class="corners-top"><span></span></span>
<ul>

<li>ข้อมูล 0 </li>
</ul>
<ul>
<li> ข้อมูล 1 </li>
</ul>

<span class="corners-bottom"><span></span></span>
</div>

Return to “Share Knowledge”

Who is online

Users browsing this forum: No registered users and 60 guests