CSS3 基本属性浅析（含选择器、背景阴影、3D转换、动画等）

1渐进增强原则

2私有前缀

不同浏览器在发布不同版本（一般测试版）时会加前缀，新增属性加上前缀进行支持测试：

Chrome浏览器：-webkit-border-radius: 5px;

火狐浏览器：-moz- border-radius: 5px;

IE浏览器：-ms-border-radius: 5px;

欧朋浏览器：-o-border-radius: 5px;

3选择器

① 属性选择器

[href] { color: red }: 选取具有href属性的元素

[href^=a]{color:red}: 选取以a开头的具有href属性的元素

[href$=3]{color:red}: 选取以3结尾的具有href属性的元素

[href*=m]{color:red}: 选取href中任意位置具有m的，具备这样href属性的元素

[href=”a.mp3”]{color:red}: 选取href=”a.mp3”的元素

② 伪类选择器

（1）后代伪类选择器

父标签无其他元素，页面中所有父标签下的li都会按选择条件被选中

li:first-child { color:red }: 选择第一个li

li:last-child { color:red }: 选择最后一个li

li:nth-child(n) { color:red }: 选择第n个li，n的取值为（1,2,3,4,……）

li:nth-child(3n) { color:red }: 选择第3n个li，n的取值为（1,2,3,4,……）

li:nth-child(2n+1) { color:red }: 选择所有奇数项li，n的取值为（0,1,2,3,4,……）

li:nth-child(odd) { color:red }: 选择所有奇数项li

li:nth-child(even) { color:red }: 选择所有偶数项li

li:nth-child(-n+3) { color:red }: 选择所有前三个li， n的取值为（0,1,2,3,4,……）

li:nth-last-child(n) { color:red }: 选择倒数第n个li，n的取值为（1,2,3,4,……）

li:nth-last-child(-n+5) { color:red }: 选择倒数5个li， n的取值为（0,1,2,3,4,……）

<ul>

</ul>

如果父标签下有其他元素n从第一个元素开始计算

li: nth-child(2) { color:red }: 这个设置无效，因为第二个child不是li

li: nth-child(4) { line-height: 150%;"><ul>

<li></li> 这个li会被选中

<li></li>

</ul>

可使用nth-of-type ( )按顺序选择到该类型元素 first-of-type ; last-of-type

li:nth-of-type(2) { 上述代码中的第二个li会被选中

background-color: red;

}

（2） empty伪类选择器 选择内容为空的元素

span: empty { display:none; }只有第一个<span>会被选中

（3）target伪类选择器

h2:target { color:red; } 选择处于锚点状态的元素

<ul>

<li> <a href=”#title2”> 这是标题2 </a> </li> （这就是一个锚点，用id关联）</ul>

<div>

<h2 id = “title2”>这是一个title2</h2>

</div>

（4）not伪类选择器 选择条件取反选择该类元素

li:not(.class) { color: red; } 选择类名不是class的所有li

<ul>

<li class = “class”>2</li> 这个li不会被选中

</ul>

（5）伪元素选择器

a ) 伪元素 before、after在元素的最前面和最后面添加一个元素，可以像正常元素一样定义样式 （伪元素CSS3书写格式双冒号“：：” CSS2中格式是单冒号“：”）由于浏览器具备兼容性优化，CSS3中单冒号“：”写法也是可以被浏览器识别的，推荐使用单冒号“：”写法

li::before {

content:””; （content属性必须存在，可以不写内容）

display: block; （创建出来是一个行内元素，可以转换为块级元素）

background-color:red;

}

li::after {

content:””; （content属性必须存在，可以不写内容）

display: block; （创建出来是一个行内元素，可以转换为块级元素）

background-color:blue;

}

如果不以block形式展现，都会被原element元素遮挡住

b ) 伪元素选择器

一. li::first-letter { (选择第一个子母设置样式)

font-size: 22px;

color: red;

}

<ul>

<li>abcdefgh</li>

<li>这是一段中文</li>

</ul>

二. li::first-line { (选择第一行设置样式)

line-height: 150%;">}

三. p::selection { (选中的区域设置样式，不能设置字体大小)

line-height: 150%;">color：red;

}

4 CSS3基本属性

① 文本阴影text-shadow: npx npx npx color, npx npx npx color;（可以重叠设置）

第一个参数：水平偏移量正值向右，负值向左

第二个参数：垂直偏移量正值向下，负值向上

第三个参数：模糊度不能为负值，如果为0可以不设置

第四个参数：颜色（color）

#li {

text-shadow: 2px 2px 2px blue;

}

② 边框属性

（1）正圆border-radius:边框圆角 可以使用百分比表示大小

border-radius: 5px 5px 5px 5px; (左上，右上，右下，左下)

（2）椭圆border-radius:边框圆角 可以使用百分比表示大小

border-radius: 50px 5px 5px 5px/20px 0px 0px 0px;

