CSS学习（五）-css圆角边框

最新推荐文章于 2022-05-12 21:03:00 发布

bwshqh

最新推荐文章于 2022-05-12 21:03:00 发布

阅读量779

点赞数

分类专栏： css css学习文章标签： css webkit 浏览器

本文链接：https://blog.csdn.net/bwshqh/article/details/50785463

版权

css学习同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

一、理论：
1.border-radius:左上\右上\右下\左下
2.border-radius:圆角水平半径/圆角垂直半径
3.在img上应用border-radius在webkit内核浏览器上不能对图片进行剪切
二、实践：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .border-radius{
            width:250px;
            height:100px;
            border:10px solid orange;
            border-radius: 10px;
        }
        .border-radius1{
            width:250px;
            height:100px;
            border:10px solid orange;
            border-radius: 10px 50px;
        }
        .border-radius2{
            width:250px;
            height:100px;
            border:10px solid orange;
            border-radius: 10px 20px 30px;
        }
        .border-radius3{
            width:250px;
            height:100px;
            border:10px solid orange;
            border-radius: 10px 20px 30px 50px;
        }
        .border-radius6{
            width:250px;
            height:100px;
            border:10px solid orange;
            border-radius: 10px 20px 30px 50px / 30px 20px 10px 5px;
        }
        .border-radius7{
            width:250px;
            height:100px;
            border:10px solid orange;
            border-top-left-radius: 10px 50px;
            border-top-right-radius: 20px 60px;
            border-top-left-radius: 20px 60px;
            border-top-right-radius: 30px 50px;
        }
        .border-radius8{
            width:250px;
            height:100px;
            border:10px solid orange;
            border-radius: 50px 0 0 0;
        }
        .border-radius9{
            width:250px;
            height:100px;
            border:10px solid orange;
            border-radius: 30px;
        }
        .border-radius10{
            width:250px;
            height:100px;
            border:30px solid orange;
            border-radius: 35px;
        }
        .border-radius11{
            width: 350px;
            height: 100px;
            border:30px solid orange;
            border-color: 35px 35px 60px 30px;
            border-color: orange red green blue;
            border-radius: 80px;
        }
    </style>
</head>
<body>
    <div class = "border-radius" ></div>
    <div class = "border-radius1" ></div>
    <div class = "border-radius2" ></div>
    <div class = "border-radius3" ></div>
    <div class = "border-radius6" ></div>
    <div class = "border-radius7" ></div>
    <div class = "border-radius8" ></div>
    <div class = "border-radius9" ></div>
    <div class = "border-radius10" ></div>
    <div class = "border-radius11" ></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        img{
            border:5px solid red;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <img src = "images/border-radius.jpg" width="132" height="150" />
</body>
</html>

bwshqh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS学习（五）-css圆角边框

一、理论：1.border-radius:左上\右上\右下\左下2.border-radius:圆角水平半径/圆角垂直半径3.在img上应用border-radius在webkit内核浏览器上不能对图片进行剪切二、实践：1. Title .border-radius{ width:250px;
复制链接

扫一扫