CSS3入门基础-优快云博客

本文链接：https://blog.youkuaiyun.com/u014695894/article/details/86694482

1. 浏览器前缀

-ms /* IE */、

-webkit /* Safari and Chrome */

-o- /* Opera */

2. CSS3选择器

属性选择器
- a[class^="doc"] // 以doc开头
- a[href$="doc"] // 包含doc
- a[href$="doc"] //以doc结尾

root选择器

<div>:root选择器的演示</div>
:root {
  background:orange;
}

否定选择器
- div:not([id="footer"])
空选择器
- div:empty {
  border: 1px solid green;
  }
目标选择器
- #brand:target p {
  background: orange;
  color: #fff;
  }
父元素的第一个子元素（其实这里有点歧义，应该是最后一个选择元素，如下表示第一个li）
- ul > li:first-child {
  color: red;
  }
父元素的最后个子元素
- ul > li:last-child {
  border-bottom: none;
  }
定位某个父元素的一个或多个特定的子元素
- ol > li:nth-child(2n){
  background: green;
  }
- 参数：
  - n:0、1、2、3、4、5
  - 2n:1、3、5、7、9
倒数选择器
- ol > li:nth-last-child(5){
  background: orange;
  }

类似于“:first-child”选择器，不同之处就是指定了元素的类型

.wrapper > p:first-of-type {
  background: orange;
} （我要改变第一个段落的背景为橙色）

nth-of-type(n)选择器
last-of-type选择器
nth-last-of-type(n)选择器
唯一的子元素选择器
- li:only-child {
  background: orange;
  } // （只包含一个li）
only-of-type选择器
:enabled选择器
:disabled选择器
:checked选择器
- input[type="radio"]:checked
::selection选择器
- 用来匹配突出显示的文本
- ::selection{
  background: orange;
  color: white;
  }
:read-only选择器
:read-write选择器
::before选择器
::after选择器

3. 相关的指令

border-radius:10px 5px 10px 20px;
- 用途：设置边界的圆角
- 参数：左上角、右上角、右下角、左下角
- border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
box-shadow: 10px 10px 5px red;
- 添加盒子阴影
- 参数：向左偏移量、向下偏移量、阴影模糊程度、阴影颜色
border-image:url(border.png) 30 30 stretch;
- 用途：设置边界图片
- 参数：图片URL、裁剪度（左、右）、裁剪度（上、下）、类型（重复（repeat）、拉伸（stretch）或铺满（round））
background-image: url(img_flwr.gif), url(paper.gif);
- 用途：添加多张背景图片
- 参数：第一张图片、第二张图片
- 注意：排在前面的背景图优先级高、会显示在最上层
background-position: right bottom, left top;
- 用途：背景图片位置
- 参数：第一张图片位置、第二张图片位置
background-repeat: no-repeat, repeat;
- 用途：背景图片样式
- 参数：第一张背景图片样式、第二张背景图片样式
background-size:80px 60px;
- 用途：设置背景图片的宽高
- 参数：宽度、高度
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
- 用途：背景图片的复合写法
background-origin:border-box;
- 用途：指定背景图像的位置区域
- 参数：背景图在被渲染的内容中的位置（border-box、padding-box、content-box）
background-clip: content-box;
- 用途：背景剪裁属性是从指定位置开始绘制
- 参数：（border-box、padding-box、content-box）
background: linear-gradient(direction, color-stop1, color-stop2, ...)
- 用途：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 参数：方向（right、left、bottom right等）、图片1、图片2
- 实例：background: linear-gradient(to right, red , blue);
  - background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
  - background: linear-gradient(red, blue);
background: radial-gradient(center, shape size, start-color, ..., last-color);
- 用途：径向渐变
- 实例：
  - background: radial-gradient(red, green, blue);
  - background: radial-gradient(red 5%, green 15%, blue 60%);
text-shadow: 5px 5px 5px #FF0000;
- 用途：文本阴影
- 参数：向右移动、向下移动、模糊的距离、背景颜色
text-overflow: clip;
- 用途：显示溢出内容
- 参数：clip、ellipsis
word-wrap:break-word;
- 用途：换行
- 参数：keep-all、break-word
@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight:bold; }
- 用途：使用自定义字体
transform: rotate(30deg);
- 用途：2D旋转
- 实例：
  - transform: rotateX(120deg);
  - transform: rotateY(130deg);
transform: translate(50px,100px);
- 用途：移动
- 参数： X轴、Y轴
transform: scale(2,3);
- 用途：增加或减少的大小
- 参数：宽度比例、高度比例
transform:skew(<angle> [,<angle>]);
- 用途：分别表示X轴和Y轴倾斜的角度
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
- 用途：2D转换复合写法
- 参数：矩阵（相关用途查看说明文档）
transform-origin:20% 40%;
translate3d(x,y,z)
- 用途：3D转换
- 实例：translate3d(x,y,z)
  - translateY(y)
scale3d(x,y,z)
- 用途：3D扩展
- 实例：
  - scaleX(x)
  - scaleY(y)
  - scaleZ(z)
rotate3d(x,y,z,angle)
- 用途：定义3D旋转
- 实例
  - rotateX(angle)
  - rotateY(angle)
  - rotateZ(angle)
transition: width 2s, height 2s, transform 2s;
- 用途：过渡
- 实例：
  - ransition-property: width;
  - transition-duration: 1s;
  - transition-property: width;
  - transition-timing-function: linear;
  - transition-delay: 2s;
@keyframes myfirst { from {background: red;} to {background: yellow;} }
div { animation: myfirst 5s; -webkit-animation: myfirst 5s; /* Safari 与 Chrome */ }
@keyframes myfirst // 规定动画
{
   0% {background:red; left:0px; top:0px;}
   25% {background:yellow; left:200px; top:0px;}
   50% {background:blue; left:200px; top:200px;}
   75% {background:green; left:0px; top:200px;}
   100% {background:red; left:0px; top:0px;}
}
- 用途：3D动画
- 实例
  - div
    {
       width:100px;
       height:100px;
       background:red;
       position:relative;
       animation:myfirst 5s;
       -webkit-animation:myfirst 5s; /* Safari and Chrome */
    }
div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; float:left; }
- 用途：方框大小调整
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
- 用途：3D分页
column-count:3;
- 用途多列
- 实例：
  - column-rule-style: solid; // 指定了列与列间的边框样式
  - column-rule-width: 1px; //指定了两列的边框厚度:
  - column-rule-color: lightblue; // 指定了两列的边框颜色：
  - column-rule: 1px solid lightblue;
未完待续。。。。。。