CSS 圆角边框

CSS 圆角边框
    CSS 简写边框属性
    CSS 外边距
CSS 圆角边框
border-radius 属性用于向元素添加圆角边框:

图片.png

<p style="border: 3px solid red; padding: 10px; text-align: center;">普通边框</p>
<p style="border: 3px solid red; padding: 10px; text-align: center; border-radius: 5px;">圆角边框</p>
<p style="border: 3px solid red; padding: 10px; text-align: center; border-radius: 8px;">圆角边框</p>
<p style="border: 3px solid red; padding: 10px; text-align: center; border-radius: 12px;">圆角边框</p>


示例:

图片.png

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid red;
}
p.round1 {
  border: 2px solid red;
  border-radius: 5px;
}
p.round2 {
  border: 2px solid red;
  border-radius: 8px;
}
p.round3 {
  border: 2px solid red;
  border-radius: 12px;
}
</style>
</head>
<body>
<h1>border-radius 属性</h1>
<p>此属性用于为元素添加圆角:</p>
<p class="normal">普通边框</p>
<p class="round1">圆角边框</p>
<p class="round2">角更圆的边框</p>
<p class="round3">角最圆的边框</p>
</body>
</html>



1、本站资源长期持续更新。
2、本资源基本为原创,部分来源其他付费资源平台或互联网收集,如有侵权请联系及时处理。
3、本站大部分文章的截图来源实验测试环境,请不要在生产环境中随意模仿,以免带来灾难性后果。

转载请保留出处:  www.zh-cjh.com珠海陈坚浩博客 » CSS 圆角边框

作者: cjh


手机扫一扫,手机上查看此文章:

一切源于价值!

其他 模板文件不存在: ./template/plugins/comment/pc/index.htm

未雨绸缪、居安思危!

数据安全、有备无患!

注意操作、数据无价!

一切源于价值!