點燈坊

失くすものさえない今が強くなるチャンスよ

使用 rounded-full 畫圓

Sam Xiao's Avatar 2020-07-29

使用 CSS 畫圓也是常見需求，可使用 rounded-full 簡單實現。

Version

Tailwind CSS 2.1.1

Rounded-full

circle000

<div> 呈現圓形。

<template>
  <div class="rounded-full h-16 w-16 bg-red-500"/>
</template>
  • rounded-full：設定四周 radius 最大弧度，因此為圓形
  • h-16：設定圓形的高度
  • w-16：設定圓形的寬度
  • bg-red-500：設定圓形背景顏色

Conclusion

  • 使用 rounded-full 可輕易畫出原形

Reference

Tailwind CSS, Border Radius

# TailwindCSS