css画圆

在css中利用border-radius可以画出我们想要的圆
border-radius属性
可以设置盒子四边的圆弧。从上左，上右，下右，下左顺时针依次设置四个属性
也可以单独设置一个方向如border-radius-top-left

1.css画一个圆

首先我们需要一个正方形盒子，border-radius设置弧度的半径为其边长一半即可
代码如下

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.picture{width: 200px;height:200px;background-color: red;border-radius: 100px;}</style>
</head>
<body>
<div class="picture"></div>
</body>
</html>

如果盒子的长宽不一样，就画成椭圆了

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.picture{width: 200px;height:100px;background-color: red;border-radius: 100px;}</style>
</head>
<body>
<div class="picture"></div>
</body>
</html>

2.css画圆环

不要背景色，只要边框即可
代码如下

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.picture{width: 200px;height:100px;border:1px solid black;border-radius: 100px;}.picture2{width: 200px;height:200px;border:1px solid black;border-radius: 100px;}</style>
</head>
<body>
<div class="picture"></div>
<div class="picture2"></div>
</body>
</html>

3.css画半圆

画半圆时，只需要两个边有弧度即可，半径为最短边
代码如下

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.picture{width: 200px;height:100px;background-color: green;border-top-left-radius:100px;border-top-right-radius:100px;}.picture2{width: 100px;height:200px;background-color: red;border-top-left-radius: 100px;border-bottom-left-radius: 100px;}</style>
</head>
<body>
<div class="picture"></div>
<div class="picture2"></div>
</body>
</html>

css画圆、半圆、椭圆、圆环相关推荐

初始化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: ...
【css】用css画圆，半圆和三角形
用css画圆,半圆和三角形圆,半圆三角形圆,半圆 // 圆宽高相等, border-radius大于宽度的一半 .circle{width: 100px;height: 100px;backg ...
用CSS画圆、半圆、线性箭头
一.css画半圆 border-radius 可以设置盒子四边的弧度.可以设置%,px等单位. 在css中利用border-radius可以画出圆形,半圆,等图案半圆需要两个块元素,两个块元素分别设 ...
html画圆圈原理,用CSS画圆
我曾经向大家分享了一个非常巧妙的用纯CSS画三角形的技巧.在过去的一年里,我发现这种用CSS画三角形的技术非常的有用和高效,尤其是创建提示框/提示符等类似的网页效果上.另外一种也可以用CSS简单的实现 ...
CSS画圆、三角形、品字、骰子
CSS画圆.三角形.品字.骰子前言:这篇文章主要是本人正在看面试题,面试题当成八股文来背,太难了.所以,通过写笔记,并自己实践来加深印象.如果这篇文章对你有帮助,请不要吝啬你的赞. 圆让 bord ...
shader 画圆，椭圆
shader 画圆,椭圆概述概述记录一下如何使用shader来画圆 let shader = {vs: `varying vec2 v_uv;void main() {v_uv = uv;gl_ ...
css画圆, 如何用纯css实现一个动态画圆环效果
最终的效果是:用纯css实现动态画圆的动画效果 html结构如下: <div class="wrap"> <div class="circle" ...
matlab怎么画园与椭圆,[转载]【MATLAB】画圆和椭圆
%圆和椭圆都是0到360°极角乘上极径来控制的图形 %当x,y方向极径相同时画出的就是圆 %当x,y方向极径不同时画出的就是椭圆 %圆心(x0,y0);半径(a,b); %旋转可以有两种方式: %1. ...

css画圆、半圆、椭圆、圆环

css画圆

1.css画一个圆

2.css画圆环

3.css画半圆

css画圆、半圆、椭圆、圆环相关推荐

最新文章

热门文章