码迷,mamicode.com
首页 > Web开发 > 详细

css3属性

时间:2015-07-18 15:22:51      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:

圆角效果:
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */

阴影:
box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式(inset)];
1、阴影模糊半径与阴影扩展半径的区别
阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
2、X轴偏移量和Y轴偏移量值可以设置为负数
3.注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。
4.如果添加多个阴影,只需用逗号隔开即可。如:
.box_shadow{box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;}

为边框应用图片:
border-image:url(xx.jpg) 10px 20px no-repeat/repeat/round/stretch;

颜色RGBA
RGBA(0,0,0,0.5)最后值为透明度

渐变色彩
back-image下属性
1.线性渐变:linear-gradient(to bottom/180deg,#fff,#999)
参数分别为渐变方向、角度或方向、开始位置颜色、结束位置颜色
2.径向渐变:radial-gradient

文本的溢出省略
text-overflow:clip/ellipsis 剪切/显示省略标记
white-space:nowrap; 文本控制在一行
word-wrap:normal/break-word 控制文本连续换行/断开换行

字体
@font-face{
font-family:字体名词;
src:路径;
.eot;/* IE9*/
.eot?#iefix/* IE6-IE8 */
.woff‘) /* chrome、firefox */
.ttf/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
.svg/* iOS 4.1- */
}

文本阴影:
text-shadow:X-Offset Y-Offset blur color;水平偏移量、垂直偏移量、阴影模糊程度、阴影颜色;

 

背景图片原始起始位置
backgroud-origin:border-box | padding-box | content-box; 边框、内边距、内容区域(如果背景不是no-repeat,这个属性无效)

 

背景裁剪
background-clip:border-box/padding-box/content-box/no-clip 从(边框、内填充、内容区域、不裁剪)向外裁剪背景

backgroud-size:auto/长度值/百分比/cover/contain
1.cover:将背景图片等比例缩放以填满整个容器
2.contain:将背景图片等比例缩放至某一边紧贴容器边缘为止

css3属性

标签:

原文地址:http://www.cnblogs.com/yzg1/p/4656858.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!