آموزش border and multiple images در CSS3
CSS3 امکانات بیشتری را در اختیار شما قرار میدهد که ممکن است مرورگر های قدیمی این امکانات را ساپورت نکنند.
برای مثال میخواهید قابی را به وجود آورده که میزان گردی گوشه های آن با هم متفاوت باشد. به مثال زیر دقت کنید.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="lesson.css">
</head>
<body>
<div id="main">
<h1>فرکیان تک</h1>
<p>تخصصی ترین مجموعه آموزشی و پژوهشی آنلاین ایران – ارائه آموزش‌های ویدئویی و فیلم‌های آموزشی شبکه ، سیسکو ، مایکروسافت ، لینوکس ، امنیت ، طراحی وب ، تست نفوذ ، زبان انگلیسی ، زبان فرانسه ، زبان ترکی استانبولی و دروس تخصصی دانشگاهی فنی و مهندسی</p>
</div>
</body>
</html>
#main{
width: 200px;
height: auto;
border: aqua groove 4px;
text-align: right;
margin-left: 35%
}
p{
margin: 20px;
}
h1{
margin-right: 20px;
}
حال میتوانید با دستور زیر انحنای گوشه ها را تغییر دهید.
#main{
width: 200px;
height: auto;
border: aqua groove 10px;
border-radius: 40px 10px 40px 10px;
text-align: right;
margin-left: 35%
}
که در تعریف border-radius:40px 10px 40px 10px; عدد اول گوشه بالا چپ و عدد دوم گوشه بالا راست و عدد سوم گوشه پایین راست و عدد اخر گوشه پایین چپ است.
همچنین امکان این وجود دارد که در این بخش چند عکس را با هم ترکیب کنید.
#main{
width: 200px;
height: auto;
border: aqua groove 10px;
border-radius: 40px 10px 40px 10px;
text-align: right;
margin-left: 35%;
background-image:url(img2.png),url(1.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
background-size: contain, contain;
}
اول با دستور background-image هر دو عکس را خوانده و سپس با دستور background-position مکان هرکدام را انتخاب میکنید. بعد دستور میدهید (background-repeat) که عکس شما تکرار شود یا خیر و در نهایت از contain استفاده میکنیم که عکس ها بتوانند در div جا شود.
برای دیدن آموزش های بیشتر جزوات CSS را دنبال کنید.
