css怎么画圆

PHP中文网 JavaScript

本文摘自PHP中文网，作者醉折花枝作酒筹，侵删。

css画圆的方法：首先设置div元素的宽高相等；然后使用border-radius属性来画圆，语法格式为“border-radius:50%”。border-radius属性设置元素的外边框圆角，使用一个半径时确定一个圆形。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

提示：该属性允许您为元素添加圆角边框！

注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

设置前：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>document</title>

<style>

div{

    width: 100px;

    height: 100px;

    border: 1px solid rgb(255, 113, 113);

    }

</style>

</head>

<body>

<div></div>

</body>

</html>

效果：

XCD6Z(~X}1QEC~GWTV_6I2E.png

设置后：

1

border-radius: 50%;

效果：

`P~@WV5~JF%)F90AB`]B8$B.png

推荐学习：css视频教程

以上就是css怎么画圆的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

css怎么设置粘性定位

css中一个冒号（:）和两个冒号（::）的区别

编写css文件要写head吗

css outline-width属性怎么用

手把手教你css如何实现毛玻璃效果

css层叠是什么

css如何实现下划线滑动效果

css怎么修改行间距

css怎么设置字体发光效果

css和js后加问号和数字有什么用

更多相关阅读请进入《css》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...