css3基础笔记01

一，伪元素选择器
常用的伪元素：

lorem快速生成测试文本
1，伪元素选择器 用的是两个冒号分隔，早期写法是一个冒号，浏览器也能识别，但是不建议酱紫写。
1，首字母加样式 ::first-letter

p::first-letter{
  font-size: 30px;
  color: hotpink;
  float: left;/* 首字母下沉 */

2，首行特殊样式 ::first-line，
准确识别第一行。
3，文本被选择时的样式 ::selection
只能设置：color，background-color，text-shadow（文字阴影）。
4，placeholder
设置文本框内占位提示符的字体效果，但是兼容性奇差无比。用时需要处理兼容性。

input::-webkit-input-placeholder{
  color: orange;
}

△5，::before+content
能够在 不添加其他标签的情况下 新增样式。

必须设置content属性，只是需要拥有这个属性即可属性值是什么无所谓，
before伪元素默认是行内元素 为了能够设置宽高 需要变成块级元素。

div::before{
  content: '';
  display: block;/* 需要转换成块级元素 */
  width: 100%;
  height:50px;
  border: 1px solid black;
  position: absolute;/*子元素加了绝对定位，父元素记得加相对定位。 */
  bottom:0px;
  left: 0px;
}

6， ::after和before一样。

可以用来做遮罩，
缺点就是 ：伪元素 只能够设置一个元素，其内部无法再添加后代元素。
伪元素 只能够添加给 双标签元素。
before和after只是名字不同而已 用法一样，
双标签元素 只支持 这两个伪元素，多添加无效，最多添加一个。

.showBox{
  background: url('images/robot.png') no-repeat center;
  margin: 50px auto;
  position: relative;
}
.showBox::after{
  content: '';
  position: absolute;
  width: 100%;
  height:0%;
  background-color: orange;
  opacity: 0.5;
  transition:all 1s;
}
.showBox:hover::after{
  height: 100%;
}

7，颜色设置：

background-color：hsla（110,83%，52%，.5）
opacity：.5

使用rgba或者hsla设置的透明度 不会被继承。
8，文字阴影。
文字四周阴影环绕。
阴影大小默认跟文字一样大。
颜色模糊：会直接放大影子。
方向：x,y。x的正方向是右边，y的正方向是下边。
颜色：默认的颜色是黑色。
可以设置多个。

text-shadow:（xpx ypx 模糊px 颜色，xpx ypx 模糊px 颜色）;

浮雕文字（3D立体效果）：

body{
  background-color: gray;
 } 
 h1{
  color: gray;
  font-size: 300px;
  text-align: center;
  transition:all 1s;
 }
 h1:hover{
  text-shadow:1px 1px black,
              -1px -1px white;
  cursor: pointer;
 }

9，盒子阴影：
可以设置 inset 内阴影，
放大效果不是模糊的，视觉效果上较差。

box-shadow:（inset xpx ypx 模糊100px 放大px 颜色，inset xpx ypx 模糊px 放大px 颜色）;

10，盒模型：box-sizing
box-sizing默认设置是content-box：优先保证内容的大小，对盒子进行缩放。
border-box：让盒子优先保证自己所占区域的大小，对内容进行压缩。

box-sizing：border-box；

※：希望在顶部 制作一个 跟浏览器窗口一样大的 通栏
border需要有23px

div{
  width: 100%;
  height: 100px;
  background-color: skyblue;
  border: 23px solid gray;
  box-sizing:border-box;
 }

11，css3背景属性
①background-size
设置多重背景图片，对应大小以及对应的位置关系。
contain图片两边等比例拉伸，直到某一边顶格停止。
cover图片等比例拉伸 保证两边都顶格 可能会出去

background-size:contain;
background-size:cover;

设置多重背景图片，对应大小以及对应的位置关系。
background-image: url('images/gyt.jpg'), url('images/gyt.jpg');
background-size: 300px 100px,400px 200px;
background-position: top left，100px 300px;

②background-origin
设置的是背景图片 开始的位置
border-box：从边框开始。
下边两个属性，如果没有设置padding那么看起来视觉效果一样。
content-box：从内容开始。
padding-box：padding开始的位置。
background-origin:border-box；
③background-clip设置的是背景切割的位置。
padding-box：将padding之外的区域切割。
content-box：内容之外的区域切割。

background-origin&clip结合运用可以实现在不改变背景图片大小的情况下，让a标签或者div标签的点击范围增大， 并且放大镜 是在a标签的中间的。

background-origin:content-box;
background-clip:content-box;

12,渐变：
兼容性还不是太好。
可以借助第三方工具：序列帧工具→过渡生成器→css3颜色渐变选择器
①线性渐变
background-image：liner-gradient（to方向（45deg），颜色1，颜色2，颜色3颜色之后加百分比）;
background-image：liner-gradient（to left，red，skyblue 20%,yellow）;
②径向渐变：借助过渡生成器
径向渐变设置的是圆形的渐变。（直径，位置，颜色1，颜色2）