圆角效果

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

在这里插入图片描述
在这里插入图片描述

  1. HTML
  2. <div id="border-btn">
  3.   <button>Hover me</button>
  4. </div>````
  5. CSS
  6. #border-btn {
  7.   display: flex;
  8.   align-items: center;
  9.   justify-content: center;
  10.   height: 100vh;
  11. }
  13. button {
  14.   border: 0;
  15.   border-radius: 10px;
  16.   background: #2ec4b6;
  17.   text-transform: uppercase;
  18.   color: white;
  19.   font-size: 16px;
  20.   font-weight: bold;
  21.   padding: 15px 30px;
  22.   outline: none;
  23.   position: relative;
  24.   transition: border-radius 3s;
  25.   -webkit-transition: border-radius 3s;
  26. }
  28. button:hover {
  29.    border-bottom-right-radius: 50px;
  30.    border-top-left-radius: 50px;
  31.    border-bottom-left-radius: 10px;
  32.    border-top-right-radius: 10px;
  33. }

发表评论

表情：
评论列表 （有 0 条评论，360人围观）

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

相关阅读

    相关 CSS圆角效果

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

    淩亂°似流年淩亂°似流年/ 0 赞/ 351 阅读

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

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

    墨蓝墨蓝/ 0 赞/ 410 阅读