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

相关推荐
夕水10 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
Winwin11 分钟前
js基础-数据类型
javascript
Winwin12 分钟前
哈?Boolean能作为回调函数?
javascript
我麻烦大了13 分钟前
实现一个简单的Vue响应式
前端·vue.js
Shartin16 分钟前
CPT208-Human-Centric Computing: Prototype Design Optimization原型设计优化
开发语言·javascript·原型模式
独立开阀者_FwtCoder20 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
dme.28 分钟前
Javascript之DOM操作
开发语言·javascript·爬虫·python·ecmascript
Cacciatore->31 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~32 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo33 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记