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

相关推荐
微信:137971205872 分钟前
web端手机录音
前端
齐 飞8 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹25 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x1 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43912 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang