使用border-radius画圆、半圆、扇形

！！！注意：ie9以下的浏览器是不支持 border-radius属性的

border-radius的数值有三种表式方法：px、%、em。这里说明一下 em是倍数 1em=16px

border-radius可以设置水平和垂直方向的半径border-radius:10px/20px 如果省略垂直方向的半径，则默认与水平半径相等border-radius:10px 等效于border-radius:10px/10px

border-radius的多值书写：

一个值时：border-radius:10px：表示四个角的半径
两个值时：border-radis:10px 20px：10表示左上右下的角，20表示右上左下的角
三个值时：border-radius:10px 20px 30px：10表示左上角，20表示右上左下的角，30表示右下角
四个值时：border-radius:10px 20px 30px 40px：10表示左上，20表示右上，30表示右下，40表示左下（顺时针）

了解前面的知识后，开始动手完成本文目标

<head>
<style>div{margin:50px;display:inline-block;width:100px;height:100px;border:3px solid red;}
<style>
</head>
<body><div></div><div id='circle'></div><div id='half-circle'></div><div id='sector'></div>
</body>

效果如下：

现在把第二个画成圆

#circle{border-radius: 50%;}

效果如下:

现在把第三个画成半圆

#half-circle{border-radius:50px 50px 0px 0px;height:50px;}

效果如下：

现在把第四个画成扇形

#sector{border-radius: 50px 0px 0px 0px;width:50px;height:50px;}

效果如下：

欧克，你学会了吗~

使用border-radius画圆、半圆、扇形相关推荐

初始化css样式代码、颜色、字体、浮动与清除浮动、显示、定位、盒子模型、按钮禁用、CSS画圆半圆扇形三角梯形
顔色 sass顔色变量声明在vue中声明颜色变量时需要在 vue.config.js 里面增加如下配置. module.exports = { // ... css: { sourceMap: tr ...
CSS画圆半圆扇形三角梯形
直接上代码: div{margin: 50px;width: 100px;height: 100px;background: red; } /* 半圆 */ .half-circle{height: ...
html怎么制作扇形,css3绘制画圆、扇形
css已经越来越强大了 ,可以使用它来绘制各种简单的形状,用于代替图片显示,这次的分享主要用到画圆,扇形实现圆形 .circle { border-radius: 50%; width: 80px; ...
以下css属性可以用来画圆的是,css3 如何画圆
css3画圆的实现方法:首先创建一个HTML示例文件:然后定义一个div,并命名为"circle":最后通过css属性"border-radius"使div实现 ...
css画圆、半圆、椭圆、圆环
css画圆在css中利用border-radius可以画出我们想要的圆 border-radius属性可以设置盒子四边的圆弧.从上左,上右,下右,下左顺时针依次设置四个属性也可以单独设置一个方向 ...
Google Maps API 以某一经纬度为中心，以某一长度位半径画圆 Draw the radius of a circle...
直接看代码: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" ...
5.前端CSS之基本属性(长宽,字体,文体,背景图片,阴影,border画圆,display)
1.块儿标签长宽height,width块儿标签可以设置长宽,设置长宽后依然独占一行 h1-h6,p,div行内标签无法设置长宽写了也不会生效 i,u,s,b span2.字体样式:font-fa ...
微信小程序圆盘抽奖（扇形画圆）
微信小程序圆盘抽奖(扇形画圆) 前言提示:这里可以添加本文要记录的大概内容: 例如:领导安排做一个微信小程序的转盘抽奖,要求可以复用,动态的修改抽奖的板块个数,由于是第一次做微信小程序踩了很多的坑, ...
【css】用css画圆，半圆和三角形
用css画圆,半圆和三角形圆,半圆三角形圆,半圆 // 圆宽高相等, border-radius大于宽度的一半 .circle{width: 100px;height: 100px;backg ...

使用border-radius画圆、半圆、扇形

使用border-radius画圆、半圆、扇形

使用border-radius画圆、半圆、扇形相关推荐

最新文章

热门文章