توسط ویژگی border می توان عرض، نوع و رنگ حاشیه هر چهار سمت یک عنصر را تعریف کرد.
از طریق این ویژگی می توان هر سه ویژگی border-width، border-style و border-color را بطور هم زمان برای هر چهار سمت عنصر تنظیم کرد.
باید توجه داشته باشیم که هر کدام از این سه ویژگی هم کوتاه شده ای برای چهار ویژگی دیگر هستند:
برای بررسی ویژگی های بالا و مقادیر اولیه شان به مطلب مخصوص به آن مراجعه کنید.
ویژگی border سه مقدار می پذیرد و اگر هر کدام از مقادیر را تعیین نکنیم به مقدار اولیه اش ریست می شود.
.element {
border: 1em; /* color = currentColor style = none */
/* یا */
border: solid orange; /* width = 0 */
/* یا */
border: 1px dotted #eee;
/* یا */
border: 5px solid teal;
}
همینطور که در مثال های بالا دیده می شود با استفاده از این ویژگی نمی توان فقط حاشیه یک سمت خاص عنصر را تعریف کرد. برای این کار نیاز هست که از ویژگی های مختصر نویسی زیر استفاده کنیم:
در دموی زیر حاشیه عنصر را تغییر دهید:
See the Pen border by Mojtaba Seyedi (@seyedi) on CodePen.
ببخشید جناب سیدی در اچ تی ام ال وقتی مثلا میخوایم با استفاده از یوآراِل یه آدرس بدیم دوتا “” میذاریم این فرقش با ” چیه؟
توی HTML فرقی نمی کنند و از هر کدوم استفاده کنید مشکلی پیش نمیاد ولی همیشه از یکی استفاده کنید. توصیه میشه توی HTML از double quotes استفاده کنید. منظور از دوتاییش استفاده کنید.
سلام
ممنون از آموزشات خوبتون
چطور میشه بردر رو به صورت مربعی در بیاریم که گوشه هاش صاف نباشه یعنی منهنی باشه نمیدونم گرفتید یا نه مربعش کامل شکسته نشده باشه سایتتونم واقعا عالیه :-)
منحنی
از border-radius میتونید استفاده کنید
سلام
ممنون از آموزشات خوبتون
چطور میشه بردر رو به صورت مربعی در بیاریم که گوشه هاش صاف نباشه یعنی منحنی باشه نمیدونم گرفتید یا نه مربعش کامل شکسته نشده باشه سایتتونم واقعا عالیه :-)
سلام
سوالم هم مربوط به “بردر” هست هم مربوط به “اینس پکت”
چطوری هست که بضیا ویژگی میدن به “بردر” توی چند کلاس یا ایدی اما توی “اینس پکت” ویژگی های “بردر”نمیاد اما من هر جور کد رو عوض میکنم تمام ویژگی های که من به کلاس “بردر”دادم داخل “اینس پکت” میاد. باید کلاس “بردر” هام رو زیاد کنم ؟؟؟ یا ویژگی جدید بهشون بدم؟؟
کد بدون جاوا وجود داره که”اینس پکت” رو غیر فعال کنم ؟؟
سلام ممنونم از آموزش خوبتون یه سئوال داشتم و اونم اینه که اگه بخوام وقتی لینکم هاور مشیه عین لینک های شما بشه و در حالت عادی هم زیرش خط نباشه باید از چه کدی در CSS استفاده کنم؟
سلام، مطلب زیر شاید کمک کنه:
https://css-tricks.ir/?p=5741
سلام جناب سیدی
در این صفحه لاگین :
https://codepen.io/akshat46/pen/VgOJYb
وقتی روی text input ها کلیک میکنیم یه border نارنجی رنگ ظاهر میشه. در حالی که border رو به این صورت داده :
border: solid #f8cb98;
و اصلا width رو تعیین نکرده. ابتدا کد هم border : none; گذاشته برای input ها . واقعا برام سواله که این border نارنجی از کجا ظاهر میشه؟؟؟
ممنون میشم کمک کنید.
سلام، وقت بخیر
وقتی اینطوری چیزی رو تعیین نکنیم مرورگر مقدار initial یا همون مقدار اولیه ای که استاندارد اون ویژگی هست رو براش قرار میده، مقدار اولیه حاشیه برای مرورگرها این روزا 3 پیکسل هستش.
یک نکته هم این که اینطور چیزها رو میتونید توی Devtools بررسی کنید، مثلا برید قسمت computed در استایل ها و ….
موفق باشید