گرد کردن گوشه های باکس در css

CSS

توسط zare در 5 سال پیش
0 1k 1 5 سال پیش
zare
0

**گرد کردن گوشه های باکس ها قبل از css3 توسط تصاویر انجام میشد که گوشه هارو به صورت تصویر طراحی و قرار میدادند ولی با امدن css3 کدی رو در اختیار شما قرار میده به نام border-radius که این گزینه این امکان رو میده که باکس های خود را گوشه هاشو گرد کنید میتونید هر کدوم از گوشه ها رو که خاستید گرد کنید .. **

<html>
<head>
	<meta charset="utf-8">	
<style>
body {
  background: #EEE
  font-family: arial, helvetica, sans-serif;
  margin: 0;
  padding: 0;
}


#wrapper {
  width: 960px;
  margin: 0 auto;
}


.mydiv {
  margin: 60px auto;
  width: 400px;
  height: 400px;
  background-color: #ff9900
}


#myDiv1 {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
}




#myDiv2 {
  -webkit-border-top-left-radius: 50px;
  -webkit-border-bottom-right-radius: 50px;
  -moz-border-radius-topleft: 50px;
  -moz-border-radius-bottomright: 50px;
}




#myDiv3 {
  -webkit-border-radius: 5px 200px 30px 50px;
  -moz-border-radius: 5px 200px 30px 50px;
}




#myDiv4 {
  -webkit-border-radius: 100px / 30px;
  -moz-border-radius: 100px / 30px;
}




#myDiv5 {
  -webkit-border-radius: 300px;
  -moz-border-radius: 300px;
}




#myDiv6 {
  border-radius: 50px;
}
</style>
</head>
<body>
  <div id="wrapper">
    <div id="myDiv1" class="mydiv"></div>
    <div id="myDiv2" class="mydiv"></div>
    <div id="myDiv3" class="mydiv"></div>
    <div id="myDiv4" class="mydiv"></div>
    <div id="myDiv5" class="mydiv"></div>
    <div id="myDiv6" class="mydiv"></div>
  </div>
</body>
</html>
0

با استفاده از این آموزش می توانید یک منو آبشاری ساده (کرکره ای) را با اسفاده از css و html بسازید بدون نیاز به جاوا اسکریپت.

ul {


font-family: Tahoma;
font-size: 12px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: right;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید