CSS3 - गोल कोनों
CSS3 के गोल कोनों को बॉर्डर या त्रिज्या संपत्ति का उपयोग करके विशेष रंगीन कोने को शरीर या पाठ में जोड़ने के लिए उपयोग किया जाता है। गोल कोनों का सरल वाक्य विन्यास इस प्रकार है -
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}निम्न तालिका गोल कोनों के लिए संभावित मान निम्नानुसार दर्शाती है -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | border-radius चार बोर्डर त्रिज्या संपत्ति की स्थापना के लिए इस तत्व का उपयोग करें |
| 2 | border-top-left-radius शीर्ष बाएं कोने के बोर्डर को सेट करने के लिए इस तत्व का उपयोग करें |
| 3 | border-top-right-radius शीर्ष दाएं कोने के बोर्डर को सेट करने के लिए इस तत्व का उपयोग करें |
| 4 | border-bottom-right-radius नीचे दाएं कोने के बोर्डर को सेट करने के लिए इस तत्व का उपयोग करें |
| 5 | 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>यह निम्नलिखित परिणाम का उत्पादन करेगा -
प्रत्येक कोने की संपत्ति
हम नीचे दिखाए गए उदाहरण के अनुसार प्रत्येक कोने की संपत्ति निर्दिष्ट कर सकते हैं -
<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>यह निम्नलिखित परिणाम का उत्पादन करेगा -