css画圆、半圆、椭圆、圆环 |
您所在的位置：网站首页 › css直线怎么画 › css画圆、半圆、椭圆、圆环 |
|
css画圆
在css中利用border-radius可以画出我们想要的圆 border-radius属性 可以设置盒子四边的圆弧。从上左，上右，下右，下左顺时针依次设置四个属性 也可以单独设置一个方向如border-radius-top-left 1.css画一个圆首先我们需要一个正方形盒子，border-radius设置弧度的半径为其边长一半即可 代码如下 .picture{ width: 200px; height:200px; background-color: red; border-radius: 100px; }如果盒子的长宽不一样，就画成椭圆了 .picture{ width: 200px; height:100px; background-color: red; border-radius: 100px; } 2.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; } 3.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; } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |