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>
相关推荐
MyFreeIT14 分钟前
Page光标focus在某个控件
前端·javascript·vue.js
通往曙光的路上14 分钟前
day8_elementPlus
前端·javascript·vue.js
Simon_He15 分钟前
最强流式渲染,没有之一
前端·面试·ai编程
你真的可爱呀16 分钟前
uniapp学习【路由跳转 +数据请求+本地存储+常用组件】
前端·学习·uni-app
Jeffrey__Lin17 分钟前
解决ElementPlus使用ElMessageBox.confirm,出现层级低于el-table的问题
前端·javascript·elementui·vue·elementplus
咖啡の猫18 分钟前
Vue-MVVM 模型
前端·javascript·vue.js
xvmingjiang19 分钟前
Element Plus el-table 默认勾选行的方法
前端·javascript·vue.js
野生yumeko1 小时前
伪静态WordPress/Vue
前端·javascript·vue.js
爱因斯坦乐1 小时前
【vue】I18N国际化管理系统
前端·javascript·vue.js·笔记·前端框架
一只游鱼1 小时前
vue集成dplayer
前端·javascript·vue.js·播放器·dplayer