.rounded { border-radius: 50%; width:100px; height:100px; background-color: #000000; }
上面这段CSS代码展示了如何创建一个圆形边框样式。大家可以通过设置border-radius的值为50%来将一个矩形转化为一个圆形。接着设定元素的大小为宽度与高度均为100像素,最后设置元素的背景颜色为黑色。
需要注意的是,若需要创建一个椭圆形的样式,则可以设置border-radius-x和border-radius-y的值分别为50%和25%(或其他相近的值)。这种方法同样也适用于一个整体的样式,如background、outline等,而不仅仅是边框样式。
在实际的应用中,圆形边框样式被广泛应用于头像、产品特色介绍等场景中。相比传统的矩形或者圆角矩形样式,圆形或者椭圆形边框样式更显得精致、新颖。