(CSS3)CSS3- 最常用的属性(一)

CSS3带来的种种新特性真的让人振奋，最起码圆角，阴影可以通过编程实现了~可是令人郁闷的是在国内IE6，7，8这些不支持css3的浏览器依然占据了大半壁江山。虽然是这样，但是我们却要有意识的去使用，为支持CSS3的浏览器提供更好的显示效果。如果你是个完美主义者，为了保持一样的效果当然可以借助于图片。

特性一：圆角--border-radius

语法格式:

border-radius:{topleft topright bottomright bottomleft}{topleft,bottomright},{topright,bottomleft}{all}

方向顺时针

div.border{width:200px;height:25px;margin:10px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background:#b3d465;border:1px solid #96b64a;text-align:center;font-size:14px;font-weight:bold;color:#fff;line-height:25px;
}

在支持CSS3的浏览器中你可以看到圆角效果

圆角测试

不过可惜的是在FireFox中和webkit核心的浏览器中必须加上-moz,-webkit;

特性二：阴影--box-shadow

语法格式：

box-shadow:{length} {length} {length} || color

我们为刚才的测试加上阴影

div.boxshadow{
-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;box-shadow:0 0 5px #ccc;
}

圆角阴影测试

特性三：渐变--gradient

语法格式:

/*
渐变的类型? (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
开始的颜色? (from(red))
结束的颜色? (to(blue))
*/
background:-webkit-gradient(linear,0 0, 0 100%,from(#bdd77d),to(#9cbc4d));
/*
请注意我们将渐变的类型——linear——放到了属性前缀中了
渐变从哪里开始? (top – 我们也可以使用度数，比如-45deg)
开始的颜色? (red)
结束的颜色? (blue)
*/
background: -moz-linear-gradient(top, #bdd77d, #9cbc4d);

圆角阴影渐变测试

特性四：文本阴影-text-shadow

语法格式：

/*X偏移,Y偏移,模糊半径,颜色*/
text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

我们给以上的测试文本加上阴影

text-shadow:-1px -1px 0 rgba(0 ,0 ,0, 0.3);

圆角阴影测试

转载于:https://www.cnblogs.com/gxll1314/archive/2010/10/13/1850388.html

(CSS3)CSS3- 最常用的属性(一)相关推荐

传智播客html css3笔记,传智播客详解Css3九大常用属性
在Css3的学习和实际操作中,我们经常会接触到一些常用属性,比如字体.文本.列表和背景等.下面,传智播客将对常用的Css3九大属性进行详解. 1.传智播客详解Css3九大常用属性-字体 l Font- ...
css3属性文字换行,CSS3让文本自动换行——word-break属性
1.依靠浏览器让文本自动换行浏览器本身都自带着让文本自动换行的功能. 2.指定自动换行的处理方法在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法. div{ word-b ...
[css] 请说说CSS3实现文本效果的属性有哪些？
[css] 请说说CSS3实现文本效果的属性有哪些? text-shadow:文字阴影效果 word-wrap:换行设置个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
详解CSS3中新增的内容属性：content
详解CSS3中新增的内容属性:content 1. 用法: content属性用于插入生成的内容,常和:before选择器和:after选择器配合使用,将生成的内容放在一个元素内容的前面或后面. 2. ...
利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
CSS3（background）背景属性与文字阴影
CSS3(background)背景属性 CSS(background)背景属性CSS(background)背景属性与文字阴影背景简写顺序: background-color background ...
CSS常用样式属性有哪些？代码怎么写?
CSS常用样式属性有哪些?CSS样式属性有两种分别是局常用样式属性和文本常用样式属性,CSS的作用是美化HTML网页和控制页面布局,我们需要掌握这两种常用的样式属性来美化页面.一套教程,带你轻松掌握H ...
Css的filter常用滤波器属性及语句大全
Css的filter常用滤波器属性及语句大全语法:STYLE="filter:filtername(fparameter1, fparameter2...)" (Filterna ...
html5--6-59 其他常用CSS属性
html5--6-59 其他常用CSS属性实例学习要点了解opacity属性:透明度设定了解cursor属性:自定义鼠标样式了解CSS新单位rem和em的区别了解轮廓outline的设置 ...
08-数组中常用的属性及方法
08-数组中常用的属性及方法创建: 使用 JavaScript 关键词 new 使用数组文本创建 //数组中的方法: toString() 把数组转换为数组值(逗号分隔)的字符串. join() 方 ...

(CSS3)CSS3- 最常用的属性(一)

(CSS3)CSS3- 最常用的属性(一)相关推荐

最新文章

热门文章