css怎么实现半圆


本文摘自PHP中文网,作者藏色散人,侵删。

css实现半圆的方法:首先创建一个HTML示例文件;然后在body中输入一个p标签;接着把高度height设置为宽度width的一半,并且左上角和右上角的圆角半径定义为元素的高度一致;最后将右下角和左下角的圆角半径定义为0即可实现半圆效果。

本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑

css怎么实现半圆

半圆

半圆分为:上半圆、下半圆、左半圆、右半圆,我们只要学会制作某一个方向的半圆,其他方向的半圆都可以轻松实现,其原理都一样。

假如我们要制作上半圆,实现原理:把高度height设置为宽度width的一半,并且左上角和右上角的圆角半径定义为元素的高度一致,而右下角和左下角的圆角半径定义为0.

而右下角和左下角的圆角半径定义为0.

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>半圆角</title>

    <style type="text/css">

        p{

            width: 100px;

            height: 50px;

            border:1px solid black;

            background-color: blue;

            border-radius: 100px 100px 0 0;

        }

    </style></head><body>

    <p></p></body></html>

结果:

阅读剩余部分

相关阅读 >>

html+css实现网页滑动门效果实例分享

css怎么取消边框

css有哪些版本

css如何使用伪元素清除浮动

html读取不了css样式怎么办

css中怎么设置图片大小

jq如何改变css样式宽度

利用css如何实现图片轮播效果?(代码示例)

css box-flex-group属性怎么用

css能换图片颜色吗

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




打赏

取消

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

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

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

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

评论

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