（3）盒子阴影box-shadow: npx npx npx npx color, npx npx npx npx color inset（内阴影）;（可以重叠设置）使用方法和text-shadow基本相同，多inset内阴影属性

第一个参数：水平偏移量正值向右，负值向左

第二个参数：垂直偏移量正值向下，负值向上

第三个参数：模糊度不能为负值，如果为0可以不设置

第四个参数：延伸度与border类似，设置后阴影可以看到宽度效果，可不设

第五个参数：颜色（color）

第六个参数：内阴影

（4）边框背景图片：border-image

border-image: url(./images/border.png) 27 stretch repeat;

border-image-suorce: url(./images/border.png) 表示边框引用路径

border-image-slice: 27 27 27 27 表示边框裁切尺寸（单位像素px，设置时不写px），四条直线将背景图片按设置尺寸裁剪为九宫格

border-image-repeat: stretch(表示拉伸) repeat(表示重复平铺) round(调整剪切后背景图片大小自动适应元素宽度平铺)

border-image-width: 边框宽度

③ 盒子大小计算属性box-sizing:

box-sizing: content-box; 按照content,padding,border总和计算盒子大小(默认方式)

box-sizing: border-box; 按照设置的宽高计算，即宽高不变，改变padding或border值，盒子大小不发生变化

④ 颜色设置

background: hsla( 120, 50%, 40%, 0.6 ) hsla与rgba使用类似

H色调：取值范围0~360，0或360表示红色，120表示绿色，240表示蓝色

S饱和度：取值范围0%~100%

L亮度：取值范围0%~100%

A透明度：取值范围0~1

⑤ 渐变设置

（1）线性渐变linear-gradient() 颜色透明度等可使用rgba设置

background: linear-gradient(to right, yellow, green);

background: linear-gradient(45deg, yellow 25%, transparent 50% , rgba(112,1113,87,0.3));设置度数方向，25%为设置的黄色的长度,

background-image: linear-gradient(); 背景图片也可以设置线性渐变

background-size: 200px 100px; 可以设置背景图片大小

（2）径向渐变radial-gradient()

background-image: radial-gradient(120px 80px at 25% 40% yellow,green); 120px 80px表示半径，两个值为椭圆，25%、40%为水平和竖直的位置值

⑥ 过渡设置transition 可以过渡大部分属性例如：宽、高、颜色等

transition：all 3s; 全部过渡过渡速度模式默认为：ease

transition: margin 3s,opacity 5s; 设置属性分别过渡

transition-property: background-color; 设置过渡属性

transition-duration: 2s; 设置过渡时间

transition-delay: 2s; 设置过渡延迟时间

transition-timing-function: ease、linear或ease-in等; 设置过渡的速度模式

过渡四个属性完全设置方式：

transition: all 3s 4s linear; 第一个时间为执行时间，第二个时间为延迟时间，其他参数之间没有顺序要求

⑦ 转换 transform：用来设置2D或3D转换的属性

（1） 2D转换

缩放：transform: scale(0.6) 放大或缩小倍数

位置：transform: translate(100px,50px) 100px为水平，50px为竖直

旋转：transform: rotate(180deg) 180deg为旋转度数

倾斜：transform: skew(0deg,40deg) 0deg为盒子竖直边与x轴夹角度数，40deg为盒子水平边与y轴夹角度数

转换初始位置：transform-origin: 0% 80% 0%为水平，80%为竖直

同时设置多个属性值transform: translate(100px,50px)(空格)rotate(180deg);

（2） 3D转换

X旋转：transform: rotateX(180deg) 180deg为旋转度数

Y旋转：transform: rotateY(180deg) 180deg为旋转度数

Z旋转：transform: rotateZ(180deg) 180deg为旋转度数

可根据transform-origin设置旋转的初始点

X移动：transform: translateX(100px) 100px为沿X轴移动距离

Y移动：transform: translateY(100px) 100px为沿Y轴移动距离

Z移动：transform: translateZ(100px) 100px为沿Z轴移动距离 必须给要设置Z轴数值的元素的父元素设置透视属性perspective:500px; 500px为设置的透视距离可改，该设置才能生效，实现3D效果

设置元素背面隐藏：backface-visibility: hidden 可配合3D旋转使用

立方体盒子demo:

必须给父盒子添加transform-style: preserve-3d这个属性，同时将perspective属性值添加给父盒子的上一级元素代码如下：

        body{

            background-color: orange;

            perspective: 1000px;

        }

        .box {

            width: 300px;

            height: 300px;

            position: relative;

            margin: 200px 0 0 700px;

            transition: all 5s;

            transform-style: preserve-3d;

        }

        .item {

            width: 100%;

            height: 100%;

            position: absolute;

            font-size: 100px;

            font-weight: 700;

            line-height: 300px;

            text-align: center;

        }

        .item:nth-child(1) {

            background-color: slateblue;

        }

        .item:nth-child(2) {

            background-color: red;

            transform: rotateY(-90deg) translateZ(150px) translateX(-150px);

        }

        .item:nth-child(3) {

            background-color: yellow;

            transform: rotateY(90deg) translateZ(150px) translateX(150px);

        }

        .item:nth-child(4) {

            background-color: green;

            transform: rotateX(90deg) translateZ(150px) translateY(-150px);

        }

        .item:nth-child(5) {

            background-color: palevioletred;

            transform: rotateX(-90deg) translateZ(150px) translateY(150px);

        }

        .item:nth-child(6) {

            background-color: dimgray;

            transform: translateZ(-300px);

        }

        .box:hover {

            transform: rotateY(200deg) rotateZ(200deg) rotateX(200deg);

        }

