Web前端——用CSS的常用样式制作一个炫酷的按钮_web按钮特效

作者：你好赵伟 | 2024-03-23 19:09:55

踩

web按钮特效

文章目录

- 笔记：CSS的常用样式
- 炫酷按钮效果实现

笔记：CSS的常用样式

边框以及弧度样式
border-width：边框的线条宽度。
border-style：边框的样式，例如 solid实现 dotted 点线 dashed 虚线…
border-color：边框的颜⾊
border-radius ：可以⽤来设置边框的圆⻆或者将边框从矩形改为圆形或者椭圆形。
Border-top-left-radius:⽤来设置边框的左上⻆，还有对应的右下⻆右上⻆左上⻆这⾥不再赘述。
border-top:⽤来单独设置边框的上边沿，同理还有border-bottom border-left border-right
字体样式
font-family：设置字体的“字体”样式例如微软雅⿊ monospace。
font-size：设置字体的⼤⼩。
font-weight：设置字体粗细常⽤的是bold
font-style：设置斜体。itatic
⽂本样式
text-align：设置⽂本对⻬⽅式
text-decoration：修饰⽂本主要使⽤上下中划线。
text-transform：⼤⼩写转换uppercase lowercase capital
text-overflow：设置超出⽂本部分已省略号的形式电视配合overflow：hidden使⽤。
overflow:auto⾃动可以显示滑动条。hidden会隐藏超出的内容。
overflow-x：显示横向滑动条。同理overflow-y纵向滑动条。
阴影效果
text-shadow：给⽂本添加阴影。
box-shadow：给标签添加阴影。
display 属性
display：none 隐藏标签标签将失去原本来的占位已经对应属性样式，visibility：hidden只是隐形了标签
display：inline-block 将⾏内标签设置为⾏内块标签使其⽀持宽⾼设置。
display：block将⾏内标签设置为块标签。
display：inline将块标签设置为⾏内标签。
背景样式
background:color/url（详细可以参考mdn，通按键f1访问）
background-url：填写图⽚链接
background-color：填写图⽚颜⾊
background-repeat：控制图⽚的复制模式，可以横向纵向单独复制（repeat-x,repeat-y），也可以不使⽤复
制（no-repeat）。
background-position：可以设置图⽚的位置，多⽤于截取精灵图的图⽚
background-size：⽤来控制图⽚的⼤⼩
精灵图：是由多个图⽚拼起来的⼤图，它存在的价值是降低服务器的并发性，避免不必要的开销。
background-attouchment：fixed：固定⽹⻚的背景图⽚
定位问题
position：fixed浮动定位他可以将标签固定在屏幕某个位置不随⻚⾯滑动⽽产⽣位移。
position：absolute：绝对定位，他可以将标签固定在⽗容器中的指定位置。
position：relative：相对定位，当⼦标签是绝对定位时，⽗容器必须是相对定位。
浮动float
最初float是⽤来做⽂字化绕图⽚功能的属性，之后⼴泛的应⽤于布局。
float:left|right ⽤来控制块标签向左向右挤压，注意右浮动的会使⼦标签按照从右向左的顺序罗列。
盒⼦模型的宽是内容部分的宽，整个盒⼦的宽应该是border-width+padding+width。⾼同理

炫酷按钮效果实现

html代码：

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>炫酷的按钮</title>
 <style>
 div{
 border: 1px solid #84F8EF ;
 font-family: monospace;
 font-size: 20px;
 width: 150px;
 height: 50px;
 text-align: center;
 line-height: 50px;
 border-radius: 20px;
 color: #DBD1F5;
 background-color: #F59A43 ;
 transition: 2s;
 }
 div:hover{
 color: white;
 background-color: #8FF962 ;
 box-shadow: 2px 2px 10px #8FF962 ,
 -2px 2px 10px #D1F276,
 2px -2px 10px #D1F276,
 -2px -2px 10px #D1F276;
 }
 </style>
 </head>
 <body>
 <!-- 通过name插件那个键键值对中的键名 -->
 
 <div>
 炫酷的按钮
 </div>
 </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

效果展示：
请添加图片描述
鼠标移到上面后的渐变效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/297055