CSS3设置圆角化

简介: CSS3设置圆角化

可以使用border-radius属性来设置圆角化

有四个值 分别是:左上  右上  左下  右下

三个值 分别是:左上 右上左下  右下

两个值 分别是:左上右下 右上左下

给单独一角设置圆角化可以使用:border-xxx-xxx-radius

例:左上角 圆角化: border-top-left-radius

        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 50px 0;
            /* 设置左上角圆角 */
            border-top-left-radius: 10px;
        }

例:设置一个半圆

        div{
            width: 200px;
            height: 100px;
            background-color: red;
            margin: 50px 0;
            /* 设置一个半圆 */
            border-radius: 100px 100px 0  0 ;
        }

例:设置四分之一圆

          div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 50px 0;
            /* 设置一个四分之一圆 */
            border-radius: 100px 0 0 0;
        }


相关文章
|
19天前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
36 0
|
19天前
|
前端开发
|
19天前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
21 1
|
19天前
|
前端开发
css设置内嵌样式阴影
css设置内嵌样式阴影
14 0
|
19天前
|
前端开发 JavaScript
css 设置div阴影样式
css 设置div阴影样式
23 0
|
19天前
|
前端开发 JavaScript
css 设置无背景色
css 设置无背景色
28 1
|
19天前
|
前端开发
css 字体渐变样式(设置字体渐变样式+附加实现源码)
css 字体渐变样式(设置字体渐变样式+附加实现源码)
23 0
|
19天前
|
前端开发
css怎样设置下滑线?
css怎样设置下滑线?
|
19天前
|
前端开发
CSS圆角大杀器,使用滤镜构建圆角及波浪效果
CSS圆角大杀器,使用滤镜构建圆角及波浪效果
25 0
|
19天前
css3边框与圆角
css3边框与圆角
37 0