文章目录
- 笔记：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>
效果展示：
鼠标移到上面后的渐变效果：
