代理加盟

2023全新代理计划,一站式模板建站,铜牌代理低至699元送终身VIP,独立代理后台,自营贴牌。

您现在的位置: 麦站网 > 站长学院 > 建站教程 >

CSS3 圆角 border-radius

来源:本站原创 发布时间:2019-12-25 22:04:40热度:577 ℃我要评论(0

麦站模板建站平台(10年经验),服务数万家企业,固定透明报价。域名注册、主机/服务器、网站源码一站式服务。实体公司,专业团队,值得选择!超过1000套模板已登记版权,合规合法建站,规避版权风险!【点击获取方案】

CSS3的升级,支持边框圆角,使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。

实例代码一:

01<!DOCTYPE html>
02<html>
03<head>
04<meta charset="utf-8">
05<title>菜鸟教程</title>
06<style>
07#rcorners1 {
08    border-radius: 25px;
09    background: #8AC007;
10    padding: 20px;
11    width: 200px;
12    height: 150px;   
13}
14</style>
15</head>
16<body>
17<p id="rcorners1">圆角</p>
18</body>
19</html>

实例一运行效果:

CSS3 圆角 border-radius

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。

但是,如果你要在四个角上一一指定,可以使用以下规则:

  • 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
  • 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
  • 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
  • 一个值: 四个圆角值相同

以下为三个实例:

1. 四个值 - border-radius: 15px 50px 30px 5px:

2. 三个值 - border-radius: 15px 50px 30px:

CSS3 圆角 border-radius

3. 两个值 - border-radius: 15px 50px:

CSS3 圆角 border-radius

    转载请注明来源网址:https://www.xiuzhanwang.com/news/2038.html

    发表评论

    评论列表(0条)

       
      QQ在线咨询
      VIP限时特惠