教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢/投訴熱線:400-618-4000

如何用css畫圓?【CSS教程】

更新時(shí)間:2021年08月10日15時(shí)06分 來(lái)源:傳智教育 瀏覽次數(shù):

CSS3語(yǔ)法:

border-radius:length;

1.用CSS3畫圓

使用CSS3畫圓的技巧:讓一個(gè)正方形變成圓形,使 length=正方形邊長(zhǎng)/2。

代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用CSS畫圓</title>
    <style>
        div{
            background-color: #000;
            height: 200px;
            width: 200px;
            /* length為正方形邊長(zhǎng)的的一般 */
            border-radius: 50%; 
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

效果:

CSS畫圓形

2.用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畫圓角矩形

猜你喜歡:

CSS選擇器用法大全

unicode字體是什么?

CSS是什么意思?史上最詳細(xì)介紹

CSS3相比CSS有哪些優(yōu)勢(shì)?

什么是HTML,什么是H5?

傳智教育web前端開(kāi)發(fā)培訓(xùn)課程

0 分享到:

Java高級(jí)軟件工程師課程javaee

Python大數(shù)據(jù)課程python

web前端課程全薪升級(jí)V8.5web

AI+設(shè)計(jì)課程design

大數(shù)據(jù)培訓(xùn)班cloud

軟件測(cè)試培訓(xùn)課程test

c

新媒體運(yùn)營(yíng)培訓(xùn)課程netmarket

產(chǎn)品經(jīng)理培訓(xùn)課程pm

linux培訓(xùn)班Linux

影視制作培訓(xùn)movies

智能機(jī)器人開(kāi)發(fā)robot

電商視覺(jué)設(shè)計(jì)uids

人工智能培訓(xùn)課程Python

集成電路應(yīng)用開(kāi)發(fā)(嵌入式)培訓(xùn)課程jdbc

和我們?cè)诰€交談!