a11y.skipToMainContent
1

ตัวสร้างรัศมี CSS

เชื่อมต่อใน CSS มุมรอบภาพ ตั้งแต่ละมุมอิสระ เปลี่ยนหน่วย และคัดลอกพรมแดนสะอาด CSS.

Unit

Corner radius

px
px
px
px

Preview size

%
px

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Border Radius Generator

  1. ลากแถบเลื่อนมุมแต่ละมุม (หรือพิมพ์ค่า) เพื่อตั้งรัศมีสําหรับด้านบน- ซ้าย, บน- ขวา, ล่าง- ขวา และล่างล่างซ้าย.
  2. เลือก หน่วย หนึ่ง — กลุ่ม ละ px, หรือ เอ็ม — และ เปิด ช่อง เชื่อมโยง ให้ เคลื่อน ที่ ทุก มุม ไป ด้วย กัน ได้.
  3. เปิดที่วงรี / อินทรีย์ก้อน เพื่อเพิ่มรัศมีที่สองในแนวตั้ง.
  4. คลิกสําเนา CSS เพื่อจับคําประกาศ ชายแดนพร้อมใช้.

อะไรคือ?

ทรัพย์สินรอบมุมของกล่องของธาตุ เครื่องกําเนิดพลังงานนี้ช่วยให้คุณควบคุมมุมทั้งสี่มุม -- มุมบนซ้าย, ขวาล่าง และล่างซ้าย — โดยอิสระ — โดยมีตัวอย่างสด คุณจะได้เห็นรูปร่างที่คุณปรับมัน. นี่คือรูปร่างแบบออร์แกนิก เมื่อมุมตรงกัน, การแสดงผลจะล้มเหลวโดยอัตโนมัติ โดยสั้นที่สุด
Advertisement

FAQ

อะไรคือรอยขีดข่วนในไวยากรณ์พรมแดน?
รอยตัดแยกตามแนวราบของเรดิไอ จากรัศมีแนวดิ่ง Radious: 50px/20px แต่ละด้านมีมุม 50 px แนวนอน และ 20px แนวตั้ง ผลิตรอบวงรี โดยมี 4 ค่าแต่ละด้าน คุณสามารถสร้างรูปร่างที่เป็นหินอินทรีย์ได้.
ผมควรใช้ px หรือเปอร์เซ็นต์ดี?
ใช้ px แทนมุมที่คงที่ และคาดเดาได้ โดยไม่คํานึงถึงขนาดธาตุ ใช้ % เมื่อคุณต้องการสเกลกับธาตุ เช่น ชายแดน-radius: 50% บนสี่เหลี่ยมจัตุรัส สร้างวงกลมที่สมบูรณ์แบบ.
มันใช้ได้กับบราวเซอร์ทุกคนไหม?
ใช่. radius-radius รองรับในบราวเซอร์รุ่นใหม่ทุกคนโดยไม่มีคํานําหน้า รวมถึงไวยากรณ์แบบวงรีแบบวรรคต ไม่มีผู้จําหน่ายรายก่อนใดต้องการ.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement