记录一些有趣的事情~
1.设置盒子圆角：border-radius
- border-radius 用来设置圆角 以XXpx为半径画圆
- 还可以单独设置一角的圆角
- border-bottom-right-radius 右下角
- border-top-right-radius 右上角
- border-top-left-radius 左上角
- border-bottom-left-radius 左下角
2. 实现移入元素变大特效
1.只要给元素添加了scale这个属性，就能控制元素放大或缩小。
语法格式：transform: scale(x,y);
注意点：x和y之间用逗号隔开；
- transform: scale(1,1)：表示宽和高都放大1倍，其实等于没有放大，还是原来的大小；
- transform: scale(2,2)：宽和高都放大了2倍；
- transform: scale(2)：只写一个参数，默认第二个参数和第一个参数一样，其实就是简写了，相当于- - transform: scale(2,2)；写起来更方便；
- transform: scale(0.5,0.5)：表示宽和高都缩小0.5倍；
- transform: scale(x,y)最大的优势就是可以设置转换中心点缩放，默认是以中心点缩放。而且不会影响到其他盒子。
- 实现效果
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 446px;
height: 314px;
/* background-color: pink; */
overflow: hidden;
}
.box img {
width: 100%;
height: 100%;
transition: all .4s;
}
.box:hover img{
/* 实现移入元素变大特效 */
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="box">
<img src="../01-project/asset/ad-0408.jpg" alt="">
</div>
</body>
</html>
3.transition实现补间动画（过渡效果）
并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡。
- transition: 要过渡的属性 花费时间 运动曲线 何时开始;
- 如果有多组属性变化，还是用逗号隔开 ：transition:width .4s ease 0s, height .4s;；
- 如果所有属性都是同样的变化，那么只需要用all 就可以了：transition:all .4s
4. 鼠标悬停后，块四周出现阴影的效果
对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 }
div:hover{
box-shadow: 0px 0px 1px #005AD2
}
语法
box-shadow: h-shadow v-shadow blur spread color inset;
注意： boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
5.固定定位
-
固定定位的特点：（务必记住）：
1.以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动。
2.固定定位不在占有原先的位置。
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 40px;
height: 120px;
border: 1px solid red;
position: fixed;
right: 0;
top: 100px;
text-align: center;
}
.message{
margin-left: 8px;
width: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="message">点我留言</div>
</div>
</body>
</html>
6.user-select
- user-select属性是css3规范中新增的一个功能，
- 用于设置或检索是否允许用户选中文本，使用语法是“user-select:none |text| all | element”，其默认值是text，并且适用于除替换元素外的所有元素。
- 取值：
- none：文本不能被选择
- text：可以选择文本
- all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
- element：可以选择文本，但选择范围受元素边界的约束
7. Opacity属性：
| 值 | 描述 |
|---|---|
| value | 指定不透明度。从0.0（完全透明）到1.0（完全不透明） |
| inherit | Opacity属性的值应该从父元素继承 |
8.首行缩进两个字符
.contp{
text-indent:2em;/*首行缩进2个字符*/
}
9.maigin
margin:0 auto;所代表的的意思是水平居中，其中的margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right，再因为上下边界为0，左右则根据宽度自适应相同值，所以表达的意思是水平居中。
10.textarea拖动改变视图和input聚焦颜色问题
HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局，使页面变得不美观。可以通过添加如下两个样式禁用拖动，固定大小：
1：彻底禁用拖动（推荐）
style=”resize:none;”
2：只是固定大小，右下角的拖动图标仍在
加width,height限制
(style=”width:100px;height:200px;”);
或row,col限制
/* textarea聚焦时的边框颜色 */
textarea {
outline-color: rgba(83, 160, 231, 0.61);
}
/* input聚焦时的颜色*/
input:focus{ outline: 1px solid rgba(83, 160, 231, 0.61);}
