圆角效果

柔情只为你懂 2022-12-03 12:56 297阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ_size_16_color_FFFFFF_t_70_pic_center 1]

HTML
    <div id="border-btn">
      <button>Hover me</button>
    </div>````
    CSS
    #border-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    
    button {
      border: 0;
      border-radius: 10px;
      background: #2ec4b6;
      text-transform: uppercase;
      color: white;
      font-size: 16px;
      font-weight: bold;
      padding: 15px 30px;
      outline: none;
      position: relative;
      transition: border-radius 3s;
      -webkit-transition: border-radius 3s;
    }
    
    button:hover {
       border-bottom-right-radius: 50px;
       border-top-left-radius: 50px;
       border-bottom-left-radius: 10px;
       border-top-right-radius: 10px;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/cb0c9a689cb2409eb2a76112fcadfe0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/beb51eff54f842bcb50be36da1723fcd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，297人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS圆角大杀器，使用滤镜构建圆角及波浪效果

目录 1，border-radius实现圆角 2，filter: contrast() 配合 filter: blur() 实现圆

梦里梦外;/ 2024年02月25日 01:48/ 0 赞/ 33 阅读

相关 CardView API19及以下圆角效果兼容

CardView API19及以下圆角效果兼容在项目中需要使用CardView，并cardView的顶部为一个ImageView。 <android.supp

左手的ㄟ右手/ 2023年10月17日 12:56/ 0 赞/ 5 阅读

相关圆角效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

柔情只为你懂/ 2022年12月03日 12:56/ 0 赞/ 298 阅读

相关 iOS 高效添加圆角效果实战讲解

在GitHub上更新了demo,欢迎大家去下载:[点击打开链接][Link 1] https://github.com/375537943/WCYCornerRadius

浅浅的花香味﹌/ 2022年07月30日 13:22/ 0 赞/ 188 阅读

相关 CSS圆角效果

上一篇博文中提到了css2.0的圆角效果，但是没有实现，今天闲着没事儿做了一个，想想还是css3来的痛快，用css2做一个圆角确实还是挺痛苦的，其他不说了，先截个图

淩亂°似流年/ 2022年06月13日 09:17/ 0 赞/ 274 阅读

相关 flutter圆角效果的实现

new Material( borderRadius: BorderRadius.circular(20.0), shadowColor: Co

朱雀/ 2022年05月26日 06:15/ 0 赞/ 227 阅读

相关 Css中设置图片阴影和圆角效果

Css中设置图片阴影和圆角效果 ![在这里插入图片描述][20190223222259775.png] ![在这里插入图片描述][20190223222306536.p

ゞ浴缸里的玫瑰/ 2022年03月17日 11:01/ 0 赞/ 484 阅读

相关 CSS 使用Sprites技术实现圆角效果

首先来简单说一下什么是Sprites，Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片

墨蓝/ 2021年11月22日 09:34/ 0 赞/ 350 阅读

相关不用圆角图片制作的圆角效果

<style> td\{font-size:9pt;word-break: break-all\} \corner\{font-size:1px\} \tit\{h

阳光穿透心脏的1/2处/ 2021年11月02日 16:01/ 0 赞/ 391 阅读

相关 Android之glide加载图片圆角效果

1 问题 Android加载图片需要圆角化，有什么简单粗暴的方法吗？当然有，用我们的神器glide 2 解决办法 1）简单办

绝地灬酷狼/ 2021年09月24日 11:54/ 0 赞/ 627 阅读