CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

边框圆角　border-radius

　　每个角可以设置两个值，x值、y值

　　　　border-top-left-radius：水平半径　　垂直半径

　　　　border-radius：水平半径/垂直半径

　　　　border-radius:60px 30px 120px 160px/160px 120px 30px 60px ;

　　　　单位：百分比和像素。最好使用%

　　　　练习(重要）　　

盒子阴影　box-shadow

　　可设置多重边框阴影，增强立体感

　　box-shadow: 5px 　　5px　　 27px red,-5px -5px 27px green;

　　box-shadow:水平位移垂直位移模糊度阴影大小阴影颜色内阴影(inset)／外阴影(outset 默认) ；

　　　　　　　　　水平位移：正值向右；

　　　　　　　　　垂直偏移：正值向下；

　　边框阴影不会改变盒子的大小，不会影响兄弟元素的布局　　

边框图片　border-image

　　border-image:url("images/border.png") 27/20px round ;

　　border-image设置边框的背景图片

　　border-image-source:url("地址")设置边框图片的地址。

　　border-image-slice:27,27,27,27;　　裁剪图片

　　border-image-width: 20px;　　指定边框的宽度

　　border-image-repeat: stretch; 边框的样式： stretch 拉升／ round 自动调整缩放比例／repeat重复；

CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，

其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。如下图

CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

渐变

　　通过渐变可实现许多绚丽的教过，有效减少图片的使用数量，并且具有很强的适应性和可扩展性。

线性渐变 linear-gradient

　　linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

　　 CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

　　上图是从黄色渐变到绿色

　　　　background:linear-gradient(

　　　　　　　　　　　　　　　　　　to right ,

　　　　　　　　　　　　　　　　　　red 0%,red25%,

　　　　　　　　　　　　　　　　　　blue 25%,blue 25%,

　　　　　　　　　　　　　　　　　　green 50%,green50%

　　　　　　　　　　　　　　　　　　pink 75%,ping100%);　　　

　　　　background:linear-gradient( 方向to(left\right\top\bottom，也可以使用度数), 渐变起始颜色, 渐变终止颜色)

to top	0 deg	360 deg	底部到顶部
to bottom	180 deg	-180 deg	顶部到底部
to left	-90 deg	270 deg	从右向左
to right	90 deg	-270 deg	从左向右
to top left	315 deg	-45 deg	右下角到左上角
to top right	-315 deg	45 deg	左下角到右上角
to bottom left	225 deg	-135 deg	右上角到左下角
to bottom right	-225 deg	135 deg	左上角到右下角

径向渐变（radial径向）

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果　　

background:radial-gradient( 150px at center, yellow,green);围绕中心点渐变，半径是150px，从黄到绿做渐变

必要的元素：

　　辐射范围即圆半径（半径越大，渐变效果越大。半径可以不等，即可以是椭圆）

　　中心点即圆的中心（中心点的位置是以盒子自身），中心位置参照的是盒子的左上角

径向渐变

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div{

            width: 250px;

            height: 250px;

            border: 1px solid #000;

            margin: 20px auto;

        }

        /*

            径向渐变：

            radial-gradient（辐射半径, 中心的位置，起始颜色，终止颜色）;

            中心点位置：at  left  right  center bottom  top

        */

        div:nth-child(1){

            background-image: radial-gradient(at left top,yellow,green);

        }

        div:nth-child(2){

            background-image: radial-gradient(at 50px 50px,yellow,green);

        }

        div:nth-child(3){

            background-image: radial-gradient(100px at center,yellow ,green);

        }

        div:nth-child(4){

            background-image: radial-gradient(100px at center,

            yellow 0% ,

            green 30%,

            blue 60%,

            red 100%);

        }

        div:nth-child(5){

            background-image: radial-gradient(100px 50px  at center,yellow ,green);

        }

    </style>

</head>

<body>

    <div class="box">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

    <div class="box">4</div>

    <div class="box">5</div>

</body>

</html>

径向渐变练习

背景：

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

background-size:width,height 可以设置背景图片的宽高和高度

background-size: 600px ,auto; 自动适应盒子的宽度也可以设置为百分比

background-size: cover(覆盖)/ contain(包含)

　　cover 会自动调整缩放比例，保证图片始终填充满背景区域，若有溢出则隐藏

　　contain 自动调整缩放比例，保证图片始终完整显示在背景区域

背景原点background-origin：

　　调整背景位置的参照点，默认从padding开始平铺

　　background-origin： border-box (以边框做为参考原点)／padding-box（以内边距作为参考原点）／content-box（以内容区作为参考点）

背景裁剪background-clip：

　　属性值若比原点的范围大，不起作用

　　border-box:最大，裁切边框以内为背景区域；

　　padding-box ：裁切内边距以内为背景区域

　　content-box：裁切内容区域做为背景区域裁减去border-box和padding-box部分县市的背景图片

以逗号分隔可以设置多背景，可以用于自适应

        .box{

            width: 623px;

            height: 416px;

            border: 1px solid #000;

            margin:100px auto;

            /* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */

            background: url(images/bg1.png) no-repeat left top

                        ,url(images/bg2.png) no-repeat right top

                        ,url(images/bg3.png) no-repeat right bottom

                        ,url(images/bg4.png) no-repeat left bottom

                        ,url(images/bg5.png) no-repeat center;

        }

过渡transition：要过渡的属性过渡的时间速度曲线延迟时间；

过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态

帧动画：扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。

      .box{

            width: 200px;

            height: 200px;

            border: 1px solid #000;

            margin:100px auto;

            background-color: red;

            /* 过渡属性*/

            /*transition:width 2s,background-color 2s;*/

            /* 如果多个过度的 特性是一样的 可以简写*/

            /* transition: 过渡属性 持续时间  运动曲线 延迟时间*/

            transition:all 4s linear 1s ;

            /* 过渡必须加给盒子本身*/

        }

        .box:hover{

            width: 600px;

            background-color: blue;

            /*height:400px;*/

        }

transition: [过渡属性 | 过渡时间 | 速度曲线 | 延迟时间]

　　可简写

　　transition-porperty: 过渡属性。所有属性都需要则填写all

　　transition-duration:过渡持续时间

　　transition-timing-function:运动曲线

　　　　linear匀速／ease减速／ease-in 加速／ease-out减速／ease-in-out 先加速后减速

　　transition-delay: 过渡延迟

气泡

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS 过渡</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            background-color: #F7F7F7;

        }

        .pop {

            width: 300px;

            height: 120px;

            margin: 30px auto;

            background: url("images/paopao.png") left bottom no-repeat,

            url("images/paopao.png") right top no-repeat;

            background-color: #036;

            border-radius: 6px;

            transition: all 1s linear;

        }

        .pop:hover{

            background-position:left top, right bottom;

        }

    </style>

