当前位置：网站首页 > 技术文章 > 正文

CSS隐藏的威力_css中隐藏的是什么命令

zhezhongyun 2025-09-01 19:21 20 浏览

如何使用border-radius属性

下面是border-radius属性最基本的使用方法。

.round {

border-radius: 5px; /* 所有角都使用半径为5px的圆角，此属性为CSS3标准属性 */

-moz-border-radius: 5px; /* Mozilla浏览器的私有属性 */

-webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */

border-radius: 5px4px3px2px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */

}

1.用border-radius画圆

实心圆

如图，是用border-radius属性画出来的一个完美的实心圆。画实心圆的方法是高度和宽度相等，并且把border的宽度设为高度和宽度的一半。

代码如下：

#circle{

width: 200px;

height: 200px;

background-color: #efefef; /* Can be set to transparent */

border: 3px#a72525solid;

-webkit-border-radius: 100px;

}

虚线圆

#circle{

width: 200px;

height: 200px;

background-color: #efefef; /* Can be set to transparent */

border: 3px#a72525dashed;

-webkit-border-radius: 100px100px100px100px;

}

2.半圆和四分之一圆

半圆

以本例来讲，半圆的画法是把宽度设为高度的一半，并且也只设置左上角和左下角的半径。

代码如下：

#quartercircle {

width: 200px;

height: 200px;

background-color: #a72525;

-webkit-border-radius: 200px000;

}

四分之一圆

四分之一圆的实现方法是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。

本例代码如下：

CSS隐藏的威力_css中隐藏的是什么命令

如何使用border-radius属性

1.用border-radius画圆

实心圆

虚线圆

2.半圆和四分之一圆

半圆

四分之一圆

更多玩法

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）