圆角效果:
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. JDBC_part3_批处理_事务_元数据

    本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! JDBC_day03 String a = " ...

  2. 解决用navicate远程连接数据库出现1045 access denied for user &#39;root&#39;@&#39;localhost&#39; using password yes

    在mysql命令行中执行 SET PASSWORD FOR 'root'@'localhost' = PASSWORD('123456');  GRANT ALL PRIVILEGES ON *.*  ...

  3. [wikioi 1034][CTSC 1999]家园(网络流)

    由于人类对自然的疯狂破坏,人们意识到在大约2300年之后,地球不能再居住了,于是在月球上建立了新的绿地,以便在需要时移民.令人意想不到的是,2177年冬由于未知的原因,地球环境发生了连锁崩溃,人类必须 ...

  4. PCL入门—点云操作 定义变量 显示点云 存储

    // 定义相关变量 pcl::PointCloud<pcl::PointXYZ>::Ptr cloud_ptr (new pcl::PointCloud<pcl::PointXYZ& ...

  5. Android Fragment getActivity返回null解决

    在Android开发中,如果我们用到V4包里面的Fragment,在应用被切换到后台的时候,Activity可能被回收,但是创建的所有Fragment则会被保存到Bundle里面,下面是Fragmen ...

  6. Inno Setup 创建站点,创建虚拟目录

    原文 http://hi.baidu.com/0531_sunmiles/item/ce22554ab7d33d0be9350477 下面的这段代码是用Inno Setup 做安装包的时候创建IIS新 ...

  7. English -&#160;therefore,so,hence,then,accordingly,thus用法解析

    这几个词的区别大致可从以下几方面去看: 1.therefore adv.因此, 所以=for that reason=consequently常用于连接两个并列分句,其前加“and”或分号“:”.He ...

  8. Python 逻辑行/物理行

    物理行是你在编写程序时所看见的. 逻辑行是Python看见的单个语句.Python假定每个物理行对应一个逻辑行 . 默认地,Python希望每行都只使用一个语句,这样使得代码更加易读. 如果你想要在一 ...

  9. mybatis的动态sql编写以及一对一关系查询和一对多的查询

    创建mybatis数据库,运行以下sql语句 /* SQLyog Ultimate v8.32 MySQL - 5.5.27 : Database - mybatis **************** ...

  10. i++ 是线程安全的吗?

    相信很多中高级的 Java 面试者都遇到过这个问题,很多对这个不是很清楚的肯定是一脸蒙逼.内心肯定还在质疑,i++ 居然还有线程安全问题?只能说自己了解的不够多,自己的水平有限. 先来看下面的示例来验 ...