css3遇到的一些属性

rgba        　　　　  是由red、green、blue 三种颜色搭配出来的
box-shadow    　　向元素添加阴影层，水平阴影位置，垂直阴影位置，后面是可选：模糊距离，阴影大小，颜色，是否是内部阴影
text-shadow    　　向文本添加一个或多个阴影，水平阴影位置，垂直阴影位置，模糊的距离，阴影颜色
border-radius   　  向元素添加圆角边框
只有一个值的时候，top-left,top-right,bottom-right,bottom-left 四个值相等
两个值的话      top-left 等于 bottom-right 使用第一个值，top-right 等于 bottom-left 使用第二个值
三个值          第一个值是top-left，第二个值是top-right和bottom-left，第三个值是bottom-right
为了兼容老版本的火狐浏览器和webkit内核浏览器加前缀
-moz        火狐浏览器
-webkit        基于webkit内核浏览器

时间： 2024-10-24 13:17:47

css3遇到的一些属性的相关文章

css3之其他的属性

1,自由缩放属性resize 这个属性真的很好玩呢,允许用户可以通过拖动的方式来修改元素的尺寸来改变元素的大小. 记住,得加浏览器的前缀 适用对象:可以使用overflow属性的任何元素 取值: none:不可以拖动 both:可以修改元素的宽度和高度 horizontal:只能修改宽度 vertical:只能修改高度 inherit:继承父元素的属性值 2,外轮廓属性outline 效果:与border相似,但与border不同的是,外轮廓线不占用网页布局空间,外轮廓是一种 动态的样式,只有元

CSS3里面的高级属性

-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad).当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景.要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色. 想要禁用这个高亮,设置颜色的alpha值为0即可. 示例 设置高亮色为50%透明的红色: -webkit-tap-highlight-color: rgba(255,0,0,0.5); 浏览器支持:

Selectivizr-让IE6~8支持CSS3伪类和属性选择器

一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性测试demo 二.简介 selectivizr是一个JavaScript工具,使IE浏览器也可以支持CSS3伪类以及属性选择器,使用很简单,只要把js include到页面上,然后你就可以(- o -)~zZ补觉了. 优点在于: 1. 让老的IE浏览器支持19个CSS3伪类,2个伪元素,以及所有的属

css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <linear-gradient>:linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+); <point>:[ left | right ]? [ top | bottom ]? || <a

css3中的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例 正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p

CSS3实战1-文本属性text-shadow的用法

text-shadow 定义文本阴影或模糊效果.text-shadow属性在css2中已经定义了,但是在css3中又重新定义了,并且增加了不透明度的效果. 基本语法 text-shadow:none | <shadow> [ , <shadow> ]* <shadow> = <length>{2,3} && <color>? 默认值:无 适用于:所有元素 动画性:是,除了内.外阴影切换时 计算值:指定值 取值: none: 无阴影

css的盒模型，及css3的box-sizing新属性

css的盒模型包含了content(元素自身).padding(内边距).border(边框)及margin(外边距). 如图,浏览器控制台elements的computed可以清晰显示元素盒模型,鼠标多动动就明白了:(蓝色区域表示content元素自身,这里是整个窗口的内容) 盒模型有两种:标准模式和怪异模式.在<!DOCTYPE>声明缺失时就会在ie6.ie7.ie8下触发怪异模式 标准模式下:盒子总宽度/高度 = content + padding + border + margin,c

css3新增的背景属性

有时候我们需要往边框文字上添加背景与背景图片的时候就有用处了 background的css3有两个新增属性分别是background-clip与background-origin;背景-修剪与背景起点; 首先我们写入html+css代码: 得出来个样子就是: 那如果当我们需要文本或者边框上面添加背景时就需要用到 css3的background-clip与background-ojrgin; background-clip翻译成中文意思就是‘背景-修剪’:背景颜色产生了变化,但是背景图片保持不变;

css3 animation动画对应属性解释

animation Value:     [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode>] [, [<animatio

CSS3中的一些属性

1.可匹配部分字符串 1 /*^运算符,匹配字符串首部*/ 2 a[href^='http://website'] 3 /*$运算符,匹配字符串尾部*/ 4 a[href$='.png'] 5 /* *运算符 匹配任意位置的子字符串*/ 6 a[href*='google'] 2. box-sizing属性 可使用box-sizing属性选择盒子模型:border-box; content-box(默认); padding-box CSS3背景提供了 两个新属性:background-clip