CSS中比较好用的一些样式

这是我参与「第四届青训营 」笔记创作活动的第20天

大家好，我是John。今天给大家分享一些我比较喜欢而且个人也觉得比较好用的CSS样式。

首先是鼠标悬浮时的样式。

.btn{
  background-color: gray;
  color: white;
  border: solid 2px black;
  border-radius: 5px;
}

上面是一个按钮的样式设计，大家平时一般都会用到的几个属性（自上而下的顺序）：按钮填充颜色、按钮内字体颜色、按钮边框、按钮的四角弧度。出来的效果是这样的：

但是为了增加用户与客户端的交互性，我们会在样式设计时增加一些样式：

.btn:hover{
  background-color: green;
  cursor: pointer;
  transition: 0.5s;
}

出来的效果是这样的：

当你的鼠标悬停在按钮上的时候，按钮的背景颜色会变成你自己设定的颜色，字体颜色也可以设定，光标会被设成一个pointer。transition是一个渐变效果的设置，当你鼠标悬停的时候，按钮的背景颜色经过你设置的时间渐变成你设置的样式，这个例子中我设置成了0.5s，大伙可以回去试试，我每次设置按钮我都会按照这样的格式来设置，会显得你的按钮交互感更强。

其次是盒子阴影效果。

div{
  position: absolute;
  background-color: white;
  border: solid 2px gray;
  border-radius: 5px;
  display: block;
  width: 300px;
  height: 200px;
  left: 50px;
  top: 50px;
}

这是我写盒子元素样式时一般的写法，为了效果明显，我把position设置成了absolute，left和top设置成了50px，出来的效果是这样的：

现在我们为盒子填上一行代码，就可以实现阴影效果：

    box-shadow: 10px 10px 5px #888888;

具体的设置原则是这样的：

    box-shadow: h-shadow v-shadow blur spread color inset

h-shadow 必需。水平阴影的位置。允许负值。

v-shadow 必需。垂直阴影的位置。允许负值。

blur 可选。模糊距离。

spread 可选。阴影的尺寸。

color 可选。阴影的颜色。

inset 可选。将外部阴影 (outset) 改为内部阴影。

具体设置可以参考w3school的教程 : https://www.w3school.com.cn/css/css3_shadows_box.asp

今天的分享就先到这里啦，大伙快回去试试吧！