圆角效果:
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属性(一)的更多相关文章

  1. 如何处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  2. CSS3属性 box-shadow 向框添加一个或多个阴影

    CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...

  3. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  4. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  5. 实用的CSS3属性和使用技巧

    CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...

  6. H5、CSS3属性的支持性以及flex

    一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...

  7. 移动端 几个css3属性的练习

    转行做前端,上班有一个星期了,什么都不懂,今天学习了几个新的css3属性,记录下来. 注:所有的测试均是在chrome上手机模式测试,与真实的手机环境可能有误差 1:-webkit-tap-heigh ...

  8. 【原】常见CSS3属性对ios&android&winphone的支持

    2个月前,我在博文<webapp开发中兼容Android4.0以下版本的css hack>中写过“那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了” ,在 ...

  9. CSS3属性border-radius绘制多种多样的图形

    border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...

  10. [css]需警惕CSS3属性的书写顺序

    转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...

随机推荐

  1. 第一个C语言的小项目

    这里先写下主要的业务代码,一些库代码稍后补充上 /** * Feed新闻个性化推送 */ #include "push_service_news.h" /** * 保证单进程运行 ...

  2. EF 配置(SqlServer,Mysql)

    DbProvider Mysql <system.data><DbProviderFactories><remove invariant="MySql.Data ...

  3. 四、Shell输入、输出功能和字符颜色设置

    一.Shell输入功能 1.键盘输入   方式一: [root@Salve four]# cat test.sh #!/bin/bash #-e 参数可以解析语句中的转义字符 echo -e &quo ...

  4. Poj 1276 Cash Machine 多重背包

    Cash Machine Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 26172   Accepted: 9238 Des ...

  5. java中finally和return的执行顺序

    注意:return的位置... 从这几个例子中可以看到,如果try之前没有有条件的return,则try..catch..finally语句块中的语句都是顺序执行(如果try中或者catch中 有re ...

  6. 【BZOJ】2115: [Wc2011] Xor

    http://www.lydsy.com/JudgeOnline/problem.php?id=2115 题意:给出一个n个点m条边的无向连通边加权图,求1-n的某条路径使得异或值最大(可以重复点可以 ...

  7. CSS 属性 - position讲解

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: r ...

  8. SU suspike命令学习

    用默认参数生成的数据如下: 用别的软件打开数据查看, 依次查看4个脉冲的位置(第几道.出现的时间), 接下来我们做一些小练习,比如说在同一道上放两个脉冲 还可以增加道数,让脉冲位于不同地方,

  9. golang vim环境搭建

    主要使用到的是golang的vim插件vim-go, 安装方法: (1)配置好自己的GOPATH和GOROOT: (2)在GOPATH目录下建立 src.pkg.main.bin四个目录: (3)安装 ...

  10. [转]使用 HttpClient 和 HtmlParser 实现简易爬虫

    http://www.ibm.com/developerworks/cn/opensource/os-cn-crawler/ http://blog.csdn.net/dancen/article/d ...