首页技术文章正文

圆角矩形css怎么写?【CSS教程】

更新时间:2021-08-10 来源:黑马程序员 浏览量:

CSS3语法:

border-radius:length;

1.用CSS3换圆角矩形

用CSS3换圆角矩形技巧:矩形就只用高度的一半就好了,length=height/2。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用CSS画圆</title>
    <style>
        div{
            background-color: #000;
            height: 100px;
            width: 300px;
            /* length具体尺寸*/
            border-radius: 20px; 
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

效果:

CSS画圆角矩形

2.用CSS3画圆

使用CSS3画圆的技巧:让一个正方形变成圆形,使 length=正方形边长/2。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用CSS画圆</title>
    <style>
        div{
            background-color: #000;
            height: 200px;
            width: 200px;
            /* length为正方形边长的的一般 */
            border-radius: 50%; 
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

效果:

CSS画圆形



猜你喜欢:

CSS动画和JS动画有什么区别?

CSS是什么意思?CSS的全称是什么?

什么是CSS选择器?如何使用?

Css中如何清理浮动?

常用css样式大全[2020最新整理版]

黑马程序员web前端开发培训课程

分享到:

Java培训班课程javaee

Python培训机构python大数据

web前端培训课程升级V8.5web

AI+设计培训课程ui

大数据培训课程cloud

软件测试培训课程test

c

新媒体运营培训netmarket

产品经理培训课程pm

linux培训Linux

movies

智能机器人培训robot

电商视觉设计课程uids

AI

集成电路应用开发(嵌入式)培训课程jdbc

在线咨询 我要报名
和我们在线交谈!