CSS3 常用属性

web 开发：CSS3 常用属性——速查手册！

web 开发:CSS3 常用属性——速查手册! CSS3 简介:http://www.runoob.com/css3/css3-intro.html 1.目录 http://caniuse.com/ http://www.w3.org/TR/#tr_CSS http://www.html5cn.com.cn/book/css/index.html background-position: CSS Backgrounds and Borders Module Level 3 W3C Candi…

CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"> 20px圆角 <div style="width:200px; height:100px; border:1px solid red; border-radius:20px;"></div> 20%圆角取宽的20%和高的20% <div style=…

CSS3常用属性

CSS是我们常用的控制网页样式和布局的一种标准. CSS3是最新的CSS标准. CSS3被拆分为"模块",旧的规范也已经拆分为小的块,同时还增加了新的属性. 一些比较重要的CSS3的模块:选择器.盒模型.背景和边框.文字特效.2D/3D转换.动画等. CSS3边框: 使用用CSS3,可以创建圆角边框,添加阴影框,并作为边界的形象而不使用画面设计程序,如Photoshop等软件. CSS3圆角:border-radius属性--创建边框线的圆角示例: 值的类型可以是像素,也可以为百分比…

CSS3常用属性及效果汇总

本文转载于<https://blog.csdn.net/lyznice/article/details/54575905> 一.2D效果属性要使用这些属性,我们需要通过 transform ,并且,为了保证兼容性,我们可能还需要添加带有浏览器内核前缀的属性,比如 -webkit-transform. 1.位移属性 translate( x , y ) 1.border-radius的值可以为绝对单位px,和相对单位em,rem,也可以为百分比,值越大,弧度越大. 2.属性值位数不同时,表现也…

CSS3常用属性浏览器兼容前缀

1.检测网站https://gsnedders.html5.org/outliner/ 2.查询是否支持前缀http://caniuse.com 3.border-radius\box-shadow\opacity这几个一般前缀-webkit-和-moz-基本就可以了 eg: -webkit-border-radius:xxxx; -moz-border-radius:xxxx; 4.text-shadow不需要加前缀.IE10+支持,其他基本支持 5.text-overflow只需加…

CSS3常用属性及用法

