源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 5967|回复: 0

[CSS/Html] border-radius详解

[复制链接]

3101

主题

3502

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
270869
发表于 2022-5-1 10:15:28 | 显示全部楼层 |阅读模式
6e5a5533d4f76a048aa74cdebb6ae25ba48.jpg


1.border-radius可以同时设置1到4个值。简洁法
    如果设置1个值,表示4个圆角都使用这个值。
    border-radius:40px;

    如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。
    border-radius: 10px 50px;

    如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。
    border-radius: 10px 50px 40px;

    如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。
    border-radius: 10px 20px 30px 40px;

2.单独设置一个角的写法

border-top-left-radius: 20px; //设置左上角
border-top-right-radius: 20px; //设置右上角
border-bottom-left-radius: 20px; //设置左下角
border-bottom-right-radius: 20px; //设置左下角

11.jpg


3.CSS画实心圆(宽度和高度保持一致,并且设置border-radius:50%)

代码:

.circle{
            width: 150px;/*宽高保持一致*/
            height: 150px;
            line-height: 150px; /*当高度与行高保持一致时为垂直居中*/
            border-radius: 50%;
            background: orange;
            margin: 50px;
            text-align: center;
            color: #fff;
        }

<div class="circle">圆形</div>

22.jpg

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-19 23:29 , Processed in 0.038227 second(s), 19 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明