گوشههای گرد
پرش به ناوبری
پرش به جستجو
با ویژگی border-radius
در CSS، میتوانید به هر عنصری «گوشههای گرد» بدهید.[۱]
ویژگی border-radius در CSS
ویژگی border-radius
در CSS میزان گرد شدن گوشههای یک عنصر را تعریف میکند.
نکته: این ویژگی به شما اجازه میدهد که به عناصر گوشههای گرد اضافه کنید!
در اینجا سه مثال وجود دارد:
- گوشههای گرد برای یک عنصر با رنگ پس زمینه مشخص:
- گوشههای گرد برای یک عنصر دارای کادر:
- گوشههای گرد برای عنصری با تصویر پس زمینه:
در اینجا کد وجود دارد:
نکته: ویژگی border-radius
در حقیقت یک ویژگی مختصر برای ویژگی هایborder-top-left-radius
، border-top-right-radius
، border-bottom-right-radius
و border-bottom-left-radius
است.
ویژگی border-radius در CSS - مشخص کردن هر گوشه
ویژگی border-radius
میتواند از یک تا چهار مقدار داشته باشد. قوانین به صورت زیر است:
- چهار مقدار - border-radius: 15px 50px 30px 5px; (اولین مقدار به گوشه بالا-چپ اعمال میشود، دومین مقدار به گوشه بالا-راست، سومین مقدار به گوشه پایین-راست، و چهارمین مقدار به گوشه پایین-چپ اعمال میشود):
- سه مقدار - border-radius: 15px 50px 30px; (اولین مقدار به گوشه بالا-چپ اعمال میشود، دومین مقدار به گوشه بالا-راست، و سومین مقدار به گوشه پایین-راست اعمال میشود):
- دو مقدار - border-radius: 15px 50px; (اولین مقدار به گوشه بالا-چپ و گوشه پایین-راست، و دومین مقدار به گوشه بالا-راست و گوشه پایین-چپ اعمال میشود):
- یک مقدار - border-radius: 15px; (مقدار این ویژگی به تمامی چهار گوشه اعمال می گردد، که موجب میشود چهار گوشه به میزان برابر گرد شوند):
در اینجا کد مربوطه قرار دارد:
همچنین شما میتوانید گوشههای بیضی شکل نیز ایجاد کنید:
خود را با تمرینها امتحان کنید!
ویژگی های گوشه های گرد در CSS
ویژگی | توضیحات |
---|---|
border-radius | یک ویژگی مختصر برای تنظیم تمامی ویژگی border-*-*-radius |
border-top-left-radius | شکل کادر در گوشه بالا سمت چپ را تعریف میکند |
border-top-right-radius | شکل کادر در گوشه بالا سمت راست را تعریف میکند |
border-bottom-right-radius | شکل کادر در گوشه پایین سمت راست را تعریف میکند |
border-bottom-left-radius | شکل کادر در گوشه پایین سمت چپ را تعریف میکند |
منابع آموزشی