h5绚丽的边框-border渐变和字体颜色渐变

忘是亡心i 2022-06-04 01:52 647阅读 0赞

1.先看效果图：  
![这里写图片描述][SouthEast]  
2.代码上部分注稀：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    </head>
    <body>
    <style> body{ text-align: center; } button { background: none; border: 0; box-sizing: border-box;/*border和padding全会在你设置的宽高内部*/ margin: 1em; padding: 1em 2em; box-shadow: inset 0 0 4px 3px plum;/*inset内阴影。该参数可选，不设的话默认是外阴影。*/ color: blue; font-size: inherit; font-weight: 700; position: relative; } button::before, button::after { box-sizing: inherit;/*继承父的*/ content: ''; position: absolute; width: 100%; height: 100%; } .draw { transition: color 2s;/*字体颜色出现渐变一个用时2s*/ } .draw::before, .draw::after { border: 2px solid transparent;/*边框设置为透明的*/ width: 0; height: 0; } .draw::before { top: 0; left: 0; } .draw::after { bottom: 0; right: 0; } .draw:hover { color: black; } .draw:hover::before, .draw:hover::after { width: 100%; height: 100%; } .draw:hover::before { border-top-color: red; border-right-color: red; transition: width 0.25s ease-out, /*ease-out是结束是慢的*/ height 0.25s ease-out 0.25s; } .draw:hover::after { border-bottom-color: red; border-left-color: red; transition: width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s; } </style>
    <button class="draw">Draw border</button>
    </body>
    </html>

有用请赞一下咯！嘻嘻

[SouthEast]: /images/20220604/2e5a22138ac04d1ca813047208de3699.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css边框颜色渐变

css边框颜色渐变今儿遇到了一个小小的问题—— 怎么使边框颜色渐变。天秃噜，又是一个知识盲点，不碍事，遇山开山，遇海填海。解决问题就完了。百度可真是个好东

本是古典何须时尚/ 2023年02月10日 05:30/ 0 赞/ 218 阅读

相关 border-image实现渐变边框

一：给矩形实现渐变边框 border: 4rpx solid; border-image: linear-gradient(45deg, d4741a, ee

叁歲伎倆/ 2022年12月25日 04:00/ 0 赞/ 277 阅读

相关 css渐变边框

border-right: 1px solid; border-image: linear-gradient(F2F2F2, D8D8D8, F2F2F2) 0

向右看齐/ 2022年11月15日 11:37/ 0 赞/ 244 阅读

相关 html5添加渐变边框效果,用CSS实现模块边框的渐变

用CSS实现模块边框的渐变，一起来看下demo. float:left; margin:50px; width:250px; height:250px; box-si

傷城~/ 2022年10月06日 05:51/ 0 赞/ 270 阅读

相关 243.边框和渐变

效果 (源码网盘地址在最后) ![67bc0b6014551ae5b2aadb52142508f0.gif][] 源码 index.html <!DOC

傷城~/ 2022年09月12日 12:44/ 0 赞/ 167 阅读

相关 css3边框颜色渐变

前言边框（border），平时最常用的样式之一，它可以设置宽度、样式和颜色。以前需求都比较单纯，颜色使用单色就能满足要求，但是现在不一样了，用户审美提高了，要求就三点：

秒速五厘米/ 2022年09月11日 00:27/ 0 赞/ 256 阅读

相关 h5绚丽的边框-border渐变和字体颜色渐变

1.先看效果图： ![这里写图片描述][SouthEast] 2.代码上部分注稀： <!DOCTYPE html> <html> <head>

忘是亡心i/ 2022年06月04日 01:52/ 0 赞/ 648 阅读

相关 canvas 颜色渐变

部分语法：createLinearGradient(0,0,250,150)代表其实坐标（0,0）代表终点坐标（250,150） addColorStop(0.5,"

系统管理员/ 2022年04月04日 13:54/ 0 赞/ 303 阅读

相关颜色渐变

公用代码 <view class="flex_w"> <view class="bgrc"> </view> </view> .fle

向右看齐/ 2021年07月25日 02:19/ 0 赞/ 520 阅读

相关【前端】CSS 字体颜色渐变

HTML源码 <span class="valueStyle">15</span> CSS代码 .valueStyle{ ...

红太狼/ 2021年01月07日 12:40/ 0 赞/ 804 阅读