CSS3综合实训

CSS3

    <style>
        div{
            width: 100px;
            height: 100px;
            border-radius: 3px 3px;
            border: 1px solid #000;
        }
    </style>

当border-radius=width的二分之一或50%时

        div{
            width: 100px;
            height: 100px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            border: 1px solid #000;
            box-shadow: 5px 5px 5px 5px gray inset;
        }

而border-radius可分为border-top-left-radius， border-top-right-radius， border-bottom-right-radius，border-bottom-left-radius。取值分为x轴偏移量和y轴偏移量，写一个默认xy值一样

        div{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid #000;
            box-shadow: 5px 5px 5px 5px gray inset;
        }

box-shadow：水平偏移量 垂直偏移量 模糊距离 阴影尺寸 阴影颜色 内或外阴影

渐变

        div{
            width: 100px;
            height: 100px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            background-image: linear-gradient(to top,red 0%,blue 100%);
        }

线型渐变 to+朝向，颜色 颜色所在位置，颜色 颜色所在位置。
朝向：top left bottom right 度数（deg）

        div{
            width: 100px;
            height: 100px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            background-image: radial-gradient(40px at 50px 50px,red,blue)
        }

径向渐变：半径 at 圆心坐标，颜色 颜色所在位置，颜色 颜色所在位置。

字体阴影

{
	text-shadow: 5px 5px 5px #FF0000;
}

文字阴影： 水平偏移 垂直偏移 模糊距离 阴影颜色

div
{
	width:100px;
	height:100px;
	background:red;
	transition:width 2s;
	-webkit-transition:width 2s;
}

div:hover
{
	width:300px;
}

css过渡：监听过渡状态改变 width height or all,多个要用","连接
过渡所用时间： nums
运动状态：
linear 规定以相同速度开始至结束的过渡效果。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in 规定以慢速开始的过渡效果。
ease-out 规定以慢速结束的过渡效果。
ease-in-out 规定以慢速开始和结束的过渡效果。
延时 nums