网站的字体做多大,临沂小学网站建设,昆明网页设计公司排行榜,商城网站开发制作大家好，今天是 CSS技巧一日一例 专栏的第二篇《纯CSS实现多彩边框按钮特效》
先看图： 开工前的准备工作
正如昨日所讲，为了案例的表现，也处于书写的习惯，在今天的案例开工前，先把昨天的准备工作重做一遍。 清除浏览器的默认样式定义页面基本颜色设定body的样式清除butt…大家好，今天是 CSS技巧一日一例 专栏的第二篇《纯CSS实现多彩边框按钮特效》
先看图： 开工前的准备工作
正如昨日所讲，为了案例的表现，也处于书写的习惯，在今天的案例开工前，先把昨天的准备工作重做一遍。
清除浏览器的默认样式定义页面基本颜色设定body的样式清除button控件的默认边框给按钮安一个家好了，具体过程请参考本专栏昨天的文章：《CSS技巧 - 一日一例 （1）：会讨好的热情按钮》。当然啦，聪明如你也可以跟我一样，把昨天做的页面复制一下，删除无用的CSS，改一下HTML就好啦！
接下来，我们开工！
开工啦！
第一步：基本页面布局
div class="container"button class="base" alt="多彩边框按钮"多彩边框按钮/button
/div
第二步：按钮基本样式
这里于昨天的样式也是一样的，我在前的文章说过：为了实现更多按钮的案例，我把大多数按钮通用的样式写在了一起。今天，再把它复制过来。
.base{position: relative; padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ，并确保了按钮文字水平方向居中 */font-family: "微软雅黑", sans-serif;font-size: 1.5rem; line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */ font-weight:700;color: var(--color); /* 文字颜色为预定义的前景色 */cursor: pointer; /* 鼠标移动到按钮上时候的形状
