css3属性(一)
圆角效果:
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属性(一)的更多相关文章
- 如何处理CSS3属性前缀
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- CSS3属性 box-shadow 向框添加一个或多个阴影
CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- 让IE6/IE7/IE8浏览器支持CSS3属性
让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
- 实用的CSS3属性和使用技巧
CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...
- H5、CSS3属性的支持性以及flex
一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...
- 移动端 几个css3属性的练习
转行做前端,上班有一个星期了,什么都不懂,今天学习了几个新的css3属性,记录下来. 注:所有的测试均是在chrome上手机模式测试,与真实的手机环境可能有误差 1:-webkit-tap-heigh ...
- 【原】常见CSS3属性对ios&android&winphone的支持
2个月前,我在博文<webapp开发中兼容Android4.0以下版本的css hack>中写过“那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了” ,在 ...
- CSS3属性border-radius绘制多种多样的图形
border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以 ...
- [css]需警惕CSS3属性的书写顺序
转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...
随机推荐
- 泊松回归(Poisson Regression)
本博客已经迁往http://www.kemaswill.com/, 博客园这边也会继续更新, 欢迎关注~ Linear Regression预测的目标\(Y\)是连续值, Logistic Regre ...
- POJ 1816 Wild Words
Wild Words Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 4412 Accepted: 1149 Descri ...
- POJ 1308 Is It A Tree?
Is It A Tree? Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18778 Accepted: 6395 De ...
- Java 监控请求
监控对象 import java.util.Date; import java.util.HashMap; import java.util.Map; import java.util.Map.Ent ...
- cJSON_json包的C语言解析库
cJSON库描述 CJSON是一个用于解析JSON包的C语言库,库文件为cJSON.c和cJSON.h, 所有的实现都在这两个文件中.原作者的地址cJSON. JSON包的解析 例如有一个JSON的数 ...
- eclipse luna 安装 Hadoop 1.2.1 eclipse-plugin
博主最近学习Hadoop 1.2.1,从多个搜索引擎的搜索结果当中汇合得出本文Hadoop 1.2.1 Eclipse-plugin安装过程介绍,如果你是从网上下载hadoop-eclipse-plu ...
- 新找到一个安装Android SDk的方法-记录
此方法需使用国内的镜像,但是国内镜像网速不一定要很快. 迅雷下载工具这个是必须的. 今天注意到SDK目录下有一个temp文件夹,打开看了看发现就是缓存的目录,因此想到直接从镜像站下载相应的包来替换,测 ...
- Microsoft OneScript 团队发布的最新一版在 SQL Server Management Studio 中运行的脚本,可以帮助我们获取更详细的版本信息。
该脚本有以下几点: 1. SQL Server 的主要版本.服务级别和版本类别 2. 已安装SP包.累计更新CU,历史更新的QFE\ GDR 3. 推荐当前SP包可以安装最新的CU,并给到相关资源地地 ...
- css3照片墙+曲线阴影
css3照片墙+曲线阴影 最近在学习jquery,晚上想复习下以前学过的知识,看到网上有关于css3照片墙的,感觉挺好玩的,就做了做.(以下图片均来自网络) 一.css3照片墙 html部分: < ...
- ASP.NET的简单与面向对象开发
ASP.NET开发,一开始是为了超赶时间完成任务,只能把功能实现即可.如下面一个功能,在网页中有一个铵钮,用户点一点切换网页的图片,再点一点又切换回来.我们要怎样做?在铵钮事件中去变更图片的路径即可. ...