[分享]css不知宽高边框设为圆角

CSS的圆角（borderradius）属性可以让元素的边框变得更加圆润，让页面看起来更加美观。但是，当我们不知道元素的宽度和高度时，如何设置圆角呢？ 其实，CSS提供了一种解决方案。我们可以使用CS...

CSS的圆角（border-radius）属性可以让元素的边框变得更加圆润，让页面看起来更加美观。但是，当我们不知道元素的宽度和高度时，如何设置圆角呢？
其实，CSS提供了一种解决方案。我们可以使用CSS3的盒模型属性box-sizing来设置元素的宽度和高度，并将边框设置为圆角。下面是一段示例代码：

/* 设置元素样式 */
<style>
   p {
      box-sizing: border-box;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;
   }
</style>
<br>
/* HTML代码 */
<p>这是一个例子<p> 

上面的代码中，我们通过设置box-sizing属性为border-box，将元素的宽度和高度包括在内，使得元素的实际大小等于我们所设置的宽度和高度。
然后，我们设置元素的内边距padding和边框border，再将边框设置为圆角border-radius，就可以实现圆角效果了。
需要注意的是，当我们设置元素的宽度和高度时，需要考虑到元素内容的大小和宽度。如上面示例中，我们设置了内边距padding为10px，所以元素的实际宽度和高度需要加上20px（左右两侧各10px）。
总之，利用box-sizing属性和border-radius属性，我们可以很方便地为元素设置圆角边框，无需考虑元素的实际大小，大大提高了页面的美观性。