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

本文介绍: border–top:⽤来单独设置边框的上边沿，同理还有border–bot t o m border–left border–right。background–re pe at：控制图⽚的复制模式，可以横向纵向单独复制（r e pe at-x,r e peat-y），也可以不使⽤复。Border–top–left–radius:⽤来设置边框的左上⻆，还有对应的右下⻆右上⻆左上⻆这⾥不再赘述。精灵图：是由多个图⽚拼起来的⼤图，它存在的价值是降低服务器的并发性，避免不必要的开销。overflow-x：显示横向滑动条。

文章 目录

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

笔记：CSS的常用样式

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

炫酷 按钮效果实现

html 代码：

<!DOCTYPE html&gt;
<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>