1.transition: 过渡属性,可以替代flash和javascript的效果兼容性:Internet Explorer 9 以及更早的版本,不支持 transition 属性. Chrome 25 以及更早的版本,需要前缀 -webkit-. Safari 需要前缀 -webkit-. div { transition: width 1s linear 2s; /* Firefox 4 */ -moz-transition:width 1s linear 2s; /* Safari a…

1------border-radius (盒子圆角 border-radius :border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 2------如果将一个正方形盒子设为圆形: 假设 width 200px height 200px border 1px solid red; border-radius:3px; 得出: 将 width;100px height;100px border-radius:3px; 各减一半那么盒子的圆角就出来了…

css3新增属性有哪些？css3中常用的新增属性总结

css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css3新增边框属性 1.css3新增属性之border-color:为边框设置多种颜色 p { border-style:solid; border-color:#ff0000 #0000ff; } 这里说一下题外话,需要注意:"border-width" 属性如果单独使用的话是不会起作用的.…

CSS3 文本常用属性

CSS 常用属性 text-shadow属性文字阴影:第一个值背景相对原本文字居左的距离,第二个值据当前文本上方的距离,第三个值清晰度(越小越清晰),第四个值颜色 word-wrap:自动换行,如果是英文的话,不会拆开文字…

CSS3动画属性Transform解读

无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅,从初级到比较复杂的3D动画大概会说个三四个回合,我们就从最初级的东西开始说,由于这些知识大部分都是我个人根据文档所理解的,主要是当笔记.所以,也许会跟不少同学所理解的不太一样,甚至相悖,我希望大家可以在文章下面指出不对的地方,我们共同来学习. 在我们以前使用绝对定位的时候就已经初步接触过Z轴,…

CSS/CSS3常用样式小结

1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; 2.设置溢出文本显示为省略标记: text-overflow:ellipsis; (注:text-overflow:clip | ellipsis | ellipsis-word;…

CSS样式常用属性整理

web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常用属性> ******* CSS 常用属性 ********* z-index: auto (默认值) 检索或设置对象的层叠顺序. 并级的对象,此属性参数值越大,则被层叠在最上面. 如两个对象的此属性具有同样的值,那么将依据它们在HTML文档中流的顺序层叠,写在后面的将会覆盖前面的. 必须定义posit…

CSS3常用30种选择器总结

CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.html 1. *:通用元素选择器 * { margin: 0; padding: 0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除默认CSS样式方法 *选择器也可以应用到子选择器中,例如下面的代码: #container * {…

css3新增属性API

写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz- 主要是firefox火狐 -webikt-主要是chrome谷歌和Safari -o-主要是用于苹果机上的浏览器如Opera 下面主要从颜色.文本.选择器等方面来总结一下CSS3新增的属性颜色 css1和css2只能通过以下三种方式来表示颜色颜色名称 eg:color:red HEX方式 (语法:#RRGGBB或#RGB 各点的取值范围为00…

CSS3基础(4)——CSS3 渲染属性

一. CSS3 计数器详解 CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素计数,同时实现个性化计数. 1.CSS3计数器属性一览表属性描述 counter-reset 定义计算器,包括初始值.作用域等 counter-increment 设置计数器的增数 content 在::before和::after中生成内容 counter 在content属性中使用,用来调用…

两点补充——CSS3新属性以及弹性布局

CSS3 新属性一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋二 .[CSS 长度单位] 1.px:像素.长度固定,表示分辨率占几个像素点: 2.%:表示相对于默认值的百分比: 3.em:长度与元素的字号挂钩. rem:长度与根元素的字号挂钩. 即与html 的 font-size 挂钩,若不设置,默认16px . [ em与rem区别 ] em与当前元素自身的font-size挂钩…

CSS的常用属性

刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好坏可以直接关系到你代码书写的麻烦程度,简单来说就是CSS选择器用得好,实现相同的功能时所用到的代码就会少,这样做出来的网页代码就没有那么繁杂. 1.选择器的书写样式: 选择器中可以写多对CSS属性,用{}包裹,每个属性名与属性值之间用冒号分隔,多对属性名之间必须用分号分隔. 写法: 选择器{ 属性1…

css3新属性的学习使用

display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有块级元素的所有属性,比如宽度高度,margin padding等... 常见的inline-block级别的标签? img input textarea td tr 隐藏一个元素的方式: 1.宽度或高度设为0,配合overfloat:hidden属性. 2.display:none显示为display:block. 3.…

[总结]CSS/CSS3常用样式与web移动端资源

CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE10以上不支持. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准. 条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释…

HTML5新增常用属性

一. 代码名称语义化的好处 1.能让搜索引擎更好的收录 2.对于特殊设备如盲人设备好解析二.article和section的区别 article(文章):独立且能被外部引用 section(章节.段落):不独立,不能被外部引用三. css3常用的新增属性可以下拉的输入框 datalist 2.图片加载figure 3.音频audio 不支持播放 autoplay:准备就绪后播放 controls:音频控件 4.css2布局分为盒模型.可视化模型其中盒模型包括:块级.BFC(块级元素格式化…

什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）

大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 100p…

CSS3 圆角属性 border-radius和-webkit-border-radius使用

CSS3 圆角属性 border-radius 在 CSS3 中新增了一个 border-radius 边框半径属性,即大家常用的圆角效果.这使得制作圆角将不再麻烦,只需对所用对象加一个 border-radius 属性即可,不必使用图片定位或冗余代码完成了.不过它的使用瓶颈目前也是显而易见的,因为效果显示需支持 CSS3 的现代浏览器,而在一些老版本浏览器上则无法显示,如IE8及以下浏览器就不行. CSS3 圆角属性 border-radius 使用方法: 同时设置四个圆角只需给出一个值即可:…

CSS3 高级属性

尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档.很好的测试并且最常用到,所以如果你最近在设计网站,你很难能脱离它们. 但是,隐藏在浏览器的大宝库中是一些高级的.被严重低估的属性,但是它们并没有得到太多的关注.或许它们中的一些应该这样(被无视),但是其它的属性应该得到更多的认可.最伟大的财富隐藏在Webkit的下面,而且在iPhone.iPad和…

css属性（常用属性整理）

摘要:本文是我在学习前端的过程中整理的一些常用css属性,部分是css3新增的,因能力有限,文中如有错误,欢迎提出,我会及时修改.希望对大家有帮助! CSS属性 CSS属性 1 1. css颜色属性 5 1.1. 字体颜色 5 1.2. 背景颜色 5 2. 页面布局相关属性 5 2.1. display 5 2.2. position 6 2.2.1. position:relative 6 2.2.2. position:absolute 6 2.2.3. position:fixed 7 2…

CSS3常用知识点

CSS3常用知识点 1 css3选择器 1.1 属性选择器 /* E[attr~=val] 表示的一个单独的属性值这个属性值是以空格分隔的*/ .attr2 a[class~="kawa"] { //TODO } /* E[attr|=val] 表示的要么一个单独的属性值要么这个属性值是以"-"分隔的*/ .attr3 a[class|="kawa"] { //TODO } /* E[attr*=val] 表示的属性值里包含val字符并且在“…

高效开发之SASS篇灵异留白事件——图片下方无故留白你会用::before、::after吗 link 与 @import之对比学习前端前必知的——HTTP协议详解深入了解——CSS3新增属性菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

高效开发之SASS篇作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,也不可以引用等等.作为一名程序员,不能编程怎么能忍受,这就是sass存在的意义,工业化生产,让CSS程序范儿. 主要目的就是让你写CSS时不在重复. SASS优点可以简单的规纳为以下几点: 增加了一些编程特性…

html常用属性border-radius、linear-gradient怎么使用

html常用属性border-radius.linear-gradient怎么使用一.总结一句话总结: 1.border-radius: 8px 8px 8px 8px !important; 2.linear-gradient(rgba(255,124,67,0),rgba(255,0,0,1)) 二.CSS3的border-radius属性详解 border-radius: 8px 8px 8px 8px !important; border-radius: none | length{…

4.css3文本属性

1.css3文本属性: ①Color:颜色. ②Text-align:文本水平对齐方式. ⑴Left默认值,right,center,justify两端对齐: ⑵新增start相当于left,end相当于right: ③Line-height:行高. Normal,数字,百分比,px,em: ④Text-indent:首行缩进. 常用单位像素,百分比,em: ⑤Text-decoration:添加修饰. ⑴None默认值: ⑵Underline加下划线: ⑶Overline加上划线: ⑷Line…

CSS3 animation属性中的steps实现GIF动图(逐帧动画)

相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的贝塞尔曲线.但是这些动画效果都是连续性的. 今天发现个新功能 animation-timing-function 的另外个属性值 steps()功能符,可以让动画不连续,就是制作逐帧动画. steps(n,start/end) 第一个参数 number 为把动画分为 n 步阶段性展示,表示把…

css3新增属性-background背景

css3新增属性边框属性背景属性文字属性颜色属性背景属性属性说明 background-image 添加背景图片 background-size 指定背景图像的大小 background-origin 指定背景图像的位置区域 background-clip 指定位置开始裁剪背景图 1. background-image(背景图片) CSS3中可以通过background-image属性添加背景图片语法:background-image:url('图片地址') 注意:不同的背景图像…

【CSS3 常用属性】的更多相关文章