CSS笔记(黑马程序员pink老师前端)圆角边框

圆角边框

border-radius:length;

效果显示

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    div {
        display: inline-block;
        margin-top: 20px;
        margin-left: 30px;
        background-color: pink;
    }

    .div1 {
        /* 圆角边框,用半径为10px的圆,切原有的矩形 */
        border-radius: 10px;
        height: 100px;
        width: 200px;
    }

    .div2 {
        /* border-radius的值也可为百分比,当切角圆的
        半径为正方形的一半时,显示为圆形 */
        border-radius: 50%;
        height: 100px;
        width: 100px;
    }

    .div3 {
        /*圆的半径为高度的一半 */
        border-radius: 60px;
        height: 100px;
        width: 200px;
    }

    .div4 {
        /*依次设置不同的角 */
        border-radius: 10px 20px 40px 80px;
        height: 100px;
        width: 200px;
    }

    .div5 {
        /*只有两个值,为对角线关系 */
        border-radius: 40px 10px;
        height: 100px;
        width: 200px;
    }

    .div6 {
        /*单独设一个角,top与left的顺序不能变 */
        border-top-left-radius: 20px;
        height: 100px;
        width: 200px;
    }
</style>

<body>


    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
</body>

</html>
相关推荐
前端小巷子8 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
碎叶城李白1 小时前
若依学习笔记1-validated
java·笔记·学习·validated
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军1 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出2 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架