آموزش برنامه نویسی و مجله تخصصی فناوری
آموزش CSS - حاشیه تصویر (Border Image)
تصاویر مرزی (Border Image) CSS3 برای افزودن گوشه‌های گردشده ویژه به بدنه یا متن با استفاده از خاصیت border-radius استفاده می‌شود.
یک سینتکس ساده:
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}
جدول زیر مقادیر ممکن برای گوشه‌های گرد در CSS3 را نشان می‌دهد:
| شماره | مقدار و توضیحات |
|---|---|
| ۱ |
border-radius از این عنصر برای تنظیم چهار ویژگی شعاع حاشیه استفاده کنید. |
| ۲ |
border-top-left-radius از این عنصر برای تنظیم شعاع حاشیه گوشه بالا و چپ استفاده کنید. |
| ۳ |
border-top-right-radius از این عنصر برای تنظیم شعاع حاشیه گوشه بالا و راست استفاده کنید. |
| ۴ |
border-bottom-right-radius از این عنصر برای تنظیم شعاع حاشیه گوشه پایین و راست استفاده کنید. |
| ۵ |
border-bottom-left-radius از این عنصر برای تنظیم شعاع حاشیه گوشه پایین و چپ استفاده کنید. |
مثال
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(/css/images/logo.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners2">Rounded corners!</p>
<p id = "rcorners3">Rounded corners!</p>
</body>
</html>
هر خاصیت گوشه (Each Corner property)
در CSS، برای تنظیم شعاع حاشیه گوشه‌ها می‌توان از چهار خاصیت مختلف استفاده کرد که هر کدام به تنظیم گوشه‌های مختلف المان کمک می‌کنند. این چهار خاصیت به ترتیب شامل موارد زیر هستند:
border-top-left-radius: برای تنظیم شعاع گوشه بالا و سمت چپ المان استفاده می‌شود.
border-top-right-radius: برای تنظیم شعاع گوشه بالا و سمت راست المان استفاده می‌شود.
border-bottom-right-radius: برای تنظیم شعاع گوشه پایین و سمت راست المان استفاده می‌شود.
border-bottom-left-radius: برای تنظیم شعاع گوشه پایین و سمت چپ المان استفاده می‌شود.
هر یک از این خاصیت‌ها به شما امکان می‌دهد تا شعاع گوشه‌های مورد نظر را تعیین کنید، بنابراین می‌توانید با استفاده از ترکیب این چهار خاصیت، شکل گوشه‌های دلخواه را بسازید.
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id = "rcorners1"></p>
<p id = "rcorners2"></p>
<p id = "rcorners3"></p>
</body>
<body>