css3圆形边框-css3中设置圆角边框的样式有哪些

这篇文章主要给大家展示“css3中设置圆角边框有哪些样式”。 css3中设置圆角边框的样式有哪些？”这篇文章。

样式为： 1.“border-radius:半径值;”; 2.“border-radius：半径值；”； 3.“border-radius：半径值；半径值；”； 4.“边界-半径：半径值半径值半径值半径值；”。

本教程的运行环境：Windows 7系统，CSS3&&HTML5版本，Dell G3笔记本。

圆形边框

1. border-radius属性介绍

给元素添加圆角边框，可以在元素的四个角上设置圆角（属性不继承）

2. 边界半径定义方法

定义border-radius属性有两种方式：border-radius可以同时为四个角设置相同的值（简写属性），或者为四个角设置圆角样式（单独的属性设置）。

(1) 个人属性设置

border-radius：同时设置四个边框的圆角；

请注意，边界的顺序不能被扰乱。 例如，border-top-left-radius 不能写成 border-left-top-radius。 属性是固定的。 】

通过实际操作可以看出，两种表达效果是一样的。

(2) 简写属性

设置border-radius的四个参数，注意顺序关系

1. 该属性只设置一个值，四个边框的圆角使用相同的值。

  border-radius：20px     //四个边框圆角为20px

2.为属性设置两个值。 第一个值设置左上角和右下角，第二个值设置右上角和左下角。

border-radius: 20px 50px    //左上角和右下角20px，右上角和左下角50px

3.为属性设置三个值。 第一个值设置为左上角，第二个值设置为右上角和左下角，第三个值设置为右下角。

border-radius: 20px 50px 5px  //左上角20px，右上角和左下角50px，右下角5px

4.为属性设置四个值，第一个值设置为左上角，第二个值设置为右上角css3圆形边框，第三个值设置为右下角，第四个值设置为左下角角（顺时针方向）

border-radius: 20px 50px 5px 100px  //左上角20px，右下角50px，右下角5px ，左下角100px

3、分别设置水平直径和垂直直径

border-radius的句型

边框半径：{1-4}长度/% / {1-4}长度/%；

border-radius: 20px 10px 40px / 25px 30px

长度定义圆角的形状； % 将圆角的形状定义为比例； {1-4} border-radius参数的数量范围为1到4

注意【按此顺序设置每个半径（radius）的四个值。 如果省略bottom-left，则与top-right相同。 如果省略bottom-right，则与top-left相同。 如果省略top-right，则与top-left相同。

border-radius参数的个数范围是1到4。这里要注意水平直径和垂直直径的使用：在border-radius中，先设置4个角的水平直径，然后设置4个角的垂直直径4个角。 】

例子：

div{border-radius: 20px 5px 100px/15px 30px;}

相当于

div{ border-top-left-radius: 20px 15px;
       border-top-right-radius: 5px 30px;
       border-bottom-right-radius: 100px 15px;
       border-bottom-left-radius: 5px 30px;
    }

表达疗效

4. 申请

使用 border-radius 创建一个正方形

输入 border-radius: r，其中 r 元素的直径（带有厚度单位）css3圆形边框，要创建正方形，应将 r 的值设置为元素高度和长度的一半。

当元素的高度和长度相等时，该值为矩形。

代码

    
    
    
    #box1{
        width: 200px;
        height: 200px;
        background-color: #567;
        border:5px solid red;
        border-radius: 50%;
               margin: auto;
               box-shadow:10px 10px 5px #a2a2a3 ;}
    



    

显示疗效

当我们设置元素的宽度和高度不再相等，改为width:200px; height：100px，出现的是一个椭圆。

border-radius 实现方形和半圆形效果

border-radius中有这样一个特点：

给任何正方形一个足够大的边框半径，使其成为矩形。

注意：当任何两个相邻圆角的直径之和超过边框大小时，用户代理必须按指示值缩小各自的边框直径，直到它们不再相互重叠。

为什么叫边界半径？

有些人可能想知道为什么 border-radius 得名。 这个属性不需要边框来参与工作，看来称之为内容圆角更合适。

真正的原因是 border-radius 使元素 borderbox 的角变圆。 当元素没有边框时，差异可能不可见； 当有边框时，以边框两侧的角为基准进行圆角处理。 边框外侧的圆角会稍小（严格来说，顶角直径将为 max(0, border-radius-border-width)）。

例子：

(1)、border-radius绘制矩形

div{
        width:200px;
        height:200px;
        border-radius:50%;
        background: #f775a9;
    }

性能功效：

例如：设置border-radius:70%，也可以得到一个矩形。

(2)、border-radius实现四个方向的半圆

圆角相当于边框对内容的切割。 圆角值设置越大，元素被切割得越圆。

    
    
    
    .box1{
        width:200px;height:100px;
        border-radius:400px 400px 0 0;
        background: #f775a9;
        float:left;
    }
    .box2{
        width:100px;height:200px;
        border-radius:300px 0 0 300px;
        background: #fabab8;
        float:left;
    }
    .box3{
        width:200px;
        height:100px;
        border-radius:0 0 200px 200px ;
        background: #aadfe6;
        float:left;
    }
    .box4{
        width:100px;height:200px;
        border-radius:0 100px 100px 0;
        background: #79e0c3;
        float:left;
    }
    .box5{
        width:100px;height:200px;
        border-radius:0 50px 50px 0;
        background: #acbfea;
        float:left;
    }
    


1
    
2
  
3
4
5

以上就是《css3中设置圆角边框有哪些样式》一文的全部内容，感谢您的阅读！ 相信大家都有了一定的了解，希望分享的内容对大家有所帮助。 如果您想了解更多知识，欢迎关注易速云行业资讯频道！