</head>

<body>

    <div class="pop"></div>

</body>

</html>

气泡

手风琴菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS3 过渡</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            background-color: #F7F7F7;

        }

        h3 {

            margin: 0;

            padding: 0;

        }

        .box {

            width: 500px;

            margin:0 auto;

        }

        .list h3 {

            height: 35px;

            line-height: 35px;

            padding-left: 30px;

            border-bottom: 2px solid #690;

            font-size: 14px;

            color: #FFF;

            background: #369;

            transition: all 0.3s ease 0s;

        }

        .list .pictxt {

            height: 0px;

            background: pink;

            transition: all 0.3s ease 0s;;

        }

        .list:hover h3 {

            background: #036;

        }

        .list:hover .pictxt {

            height: 150px;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="list">

            <h3>今日新闻</h3>

            <div class="pictxt"></div>

        </div>

        <div class="list">

            <h3>今日新闻</h3>

            <div class="pictxt"></div>

        </div>

        <div class="list">

            <h3>今日新闻</h3>

            <div class="pictxt"></div>

        </div>

        <div class="list">

            <h3>今日新闻</h3>

            <div class="pictxt"></div>

        </div>

    </div>

</body>

</html>

手风琴菜单

2D 转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。在css3 当中，通过transform(变形) 来实现2d 或者3D 转换,其中2D 有，缩放，移动，旋转。　　

缩放 scale（X，Y）

　　对元素进行水平和垂直方向的缩放，x，y的取值可为小数，不可为负值

　　大于1为放大，小于1为缩小，内容也会等比缩放

　　只写一个值，则宽高等比例缩放

　　transform: scale(1.5,1.5);

位移 translate（x,y)

　　改变元素的位置，x,y 可为负值 x在水平方向移动，y在垂直方向移动

　　右移为正／左移为负／右下为正，左下为负，可写百分比

　　盒子在父盒子中居中： transform:translate(-50%);

旋转 rotate（角度）

　　正值顺时针，负值逆时针

　　可设置旋转中心：transform-origin: 水平坐标垂直坐标

　　默认旋转中心：几何中心，在旋转后，坐标轴也跟着发生转变，应把旋转放在最后

倾斜 skew（deg，deg）

　　元素按照一定角度倾斜，可为负值，第二个参数不写默认为0　　

　　参数1:水平Y轴（向右为正），顺时针角度变换

　　参数2:垂直X轴（向下为正），逆时针旋转

矩阵matrix() 把所有的2D转换组合到一起，需要6个参数

