CSS3设置圆角化

可以使用border-radius属性来设置圆角化

有四个值 分别是:左上 右上 左下 右下

三个值 分别是:左上 右上左下 右下

两个值 分别是:左上右下 右上左下

给单独一角设置圆角化可以使用:border-xxx-xxx-radius

例:左上角 圆角化: border-top-left-radius

css 复制代码
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 50px 0;
            /* 设置左上角圆角 */
            border-top-left-radius: 10px;
        }

例:设置一个半圆

css 复制代码
        div{
            width: 200px;
            height: 100px;
            background-color: red;
            margin: 50px 0;
            /* 设置一个半圆 */
            border-radius: 100px 100px 0  0 ;
        }

例:设置四分之一圆

css 复制代码
          div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 50px 0;
            /* 设置一个四分之一圆 */
            border-radius: 100px 0 0 0;
        }

原创作者:吴小糖

创作时间:2024.1.2

相关推荐
顺丰同城前端技术团队6 分钟前
DeepSeek 国产大模型新标杆
前端·后端·程序员
Java水解7 分钟前
微前端架构:从单体到模块化的前端新革命
前端
Mr_汪9 分钟前
uniapp使用h5的map(已弃用)
前端
前端进阶者13 分钟前
vite调试node_modules下面插件
前端·vite
YaHuiLiang20 分钟前
小微互联网公司与互联网创业公司 -- 学历之殇
前端·后端·面试
用户261245834016123 分钟前
vue学习路线(11.watch对比computed)
前端·vue.js
CAD老兵29 分钟前
前端 Source Map 原理与结构详解
前端
gnip33 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长44 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_44 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js