微信小程序界面设计小程序中CSS3样式精通课程-边框-border-radius 圆角边框

悠悠 2024-02-19 16:16 28阅读 0赞

### border-radius 圆角边框 ###

通用语法  
浏览器支持  
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
![微信小程序界面设计小程序中CSS3样式精通课程-边框-border-radius 圆角边框][CSS3_-_-border-radius]

### 定义和用法 ###

border-radius 属性是一个简写属性，用于设置四个 border-\*-radius 属性。  
提示：该属性允许您为元素添加圆角边框！  
默认值： 0  
继承性： no  
版本： CSS3  
JavaScript 语法： object.style.borderRadius=“5px”  
语法

border-radius: 1-4 length|% / 1-4 length|%;

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。  
Length ：定义圆角的形状。  
% ：以百分比定义圆角的形状。  
例子 1

border-radius:2em;

等价于：

border-top-left-radius:2em;
    border-top-right-radius:2em;
    border-bottom-right-radius:2em;
    border-bottom-left-radius:2em;

例子 2

border-radius: 2em 1em 4em / 0.5em 3em;

等价于：

border-top-left-radius: 2em 0.5em;
    border-top-right-radius: 1em 3em;
    border-bottom-right-radius: 4em 0.5em;
    border-bottom-left-radius: 1em 3em;

### 小程序应用 ###

> Wxml代码

> Wxss代码

.c01{
      margin: 10px;
      padding: 10px;
      background-color:  gainsboro;
      border-radius: 10px;
    }
    
    .c02{
      margin: 10px;
      padding: 10px;
      background-color:  gainsboro;
      border-top-left-radius: 10px
    }
    
    .c03{
      margin: 10px;
      padding: 10px;
      background-color:  gainsboro;
      border-top-right-radius: 10px;
    }
    
    .c04{
      margin: 10px;
      padding: 10px;
      background-color:  gainsboro;
      border-bottom-left-radius: 10px;
    }
    
    .c05{
      margin: 10px;
      padding: 10px;
      background-color:  gainsboro;
      border-bottom-right-radius: 10px;
    }

效果图  
![微信小程序界面设计小程序中CSS3样式精通课程-边框-border-radius 圆角边框][CSS3_-_-border-radius 1]

[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中CSS3样式精通课程][-_CSS3]  
![微信小程序界面设计小程序中CSS3样式精通课程-边框-border-radius 圆角边框][CSS3_-_-border-radius 2]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[CSS3_-_-border-radius]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/aafdb541053d4095980bf87e257c88e3.png
[CSS3_-_-border-radius 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8f288317e00649aca64775c612344617.png
[-_CSS3]: https://edu.csdn.net/course/detail/12851
[CSS3_-_-border-radius 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/47a07b4917d0429cb1beea3342e55738.png