CSS3 边框圆角 展示示例（附代码）

最新推荐文章于 2024-09-25 09:11:55 发布
最新推荐文章于 2024-09-25 09:11:55 发布
阅读量2.5k 收藏 4
点赞数 3
分类专栏： CSS HTML 文章标签： 边框圆角示例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37968920/article/details/82421547
版权
HTML 同时被 2 个专栏收录
25 篇文章 1 订阅
订阅专栏
CSS
14 篇文章 1 订阅
订阅专栏

边框圆角 展示示例

这里写图片描述

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 边框</title>
    <style>
        body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #F7F7F7;
        }

        .wrapper {
            width: 1000px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }

        header {
            padding: 20px 0;
            margin-bottom: 20px;
            text-align: center;
        }

        header h3 {
            line-height: 1;
            font-weight: normal;
            font-size: 28px;
        }

        .main {
            /*overflow: hidden;*/
        }

        .main:after {
            content: '';
            clear: both;
            display: block;
        }

        .main .item {
            width: 210px;
            height: 210px;
            margin: 0 30px 30px 0;
            display: flex;
            position: relative;
            background-color: #FFF;
            float: left;
            box-shadow: 2px 2px 5px #CCC;
        }

        .main .item:after {
            content: attr(data-brief);
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 210px;
            position: absolute;
            top: 0;
            left: 0;
            color: #FFF;
            font-family: '微软雅黑';
            font-size: 18px;
            background-color: rgba(170, 170, 170, 0);
            z-index: -1;
            transition: all 0.3s ease-in;
        }

        .main .item:hover:after {
            background-color: rgba(170, 170, 170, 0.6);
            z-index: 100;
        }

        .main .item:nth-child(4n) {
            margin-right: 0;
        }

        /*.main .item:nth-last-child(-n+5) {
            margin-bottom: 0;
        }*/

        /* 以上是骨架样式 */
        /* 1、2、3、4 顺时针 */
        .border-radius {
            width: 180px;
            height: 180px;
            margin: auto;
            border: 1px solid red;
            /*border-radius: 50% 30% 20%;*/
        }

        .square {
            border-radius: 0;
        }

        /*拱形*/
        .item:nth-child(1) .border-radius {
            border-radius: 90px;
        }

        /*拱形*/
        .item:nth-child(2) .border-radius {
            border-radius: 90px 90px 0 0;
        }

        /*半圆*/
        .item:nth-child(3) .border-radius {
            height: 90px;
            border-radius: 90px 90px 0 0;
        }

        /*左上角*/
        .item:nth-child(4) .border-radius {
            /*height: 90px;*/
            border-radius: 90px 0 0 0;
        }

        /*四分之一圆*/
        .item:nth-child(5) .border-radius {
            width: 90px;
            height: 90px;
            border-radius: 90px 0 0 0;
        }

        /*横着的椭圆*/
        .item:nth-child(6) .border-radius {
            height: 90px;
            /*border-radius: 50%;*/
            border-radius: 90px 90px 90px 90px / 45px 45px 45px 45px;
            /*border-radius: 45px / 90px;*/
        }

        /*竖着的椭圆*/
        .item:nth-child(7) .border-radius {
            width: 90px;
            border-radius: 45px 45px 45px 45px / 90px 90px 90px 90px;
        }

        /*半个横着的椭圆*/
        .item:nth-child(8) .border-radius {
            height: 45px;
            border-radius: 90px 90px 0 0 / 45px 45px 0 0;
        }

        /*半个竖着的椭圆*/
        .item:nth-child(9) .border-radius {
            width: 45px;
            border-radius: 45px  0 0 45px / 90px 0 0 90px;
        }

        /*四分之一竖着的椭圆*/
        .item:nth-child(10) .border-radius {
            width: 45px;
            height: 90px;
            border-radius: 45px 0 0 0 / 90px 0 0 0;
        }

        /*饼环*/
        .item:nth-child(11) .border-radius {
            width: 40px;
            height: 40px;
            border: 70px solid red;
            border-radius: 90px;
        }

        /*圆饼*/
        .item:nth-child(12) .border-radius {
            width: 40px;
            height: 40px;
            border: 70px solid red;
            border-radius: 60px;
        }

        /*左上角圆饼*/
        .item:nth-child(13) .border-radius {
            width: 60px;
            height: 60px;
            border: 60px solid red;
            border-radius: 90px 0 0 0;
        }

        /*对角圆饼*/
        .item:nth-child(14) .border-radius {
            width: 60px;
            height: 60px;
            border: 60px solid red;
            border-radius: 90px 0 90px 0;
        }

        /*四边不同色*/
        .item:nth-child(15) .border-radius {
            width: 0px;
            height: 0px;
            border-width: 90px;
            border-style: solid;
            border-color: red green yellow blue;
        }

        /*右透明色*/
        .item:nth-child(16) .border-radius {
            width: 0px;
            height: 0px;
            border-width: 90px;
            border-style: solid;
            border-color: red green yellow blue;
            border-right-color: transparent;
        }

        /*圆右透明色*/
        .item:nth-child(17) .border-radius {
            width: 0px;
            height: 0px;
            border-width: 90px;
            border-style: solid;
            border-color: red;
            border-right-color: transparent;
            border-radius: 90px;
        }

        /*圆右红透明色*/
        .item:nth-child(18) .border-radius {
            width: 0px;
            height: 0px;
            border-width: 90px;
            border-style: solid;
            border-color: transparent;
            border-right-color: red;
            border-radius: 90px;
        }

        /*阴阳图前世*/
        .item:nth-child(19) .border-radius {
            width: 180px;
            height: 0px;
            border-top-width: 90px;
            border-bottom-width: 90px;
            border-style: solid;
            border-top-color: red;
            border-bottom-color: green;
            /*border-right-color: red;*/
            border-radius: 90px;
        }

        /*阴阳图前世2*/
        .item:nth-child(20) .border-radius {
            width: 180px;
            height: 90px;
            border-bottom-width: 90px;
            border-style: solid;
            border-bottom-color: green;
            background-color: red;
            /*border-right-color: red;*/
            border-radius: 90px;
        }

        /*阴阳图今生*/
        .item:nth-child(21) .border-radius {
            width: 180px;
            height: 90px;
            border-bottom-width: 90px;
            border-style: solid;
            border-bottom-color: green;
            background-color: red;
            border-radius: 90px;
            position: relative;
        }

        .item:nth-child(21) .border-radius::after,
        .item:nth-child(21) .border-radius::before {
            content: '';
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            /*margin: -10px 0 0 0;*/
            border-width: 35px;
            border-style: solid;
            border-radius: 45px;
        }

        /*左阴阳*/
        .item:nth-child(21) .border-radius::after {
            background-color: red;
            border-color: green;
        }

        /*右阴阳*/
        .item:nth-child(21) .border-radius::before {
            background-color: green;
            border-color: red;
            right: 0;
        }

        /*右阴阳*/
        .item:nth-child(22) .border-radius {
            width: 180px;
            height: 90px;
            border-bottom-width: 90px;
            border-bottom-color: green;
            border-bottom-style: solid;
            background-color: red;
            border-radius: 90px;
            position: relative;
        }

        .item:nth-child(22) .border-radius::after,
        .item:nth-child(22) .border-radius::before {
            content: '';
            position: absolute;
            top: 50%;
            width: 20px;
            height: 20px;
            border-width: 35px;
            border-style: solid;
            border-radius: 45px;
        }

        .item:nth-child(22) .border-radius::before {
            border-color: green;
            background-color: red;
        }

        .item:nth-child(22) .border-radius::after {
            right: 0;
            border-color: red;
            background-color: green;
        }

        /*消息框*/
        .item:nth-child(23) .border-radius {
            width: 160px;
            height: 80px;
            background-color: red;
            border-radius: 6px;
            position: relative;
        }

        .item:nth-child(23) .border-radius::after {
            content: '';
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            border-color: transparent;
            border-right-color: red;
            position: absolute;
            top: 16px;
            left: -20px;
        }

        /*奇怪的图形*/
        .item:nth-child(24) .border-radius {
            width: 40px;
            height: 40px;
            border-width: 45px 0 45px 70px;
            border-style: solid;
            border-radius: 0 0 60px 0;
            border-color: red;
        }

        /*奇怪的图形2*/
        .item:nth-child(25) .border-radius {
            width: 100px;
            height: 40px;
            border-width: 45px 20px 45px 70px;
            border-style: solid;
            border-radius: 60px;
            border-color: red;
        }

        /*QQ对话*/
        .item:nth-child(26) .border-radius {
            width: 160px;
            height: 80px;
            background-color: red;
            border-radius: 6px;
            position: relative;
        }

        .item:nth-child(26) .border-radius::after {
            content: '';
            position: absolute;
            top: 0;
            right: -20px;
            width: 30px;
            height: 30px;
            border-width: 0 0 30px 30px;
            border-style: solid;
            border-bottom-color: red;
            border-left-color: transparent;
            border-radius: 0 0 60px 0;
        }

        /*圆角的百分比设置 */
        .item:nth-child(27) .border-radius {
            width: 180px;
            /*height: 180px;*/
            height: 90px;
            border-radius: 50%;
            border-radius: 90px/45px;

            /*百分比是按横竖两个对应的方向的长度进行计算*/
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <header>
            <h3>CSS3 边框圆角</h3>
        </header>
        <div class="main">
            <div class="item" data-brief="整圆">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="拱形">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="半圆">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="左上角">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="四分之一圆">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="横着的椭圆">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="竖着的椭圆">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="半个横着的椭圆">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="半个竖着的椭圆">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="四分之一竖着的椭圆">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="饼环">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="圆饼">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="左上角圆饼">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="对角圆饼">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="四边不同色">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="右透明色">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="圆右透明色">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="圆右红透明色">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="阴阳图前世">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="阴阳图前世2">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="阴阳图今生">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="阴阳图今生2">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="消息框">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="奇怪的图形">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="奇怪的图形2">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="QQ对话">
                <div class="border-radius"></div>
            </div>
            <div class="item" data-brief="圆角百分比">
                <div class="border-radius"></div>
            </div>
        </div>
    </div>
</body>
</html>
dq_095
关注
专栏目录
CSS3圆角边框
weixin_58139900的博客
10-04 573
目录 圆角 通过 CSS3，能够创建圆角边框，向矩形添加阴影替代之前的切背景图处理 圆角 作用：为元素添加圆角边框 单个边定义 语法： border-*-radius border-top-left-radius 定义了左上角的弧度 border-top-right-radius 定义了右上角的弧度 border-bottom-right-radius 定义了右下角的弧度 border-bottom-left-radius 定义了左下角的弧度
实现CSS3中的border-radius(边框圆角)示例代码
09-25
本篇将详细解释`border-radius`的使用方法，并通过示例代码来展示如何实现不同类型的边框圆角效果。 1. `border-radius`基本语法： `border-radius`属性允许你为每个角落设置单独的半径值，或者为所有角落设置相同...
前端初学者必备：CSS3 圆角和边框的实用指南
weixin_40348267的博客
05-10 483
border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius：这些属性允许你分别为元素的每个角设置不同的圆角半径。CSS3 中的圆角与边框是网页开发中一定会用到的 css 属性，这在现代、美观的界面中非常有用，那如何使用这些属性来创建具有圆角和自定义边框的元素，今天瑶琴带大家来学习或复习这些两个知识点。：border-radius：此属性用于设置元素的四个角的圆角半径。
精通CSS圆角边框：设计现代用户界面
最新发布
weixin_42599558的博客
09-25 962
本文还有配套的精品资源，点击获取 简介：在网页和图形用户界面设计中，圆角边框是一种常用的视觉元素，能够使界面看起来更加现代化和友好。CSS（Cascading Style Sheets）提供了一个简单的方法来实现这种效果，特别是通过 border-radius 属性，它允许设计者指定元素边框角的圆角半径。本文将深入探讨如何使用CSS的各种属性组合来创建复杂的圆...
CSS系列之圆角边框（CSS3）
热门推荐
老__L的博客
01-30 1万+
本文主要介绍CSS的border-bottom-left-radius、border-bottom-right-radius、border-radius、border-top-left-radius、border-top-right-radius属性。圆角边框（CSS3）
CSS3之圆角边框
qq_47086202的博客
10-23 174
CSS3后才增加的圆角样式 圆角边框： border-radius:length; （参数值可以为百分比也可以为数值的形式） 原理: 圆与边框的交集形成圆角效果。 作用： 使盒子的四个角变成圆角，且length越大，四个角的弧度就越小。 圆形边框制作： 1.设置一个正方形盒子 2.将圆角边框设置为盒子边长的一半 圆角矩形的制作： 将border-radius设置为矩形高度的一半 设置边框不同的圆角： border-radius:length1 length2 length3
CSS3的圆角边框
Jiutwogod
03-30 303
1. border-radius属性 语法格式： border-radius:1-4 length | % / 1-4 length | %; length用于设置对象的圆角半径长度，不可为负值。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面的值设置其垂直半径。如果没有“/”,则表示水平和垂直半径相等。 另外，其4个值是按照 top-left、 top-right、 bo...
CSS实现反方向圆角的示例代码
09-22
该示例代码展示了一个实际的应用场景，可以用于创建具有特定设计风格的网页元素，例如分割线、装饰性的边框或按钮等。此外，通过理解这段代码背后的CSS定位技术，开发者可以进一步创造出更多具有创意的布局效果，将...
css3圆角边框和边框阴影示例
09-25
在本文中，我们将深入探讨两个重要的CSS3特性：圆角边框（border-radius）和边框阴影（box-shadow）。 首先，让我们来看看CSS3的圆角边框。在之前的CSS版本中，创建圆角边框需要使用复杂的图片或者JavaScript来实现...
css圆角样式制件代码示例(css设置圆角)
09-25
圆角可能会给页面的实现带来一些难度，比如，它可能需要为每个角使用一张图片，但是这可能会引起某些表现上的问题（比如不同的浏览器可能表现上会有细微的差别）。在WebKit中被支持的CSS3的”border-radius”属性让实现圆角变得非常简单，它只需要几行简单的CSS代码，如
使用css3图形描绘
xiaowei的博客
02-20 915
css描绘各种图形：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 边框</title> <style> body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 { margin: 0;
CSS3圆角边框border-radius
hard_coding_wang
05-28 400
** 圆角边框，顾名思义将直角换成圆角的矩形边框。 ** 设置方法： border-radius:50px; 含义：圆角边框：一个参数（矩形四角圆弧半径同一值） 解释： 圆：由圆心和半径确定，圆的大小由半径确定。 故圆弧的弧度是由构成弧度的两个边确定的。 ...
谈谈用Css3如何实现圆角边框
Drew_杨叔
02-21 307
我们在这要谈的是如何用html编程来实现让边框成为圆角，其中就包括了怎样给一个文本或者一段文字添加边框，在把边框写为圆角。那么我们开始言归正传。 首先我们要知道给一个文本或一段文字添加边框要怎样添加，那我们就得要运用到border那么我们用border添加好边框之后如图： 那么我们根据上图HTML语言得知我们得到的是一个高度和宽都为200px， 颜色为红色的边框。如下图： 那么我们根据这样的效...
Css 圆角代码
wgq_liaobing的专栏
06-03 1193
css 圆角代码做到圆角样式可以重复使用，并且不同包含内容用不同的Class进行设置，可以更换背景样式.testboxcon 用了一个“相对”定位，主要是给里面的多个内容定位做一个参考最外面的div class=“testlayer” 主要是在在大布局时给圆角一个“区域”这个圆角在FF中，可以兼容显示。另外，建议大家在做圆角的时候，最好把弧度控制在5*5px的区域内，10px弧度不好看，而且计算
css实现圆角样式
『程序员·小李』的博客
12-26 1153
<div>border-radius 属性允许您为元素添加圆角边框！ </div> 原始样式 div{ border:1px solid silver; padding:10px 20px; background:#dddddd; width:300px; } 原始效果 修改样式 div{ border:1px solid silver; padding:10px 20px; background:#dddddd; width:300px;..
在css3中如何添加圆角边框、盒子阴影以及文字阴影
J3259392566的博客
04-02 1834
在css3中如何添加圆角边框、盒子阴影以及文字阴影
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值