精华内容
下载资源
问答
  • css反向圆角
    2021-08-31 16:01:43

     

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style> 
    div
    {
        position: relative;
        margin:0 auto;
        padding:10px 40px; 
        background:#dddddd;
        width:200px;
        height:100px;
        border-radius:25px 25px 0 0;
    }
        div::after{
          position: absolute;
          content: '';
          width: 30px;
          height: 30px;
          line-height: 100px;
          display: block;
          text-align: center;
          background-image: radial-gradient(200px at 30px 0px, #fff 30px, #ddd 30px);
          top : 90px;
          right: -30px;
        }
    </style>
    </head>
    <body>

    <div>border-radius 属性允许您为元素添加圆角边框! </div>

    </body>
    </html>

    -- 运行结果

     

    更多相关内容
  • css反向圆角

    千次阅读 2021-07-19 21:57:23
    效果类似于谷歌浏览器的tab,如图: nav的结构代码(数据类型就是普通的list就不在这里赘述了): {{ menuInfo.title }} 方向圆角样式: :root { font-size: 8px; --radius-size:4px; --acticity-color:black; } ....

    效果类似于谷歌浏览器的tab,如图:

    nav的结构代码(数据类型就是普通的list就不在这里赘述了):

     <nav>
        <div
          :class="{ 'menu-item': true, 'activity': index == selectMenuIndex }"
          v-for="(menuInfo,index) in menuList"
          :key="index"
          @click="handelMenuClick(index)"
        >{{ menuInfo.title }}</div>
      </nav>

     方向圆角样式:

    :root {
      font-size: 8px;
      --radius-size:4px;
      --acticity-color:black;
    }
    
    .menu-item {
      color: white;
      padding: 0.5rem 2rem;
      cursor: pointer;
      margin-right: 1rem;
      border-radius: 4px 4px 0 0;
      position: relative;
    }
    
    .menu-item.activity {
      background: var(--acticity-color) ;
    }
    
    .menu-item.activity::before,
    .menu-item.activity::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)
      );
    }
    .menu-item.activity::before {
      left: calc(-1 * var(--radius-size));
      transform: scaleX(-1);
    }
    .menu-item.activity::after {
      right: calc(-1 * var(--radius-size));
    }

    重点是使用径向渐变【radial-gradient】,原理是将镜像渐变的中心点放置于角落上,再使用透明色作为渐变的中央,再将剩余渐变部分用主色填充。

    展开全文
  • Vue <view class="wrapper-dashed">...Css /*虚线实现*/ .wrapper-dashed{ position: relative; height: 1px; width: calc(100% - 0rpx); } .dashed { border-top: 1px dashed #E5E5E5; height: 0px;

    Vue

    <view class="wrapper-dashed">
    	<view class="dashed"></view>
    </view>
    

    Css

    /*虚线实现*/
    .wrapper-dashed{
    	position: relative;
    	height: 1px;
    	width: calc(100% - 0rpx);
    }
    .dashed {
        border-top: 1px dashed #E5E5E5;
        height: 1px;
        overflow: hidden;
    }
    .dashed:before,.dashed:after{
        display: block;
        position: absolute;
        content: "";
        width:30rpx;
        height:30rpx;
        background-color:#F5F5F5;
        border-radius:50%;
        top: -15rpx;
    }
    .dashed:before{
        left: -15rpx;
    }
    .dashed:after{
        right: -15rpx;
    }
    

    实现效果

    在这里插入图片描述

    展开全文
  • css 利用径向渐变 画反向圆角

    千次阅读 2019-08-06 11:14:31
    css: .rateCard1{ height:15px; width: 170px; background: #34bae8; border-radius: 10px 10px 0 0; line-height: 32px; padding-left: 20px; color: #ffffff; } .rateCard4{ height:10px; ...

    径向渐变:指从一个中心点开始沿着四周产生渐变效果。

    语法:

    background: radial-gradient(shape size at position, start-color, ..., color [stop] ..., last-color);

    参数说明:

    • shape:渐变的形状。

    如果元素宽高相同为正方形,则ellipse和circle显示一样;

    如果元素宽高不相同,默认效果为 ellipse。

      • ellipse表示椭圆形,
      • circle表示圆形。默认为ellipse,
    • size:渐变的大小,即渐变到哪里停止,它有四个值。
      • closest-side:最近边;
      • farthest-side:最远边;
      • closest-corner:最近角;
      • farthest-corner:最远角。默认是最远角。
    • at position:渐变的中心位置。比如:
      • at top left: 中心为元素左上角位置
      • at center center:中心为元素中心位置
      • at 5px 10px: 中心为偏移元素左上角位置右边5px, 下边10px位置。
    • start-color :起始颜色
    • color :渐变颜色,可选起始位置 stop。
    • last-color: 结束颜色。

       

    <div>
    <div class="div">
      <div class="div1">
        <div class="div2">
          <div class="div3">
      
    </div>
    
           <style>
           .div{
            margin-bottom:100px; 
            margin-left: 200px;
            height: 10px;
            width: 175px;
            background:radial-gradient(18px at right top,transparent 50%,blue 50%);
    
           }
           .div1{
            margin-bottom:100px; 
            margin-left: 200px;
            height: 10px;
            width: 175px;
            background:radial-gradient(18px at left top,transparent 50%,blue 50%);
    
           }
           .div2{
            margin-bottom:100px; 
            margin-left: 200px;
            height: 10px;
            width: 175px;
            background:radial-gradient(18px at right bottom,transparent 50%,blue 50%);
    
           }
           .div3{
            margin-bottom:100px; 
            margin-left: 200px;
            height: 10px;
            width: 175px;
            background:radial-gradient(18px at left bottom,transparent 50%,blue 50%);
    
           }
           </style> 
    

     

     

     

    应用:

    html:

    <div class="rateCard1 ha"></div>
                             <div class="rateCard4"></div>
                             <div class="rateCard3"></div>
                             <div class="rateCard2">
                                 <div class="rateCard2_1">
                                     <span class="ha rateCard2_1_span1">目前狀態:</span>
                                     <span class="ha detailClick" @click="detail">详情</span>
                                 </div>
                                 <div class="rateCard2_2">
                                 </div>
                             </div>

    css:

    .rateCard1{
        height:15px;
        width: 170px;
        background: #34bae8;
        border-radius: 10px 10px 0 0;
        line-height: 32px;
        padding-left: 20px;
        color: #ffffff;
    }
    .rateCard4{
        height:10px;
        background: #34bae8;
        width: 179px;
        background:radial-gradient(18px at right top,transparent 50%,#34bae8 50%);
    }
    .rateCard3{
        height:3px;
        background: #34bae8;
        border-radius: 0 20px 0 0;
    }
    .rateCard2{
        height: 120px;
        background: #88ec04;
    }

    结果:

    展开全文
  • CSS实现反方向圆角

    千次阅读 2018-10-12 08:53:17
    原理 父级元素 relative,子元素 absolute,然后通过top、left、right、bottom来设置具体出现位置。 DOM结构 <div class="wrapper-dashed"> <div class="dashed"></div>...CSS样式...
  • 最近写到小程序,设计方面有一个设计图涉及内凹圆角问题。网上百度好多种,都是通过径向渐变实现的。虽然能实现单个角,但是当四个角合在一起就很麻烦了。 上设计图 径向渐变实现: background:radial-...
  • 主要介绍了CSS实现反方向圆角的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 反向css圆角矩形:反向css圆角矩形.serif {background: transparent; width:40%;}.serif h1, .serif p {margin:0 10px;}.serif h1 {font-size:2em; color:#fff;}.serif p {padding-bottom:0.5em;}.serif .b1K, .serif...
  • 本篇文章给大家带来的内容是关于CSS如何实现反方向圆角?(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。原理父级元素 relative,子元素 absolute,然后通过top、left、right、bottom来...
  • border-radius向元素添加圆角边框,css3中的。IE9+chrome safari5+firefox4+现在都支持。可以向input div等设置边框。与border相似,可以四个角一起设置,也可以单独设置。语法:border-radius:1-4 length|%/1-4 ...
  • jQuery+css3圆角tab选项卡切换*{margin: 0;padding: 0;}body{font: 14px Georgia, serif;}h1{width: 310px;margin: 0 auto;padding: 20px 0;color: #222;}.group: before,.group: after{content: "";display: table;...
  • DIV+CSS圆角边框简洁型css圆角:方法1:简洁型css圆角矩形code1:.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{}{display:block;overflow:hidden;}.b1,.b2,.b3,.b1b,.b2b,.b3b{}{height:1px;}.b2,.b3,.b4,.b2b,.b3b,.b4b,...
  • css圆角卷起了一阵风波,只用css来做圆角矩形的技术很早就有了,但是在网页的设计过程中,我们通常用图片实现圆角矩形效果。现在网上很多关于无图片实现css圆角矩形的方法,虽说巧妙,但是代码冗长,难以做到简洁
  • css 实现倒三角圆角

    2021-04-02 19:14:05
    使用条纹背景实现 width: 37px; height: 29px; background: linear-gradient(-41deg, transparent 53%, #61C4CF -33%); background-size: 51px 29px; border-radius: 0 0 0px 5px;
  • 圆角 border-radius:10px;同时设置四个角 border-radius: 20px 40px 50px 60px;顺时针方向,左上,右上,右下,左下 圆形: <div style=”width:100px; height:100px; background:red; border-radius: 50%;”...
  • 反向css圆角矩形:

    千次阅读 2013-04-18 15:11:30
    <style type="text/css"> .serif {}{  background: ...反向css圆角矩形 <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
  • 盒子大小、轮廓、阴影、圆角设置
  • 目录 一 盒子的大小 二 盒子的轮廓 三 盒子的阴影 四 盒子的圆角 一 盒子的大小 默认情况下盒子的大小由内容区、内边距和外边框共同决定的,但是也是可以通过属性进行设置。 box-sizing用来设置盒子尺寸的计算方法...
  • ​核心知识点:CSS radial-gradient() 函数,用径向渐变创建 "图像
  • 在Web前端页面实现圆角效果,CSS3帮你轻松实现,一个人人皆知的属性 圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一。今天,小编为大家介绍CSS3提供的可以将矩形变为圆角...
  • <!DOCTYPE html> <head> <meta ... charset=utf-8" />...纯CSS3制作的圆角效果按钮菜单丨曲阳雕塑</title> <style type="text/css"> nav...
  • 圆角,大家一定都会做,border-radius, 内凹圆角如何实现? 可以拿个白色圆盒子盖住方形盒子的大半边实现,但是这样,是不透明的,背景发生改变时,就要改遮盖盒子的颜色,或者背景是渐变...可以用CSS生成一个背景...
  • CSS3 transition动画 1、transition-property 设置过渡的属性,比如:width height background-color 2、transition-duration 设置过渡的时间,比如:1s 500ms 3、transition-timing-function 设置过渡的运动方式,...
  • css实现圆角三角形例子(无图片) 以前我们做圆角时都会要用到图片来实现,今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦,下面我们一起来看看吧。 效果如下图所示 三角形所对方向"width: 0...
  • 纯DIV+CSS制作圆角矩形

    2013-11-04 16:12:18
    样式1:简洁型css圆角矩形 b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;} .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;} .b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border...
  • 优惠券的特点是带有反向圆角,为了展示效果更好,适配多种场景,不推荐使用背景图片形式,建议使用 css . 网上有几种方案: 一种是 boder+clip 的形式,裁剪出4个小半圆角,拼凑在一起 一种是 radial-gradient 径向渐变,...
  • CSS实现无图片圆角效果!里面有好几种哦!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,888
精华内容 755
关键字:

css反向圆角