前端Css外圆角写法横/纵方向实现(带源码)

目录

    • 源码如下
    • 效果如下
    • 推荐博主
    • 最后

源码如下

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    .box {
        height: 400px;
        background: rgb(99, 96, 96);
    }

    /* 第一种写法  */

    .list1 {
        width: 50px;
        height: 200px;
    }

    /* vue 的这个:root 写在App.vue里面的style里面全局样式,或者写在重置样式文件全局,才能生效!!!*/
    :root {
        --radius-size: 15px;
        --acticity-color: #fff;
    }

    .navActive {
        background-color: #fff;
        color: rgb(0, 63, 136);
        position: relative;
    }

    .navActive::before,
    .navActive::after {
        content: "";
        display: block;
        height: var(--radius-size);
        width: var(--radius-size);
        position: absolute;
        bottom: 0;
        background: radial-gradient(var(--radius-size) at var(--radius-size) 0px,
                transparent var(--radius-size),
                var(--acticity-color) var(--radius-size));
    }

    .navActive::before {
        right: 0;
        bottom: calc(-1 * var(--radius-size));
        transform: scale(-1);
    }

    .navActive::after {
        right: 0;
        top: calc(-1 * var(--radius-size));
        transform: scaleX(-1);
    }


    /* 第二种写法(1) 横向写法 */
    .list2 {
        position: relative;
        left: 10px;
    }

    .bg3 {
        width: 100px;
        height: 30px;
        /* background: #00CAF5; */
        background: #FFF;
        /* 111111. 下面这个相对定位必须有!!! */
        position: relative;
    }

    /* 下面注释为横向 */
    .bg3::after {
        content: '';
        /* 111111. 下面这个绝对定位必须有!!! */
        position: absolute;
        top: -19px;
        right: 0;
        width: 20px;
        height: 20px;
        background: radial-gradient(circle at 0% 0%, transparent 20px, #FFF 0)
    }

    .bg3::before {
        content: '';
        /* 2222222. 下面这个绝对定位必须有!!! */
        position: absolute;
        bottom: -19px;
        right: 0;
        width: 20px;
        height: 20px;
        background: radial-gradient(circle at 100% 0%, transparent 20px, #FFF 0);
        transform: rotate(180deg);
    }

    /* 第二种写法(2) 纵向写法 */
    .list3 {
        position: relative;
        left: 100px;
        top: 100px;
    }

    .bg4 {
        width: 100px;
        height: 30px;
        background: #00CAF5;
        /* 111111. 下面这个相对定位必须有!!! */
        position: relative;
    }

    /* 下面注释为纵向  background里面颜色可以更改*/
    .bg4::after {
        content: '';
        position: absolute;
        left: -20px;
        bottom: 0;
        width: 20px;
        height: 20px;
        background: radial-gradient(circle at 0% 0%, transparent 20px, #00caf5 0)
    }

    .bg4::before {
        content: '';
        position: absolute;
        right: -20px;
        bottom: 0;
        width: 20px;
        height: 20px;
        background: radial-gradient(circle at 100% 0%, transparent 20px, #00caf5 0)
    }
style>

<body>
    <div class="box">
        
        
        <div class="list1">
            <div class="nav">首页div>
            <div class="nav navActive">页面一div>
            <div class="nav">页面二div>
        div>

        
        
        <div class="list2">
            <div class="bg3"> div>
        div>
        
        <div class="list3">
            <div class="bg4"> div>
        div>
    div>
body>

html>

效果如下

前端Css外圆角写法横/纵方向实现(带源码)_第1张图片

推荐博主

推荐1
推荐2
推荐3
推荐4
推荐5

最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

你可能感兴趣的:(html,vue,Css,css,前端,css3,css外圆角)