<div class="box">

    <div class="item">①</div>

    <div class="item">②</div>

    <div class="item">③</div>

    <div class="item">④</div>

    <div class="item">⑤</div>

    <div class="item">⑥</div>

</div>

⑧ 背景background

background-image: url(“images/picture.jpg”); 设置背景图片

background-repeat: no-repeat; 设置背景格式为不重复

background-size: 200px 100px; 设置背景图片宽高

background-size: contain; 设置背景图片等比例拉伸直到顶到一边为止

background-size: cover; 设置背景图片等比例拉伸铺满全部空间

background-origin: border-box 设置背景图从边框开始， padding-box 从padding开始， content-box从content开始

background-clip: padding-box 设置背景图将padding之外的剪切掉也可以设置border-box和content-box

设置多张图片为背景图片

background-image: url(“images/picture01.jpg”), url(“images/picture02.jpg”);

background-size: 200px 100px,150px 300px;

background-position: top left,100px 150px;

background: url(“images/picture.jpg”) no-repeat 115px 70px/100px 50px 设置复合属性需要用”/”进行分割

⑨ 动画animate

准备动画的关键字定义@keyframes

@keyframes name { } name为自定义的名称，可以随意更改

如：@keyframes toRightX {

form { } （设置动画的开始位置，如果不设置默认为初始状态）

to{ （设置动画结束的状态）

transform: translateX( 1000px );

}

创建一个类名定义动画效果例如.animation

.animation {

animation-name: toRightX; （添加之前创建的动画名）

animation-duration: 3s; （动画持续时间）

animation-iteration-count: 3或者infinite （动画播放次数,infinite无穷）

animation-timing-function: linear （动画的速度模式，默认为ease）

animation-delay: 2s （动画延迟播放时间）

animation-fill-mode: both （动画的填充方式）

animation: linear infinite 2s 4s toRightX （动画复合写法，时间顺序固定第一个为持续时间，第二个为延迟时间，其他属性顺序可更改）

}

分步骤设置动画：

@keyframes stepAnimation {

0% { } （起始状态）

50% { transform:translateX(1000px) }

100% { transform: translateX(0) }

}

animation: linear infinite 2s 4s stepAnimation;

animation-play-state: paused （停止播放动画）

⑩ 弹性布局 flex

使用弹性布局需要在父元素中开启flex;即设置display: flex;

弹性布局开启后元素默认分为两个轴排布：主轴X轴，副轴Y轴

设置元素在主轴X轴位置： 针对父元素进行设置

Justify-content: flex-end（到主轴末尾）

flex-start（到主轴开始处，是默认值）

center （居中）

space-between （左右靠边缘，中间有间隙，相等排布）

space-around （左右有间隙，所有间隙相等排布）

设置元素在副轴Y轴位置： 针对父元素进行设置

align-items: flex-end（到副轴末尾）

flex-start（到副轴开始处，是默认值）

center （居中）

space-between （左右靠边缘，中间有间隙，相等排布）

space-around （左右有间隙，所有间隙相等排布）

设置子元素位置：

设置子元素在副轴Y轴上的位置

align-self: center align-self: flex-start （单独设置元素）

调整主轴方向为垂直：（主轴变为Y方向，同时副轴也随之改变，为X方向）

flex-direction: column

Justify-content 依旧对应的主轴，方向变为Y

align-items 依旧对应的副轴，方向变为X

开启弹性布局换行： flex-wrap: wrap

开启换行后align-items属性失效，使用align-content设置副轴方向位置

align-content （只有在多行时才生效，单行时无效）

弹性布局百分比设置：

</div>

.container{

display: flex

height: 100%;

}

.header {

flex: 1 （占父元素百分比为10%）

}

.main {

flex: 8 （占父元素百分比为80%）

}

.footer{

flex: 1 （占父元素百分比为10%）

}

补充： 添加web字体 web图标

（1） web字体给html页面加载字体 有选择的加载减少浏量

a) 登录www.iconfont.cn 下载需要的字体模板

b) 设置@font-face可按照下载模板中的使用说明操作

c) 定义.web-font样式可按说明操作

d) 只能使用制作出的文字的字体，其他字无法使用

注意加载文字的路径，按照需求修改

（2） web 图标 使用创建的字体图标

类比web字体加载操作，登录www.iconfont.cn 下载模板按说明操作即可