Presets
Corners
Top Left16px
Top Right16px
Bottom Right16px
Bottom Left16px
Unit
Generated CSS
border-radius: 16px;Category:css
Mode:Offline
Version:1.0.0
Access:Free
מהו מחולל רדיוס הגבול CSS?
מחולל רדיוס הגבול CSS הוא עורך חזותי עבור המאפיין רדיוס גבול CSS.אתה גורר מחוון עבור כל פינה, צופה בסיבוב רכיב תצוגה מקדימה בזמן אמת, ומעתיק את ה-CSS המדויק שהוא מייצר - ללא ניחוש ערכי פיקסלים וטעינה מחדש של הדף.
המאפיין Border-Radius נראה פשוט אבל יש לו קיצור קומפקטי שמוציא אנשים למעלה: ערך אחד מעגל את כל ארבע הפינות, שני ערכים מגדירים את שני האלכסונים, וארבעה ערכים פועלים עם כיוון השעון משמאל למעלה. כלי זה מאפשר לך להגדיר כל פינה באופן עצמאי ולאחר מכן מוציא את הקיצור המקביל הקצר ביותר באופן אוטומטי, כך שה-CSS שלך יישאר נקי.
הכל פועל בדפדפן שלך. התחל מהגדרה מראש כמו כרטיס, גלולה, עיגול או כתם, כוונן כל פינה, החלף את היחידה בין פיקסלים ואחוזים והעתק את ההצהרה. אין חשבון, אין העלאות, והוא ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף.
אחוזים ופיקסלים מתנהגים אחרת בכל דבר שאינו מרובע, וההבדל מפתיע אנשים רדיוס פיקסל הוא אותה עקומה בכל פינה, בעוד שאחוז נמדד מול כל ציר בנפרד, כך ש-50 אחוז בקופסה רחבה נותן אליפסה ולא עיגול, כלומר התכונה שהופכת מלבן לגלולה או לצורת עדשה המפרט גם מגן עליך מפני גיאומטריה בלתי אפשרית: כאשר הרדיוסים לאורך קצה אחד מסתכמים ליותר מאורך הקצה הזה, הדפדפן משנה כל רדיוס באלמנט כלפי מטה באופן פרופורציונלי במקום לחפוף אותם, כך שערך גדול מפסיק לצמוח בשקט. הפלט משתמש בקיצור התקף הקצר ביותר, וזו הסיבה שארבע פינות שוות קורסות למספר בודד.
כיצד להשתמש במחולל רדיוס הגבול CSS?
1
בחר הגדרה מראש או התחל מחדש
בחר הגדרה מראש כגון מעוגל, גלולה, עיגול או כתם לנקודת התחלה מיידית, או התחל מהפינות המעוגלות המוגדרות כברירת מחדל.
2
התאם כל פינה
גרור את המחוונים השמאלי העליון, הימני העליון, הימני התחתון והשמאלי למטה כדי לעגל כל פינה באופן עצמאי, או הגדר את כולם לאותו ערך עבור רדיוס אחיד.
3
בחר יחידה
עבור בין px, %, em ו-rem. אחוזים יוצרים פינות אליפטיות ביחס לגודל האלמנט - הגדר 50% בכל הפינות כדי ליצור עיגול או אליפסה מושלמים.
4
העתק את ה-CSS
העתק את הצהרת רדיוס הגבול שנוצר, כבר מכווץ לקיצור התקף הקצר ביותר, והדבק אותו בגיליון הסגנונות שלך.
תכונות מפתח
שליטה לפינה
מחוונים עצמאיים לכל ארבע הפינות מאפשרים לך לבנות צורות אסימטריות כמו עלים, לשונית ורדיוסי בועות דיבור, לא רק עיגול אחיד
הפלט התקף הקצר ביותר
הכלי ממוטט את ארבע הפינות שלך לקצר הקצר ביותר ברדיוס הגבול המקביל ביותר, תוך שמירה על ה-CSS שלך נקי וקריא
מספר יחידות
עבור בין px, %, em ו-rem - אחוזים מייצרים פינות אליפטיות ביחס לגודל הקופסה, וכך נוצרים עיגולים וכתמים
תצוגה מקדימה חיה
רכיב תצוגה מקדימה מתעדכן באופן מיידי תוך כדי גרירה, כך שתוכל לראות בדיוק איך הפינות מסתובבות לפני שאתה מעתיק משהו
Frequently Asked Questions
רדיוס גבול מקיף את הפינות של אלמנט. הוא מקבל ערכים אחד עד ארבעה: ערך אחד מעגל את כל הפינות באותה מידה, שני ערכים מגדירים את הזוגות השמאליים העליונים/הלמטה-ימין והעליון-ימין/השמאלה-למטה, וארבעה ערכים פועלים עם כיוון השעון החל מהפינה השמאלית העליונה.
Related Tools
CBS
css
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CCG
css
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
CGG
css
CSS Glassmorphism Generator
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius - then copy production-ready CSS.
CSS
css
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Comments
0 comments
No comments yet. Be the first to share your thoughts!
border radius generatorcss border radiusborder-radius cssrounded corners csscss rounded cornersborder radius toolcorner radius generatorcss blob generator