css3新UI
圆角
- border-radius: 1-4个数/1-4个数
前面表示水平半径，后面表示垂直半径（椭圆）
不给“/”则水平半径和垂直半径一样（圆）
- 参数
各种长度单位都可以：px, %,…
%有时很方便，%表示半径占元素宽或高的百分比
实例：
<style type="text/css"> .box {width: 400px; height: 400px; margin: 50px auto; border: 1px solid #000; transition:3s linear;} .box div {width: 180px; height: 180px; border: 1px solid #000; margin: 10px; box-sizing: border-box; float: left; background: url(./yellow.jpg);} .box div:nth-of-type(1),.box div:nth-of-type(4){border-radius: 0px 60%} .box div:nth-of-type(2),.box div:nth-of-type(3){border-radius: 60% 0px;} .box:hover {-webkit-transform:rotate(360deg);} </style>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>边框
- 边框图片 border-image: url() 上下尺寸 左右尺寸
border-image-sourceg 引入图片
border-image-slice 切割图片
border-image-width 边框宽度
border-image-repeat 图片的排列方式
round 平铺，repeat重复， stretch拉伸
- 边框颜色 border-color
线性渐变
linear-gradient([<起点||角度>]？<点>，<点>…)
只能用在背景上
- IE
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=”#ffffff”,endColorstr=”#ff0000”,GradientType=”1”);
参数
- 起点：从什么方向开始渐变（默认从上到下）
》left、left、left top
- 角度：从什么角度开始渐变
- 点：渐变点的颜色和位置
》black 50%
linear-gradient(left top,red,green)
linear-gradient(left top,red,green)
linear-gradient(left top,red 0,green 100px)
linear-gradient(left top,red 0,green 50%)
/*同一位置直接跳变*/
linear-gradient(left top,red 0,green 50%)
/*加入背景图片*/
background:-webkit-linear-gradient(top rgba(255,255,255,1) 30%, rgba(255,255,255,0)),url(tupian.gif);repeating-linear-gradient 渐变重复
径向渐变
radial-gradient([<起点>]？[<形状>||<大小>,]?<点>，<点>…)
- 起点：可以是关键字（left,top,rigth,bottom）,具体数值或百分比
- 形状：eclipse、 circle
- 大小：具体数值或百分比，也可以是关键字（最近端，最近角，最远角，包含或覆盖（closest-side,closest-corner, farthest-side,farthest-corner, contain or cover））;
- 注：firefox目前只支持关键字
背景
多背景
逗号分开
- background:url(a.pg) 0 0, url(b.jpg) 0 10%;
背景尺寸background-size:x y
- background-size:100% 100%
- cover 铺满，可能会超出
- contatin 图片完全显示，不一定铺满
background-origin:border | padding | content
- border-box：从border区域开始显示背景。
- padding-box：从padding区域开始显示背景
- content-box : 从content区域开始显示背景
background-clip
- border：从border区域向外裁剪背景
- padding：从padding区域向外裁剪背景
- content：从content区域向外裁剪背景
- no-clip：从border区域向外裁剪背景
- webkit内核浏览器实现了text：在文字的区域剪切背景
背景裁剪结合线性渐变做的一个例子
<style type="text/css"> body{background: #000; text-align: center;font: 50px/200px "微软雅黑"; } h1{ display: inline-block; color: rgba(255,255,255,0.4); background: -webkit-linear-gradient(-30deg, rgba(255,255,255, 0) 120px, rgba(255,255,255, 1) 180px, rgba(255,255,255,1) 220px, rgba(255,255,255,0) 280px) no-repeat -300px 0px;-webkit-background-clip:text;} </style>
</head>
<body>
<h1>向右滑动</h1>
<script type="text/javascript"> var oTimer = null; var iLeft = -300; var oH1 = document.getElementsByTagName("h1")[0]; function moverTo() { oTimer=setInterval(function(){ iLeft += 10; oH1.style.backgroundPosition = iLeft+"px 0px"; if (iLeft == 500) { iLeft = -300; clearInterval(oTimer); } }, 10); } setInterval(function(){ moverTo(); },3000); // moverTo(); </script>
</body>遮罩
两张图片，一张作为遮罩，另一张按照遮罩的形状显示（有像素的地方就显示）。
mask-image
mask-position
mask-repeat