盾牌案例

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            background-color: #2AB561;

        }

        .box{

            width: 440px;

            height:491px;

            margin:100px auto;

        }

        .box img{

            transition:all 2s;

        }

        /* 打乱正常的图片*/

        .box img:nth-child(1){

            transform:translate(100px,100px) rotate(45deg);

        }

        .box img:nth-child(2){

            transform:translate(200px,200px) rotate(99deg);

        }

        .box img:nth-child(3){

            transform:translate(-100px,-60px) rotate(166deg);

        }

        .box img:nth-child(4){

            transform:translate(-200px,60px) rotate(86deg);

        }

        .box:hover img{

            transform:translate(0px,0px) rotate(0deg);

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="data:images/shield_1_01.png" alt=""/>

        <img src="data:images/shield_1_02.png" alt=""/>

        <img src="data:images/shield_1_03.png" alt=""/>

        <img src="data:images/shield_1_04.png" alt=""/>

        <img src="data:images/shield_1_05.png" alt=""/>

        <img src="data:images/shield_1_06.png" alt=""/>

        <img src="data:images/shield_1_07.png" alt=""/>

        <img src="data:images/shield_1_08.png" alt=""/>

        <img src="data:images/shield_1_09.png" alt=""/>

    </div>

</body>

</html>

盾牌案例

扑克案例

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            overflow: hidden;

        }

        .box{

            width: 310px;

            height: 441px;

            margin:100px auto;

            position: relative;

        }

        /*.img1{*/

            /*transition:all 1s;*/

            /* 变换中心*/

            /*

                transform-origin:

                left top center  right  bottom

                50px 50px

            */

            /*transform-origin:center bottom;*/

        /*}*/

    .box img{

        position: absolute;

        left:0;

        top:0;

        transition:all 1s;

        /* 设置变换中心*/

        transform-origin: center bottom;

        box-shadow: 1px 1px 3px 1px #333;

    }

        .box:hover img:nth-child(6){

            transform:rotate(-10deg);

        }

        .box:hover img:nth-child(5){

            transform:rotate(-20deg);

        }

        .box:hover img:nth-child(4){

            transform:rotate(-30deg);

        }

        .box:hover img:nth-child(3){

            transform:rotate(-40deg);

        }

        .box:hover img:nth-child(2){

            transform:rotate(-50deg);

        }

        .box:hover img:nth-child(1){

            transform:rotate(-60deg);

        }

        .box:hover img:nth-child(8){

            transform:rotate(10deg);

        }

        .box:hover img:nth-child(9){

            transform:rotate(20deg);

        }

        .box:hover img:nth-child(10){

            transform:rotate(30deg);

        }

        .box:hover img:nth-child(11){

            transform:rotate(40deg);

        }

        .box:hover img:nth-child(12){

            transform:rotate(50deg);

        }

        .box:hover img:nth-child(13){

            transform:rotate(60deg);

        }

    </style>

</head>

<body>

    <div class="box">

        <img  src="data:images/pk2.png" alt=""/>

        <img  src="data:images/pk2.png" alt=""/>

        <img  src="data:images/pk2.png" alt=""/>

        <img  src="data:images/pk2.png" alt=""/>

        <img  src="data:images/pk2.png" alt=""/>

        <img  src="data:images/pk2.png" alt=""/>

        <img  src="data:images/pk2.png" alt=""/>

        <img  src="data:images/pk2.png" alt=""/>

        <img  src="data:images/pk2.png" alt=""/>

        <img  src="data:images/pk2.png" alt=""/>

        <img  src="data:images/pk2.png" alt=""/>

        <img  src="data:images/pk2.png" alt=""/>

        <img  src="data:images/pk2.png" alt=""/>

    </div>

</body>

</html>

扑克案例

秒客网

CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

边框圆角　border-radius

盒子阴影　box-shadow

边框图片　border-image

渐变

线性渐变 linear-gradient

径向渐变（radial径向）

必要的元素：

背景：

背景原点background-origin：

背景裁剪background-clip：

过渡transition：要过渡的属性过渡的时间速度曲线延迟时间；

2D 转换

缩放 scale（X，Y）

位移 translate（x,y)

旋转 rotate（角度）

相关文章

CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

边框圆角 border-radius

盒子阴影 box-shadow

边框图片 border-image

渐变

线性渐变 linear-gradient

径向渐变（radial径向）

必要的元素：

背景：

背景原点background-origin：

背景裁剪background-clip：

过渡transition：要过渡的属性 过渡的时间 速度曲线 延迟时间；

2D 转换

缩放 scale（X，Y）

位移 translate（x,y)

旋转 rotate（角度）

相关文章

边框圆角　border-radius

盒子阴影　box-shadow

边框图片　border-image

过渡transition：要过渡的属性过渡的时间速度曲线延迟时间；