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重复；  

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

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

渐变

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

线性渐变 linear-gradient

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

　　

　　上图是从黄色渐变到绿色

　　　　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，从黄到绿做渐变

必要的元素：

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

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

径向渐变

    
    
    


    
1
    
2
    
3
    
4
    
5

径向渐变练习

 

背景：

　　

背景在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: 过渡延迟

气泡

 

气泡

 

手风琴菜单

 

    
    
    


    

        

            
今日新闻
            

        
        

            
今日新闻
            

        
        

            
今日新闻
            

        
        

            
今日新闻
            

        
    

手风琴菜单

 

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个参数

 

盾牌案例

盾牌案例

扑克案例

 

扑克案例

 

　　

 

转载于:https://www.cnblogs.com/mingm/p/6793645.html