CSS3学习笔记-圆角

来源：互联网发布：情定三生知夏向天吻戏编辑：程序博客网时间：2024/06/09 23:46

圆角

优点：

一.减少网站的维护量

二.提高网站的性能，少了对图片的HTTP请求，网页载入速度加快

三.增加视觉美观性

Border-radius：含义“边框半径”，指定一个值，就是能同时设置四个角的半径（默认值为0，但不可以为负）

Border-radius：25px

讲每个圆角“水平半径”和“垂直半径”设置为25px

（2）指定每个角（圆角参数缺失情况）

  .div1{
            padding: 20px;
            background: red;
            width: 300px;
            border-radius: 25px;
        }
        .div2{
            padding: 20px;
            background: yellow;
            width: 300px;
            border-radius: 15px 50px;
        }
        .div3{
            padding: 20px;
            background: yellow;
            width: 300px;
            border-radius: 15px 50px30px;
        }
        .div4{
            padding: 20px;
            background: pink;
            width: 300px;
            border-radius: 15px 50px 30px30px;
        }
    </style>
</head>
<body>
<div class="div1">一个值，四个圆角值相同</div>
<div class="div2">两个值，第一个值为左上角和右下角，第二个值为右上角和左下角</div>
<div class="div3">三个值，第一个值左上角，第二个值为右上角和左下角，第三个值为右下角</div>
<div class="div4">四个值，第一个值左上角，第二个值为右上角和左下角，第三个值为右下角，第四个值为左下角</div>

四个值

.div1{
            border: 1px solid;
            background: red;
            width: 200px;
            height: 50px;
            border-top-left-radius: 20px;
            border-top-right-radius:20px;
            border-bottom-left-radius:20px;
            border-bottom-right-radius:20px;
        }
    </style>
</head>
<body>
<div class="div1"></div>

注意：属性的两个长度第一个是水平半径，第二个是垂直半径，如果第二个值省略，则它是从第一值赋值。（如果任意长度为0，角落是方的，不圆润）

阅读全文

0 0