欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > CSS3画圆角和实心圆的方法介绍
这篇文章主要为大家详细介绍了CSS3画圆角和实心圆的方法介绍,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

在8月3号361模板网给大家介绍了《CSS3画一个半圆的方法 CSS半圆代码》反响很不错,很多用户咨询361模板小编:“CSS3能画圆角吗?“CSS3怎么才能画出实心圆??”等等。。。下面我们就给大家介绍下CSS3如何画出实心圆和圆角。

css3画实心圆

css3画实心圆

代码如下:

<!DOCTYPE html>
<head>
<meta name="renderer" content="webkit"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.circle{
    width:100px;
    height:100px;
    background-color:#cb18f8;
    border-radius:50px; /* 图形的半径 */
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
<html>

上面这段代码我们来分析一下:

1) width 和 height 是定义一个矩形,它们的值均设为100px,即是画一个正方形。

2)background-color 是定义图形的背景颜色。

3)border-radius 是定义图形的半径,这里是50px,即是正方形边长的一半。border-radius 也可以用百分比来表示,如本例50px可以换为50%,效果是一样的。

这样一段代码就可以画出实心圆了。

接下来给大家稍微介绍下css3实现各种圆角的效果。

css3实现各种圆角的效果

这里我们只需要把 border-radius 换成不同的数字,就能实现各种圆角的效果。

css3画圆角

css3画圆角

基本CSS代码如下:

.circle{
width:100px;
height:100px;
background-color:#cb18f8;
border-radius:5px; /* 圆角的大小 */
}

当然了,有的时候我们并不希望所有的角都是圆角,这个时候我们在写border-radius的时候就可以这样写:

.circle{
width:100px;
height:100px;
background-color:#cb18f8;
/* 圆角的大小 排序:左上角 右上角 右下角 左下角 */
border-radius:5px 5px 0 0; 
}

如果想分开写的话,我们需要先了解下border-radius 属性,其实可以分为四个其他的属性,在使用时可单独设置:

border-radius-top-left/*左上角*/
border-radius-top-right/*右上角*/
border-radius-bottom-right/*右下角*/
border-radius-bottom-left/*左下角*/

小结:

本文的重点是利用CSS3的border-radius属性来实现圆角和实心圆的画法,重点在于对border-radius属性的理解和实际应用。

以上就是CSS3画圆角和实心圆的方法介绍的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: CSS3 圆角 实心圆

上一篇织梦DedeCMS文章页浏览次数调用卡顿解决办法

下一篇PHP创建文件夹 PHP判断文件夹文件是否存在

取消

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

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

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

Powered by361模板网,分享从这里开始,精彩与您同在