css3基本属性

1.浏览器前缀

(1)-webkit- (webkit、chrome、Safari)

(2)-moz-(Firefox)

(3)-ms-(Internet explorer)

(4)-o-(opera)

推荐在最后写上一条无前缀的声明!

2.为元素创建圆角(border-radius)

(1)为元素创建相同的四个圆角:-webkit-border-radius:10px;

(2)为元素创建一个圆角:-webkit-border-top-left-radius:10px;//创建左上角的圆角

                                      -moz-border-radius-topleft:10px;

(3)为元素创建椭圆形圆角:-webkit-border-radius:x/y;//x:原角在水平方向上的半径大小   y:原角在垂直方向上的大小

(4)为元素创建圆形圆角:-webkit-border-radius:r;//r:元素的半径大小,r的值应该等于元素高度或宽度的一半。

现在,所有新版本的浏览器都支持无前缀的border-radius属性。

时间: 2024-12-15 00:19:51

css3基本属性的相关文章

CSS3基本属性之渐变Gradient

CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研CSS3在web中的应用,为了不被淘汰,我也开始向CSS3进发,争取跟上技术的前沿.从现在开始我会不断的发布一些CSS3的应用,和大家一起分享,今天我们首先要看的就是:CSS3: Gradient─CSS3渐变. CSS3 Gradient分为linear-gradient(线性渐变)和radial-grad

CSS3实战开发:百度新闻热搜词特效实战开发

各位网友,今天这篇文章,我将手把手带领大家开发百度新闻首页的"新闻热搜词"特效.在这个特效中应用的知识点都很基础,如果你对这些还不清楚,可以关注我以前写的详细教程.今天讲这个案例,也是希望告诉大家,在开发一个特效的时候,请不要将问题复杂化.可能有些人一开始真的不知道从哪下手,当你看完本次教程,你定会觉得,原来一切都这么简单. 可能有些人还不知道这个特效,啥也不说了,直接上效果图: 从上面的特效中,大家不难发现,当鼠标划过热搜词时,会有一个半透明的黑色背景滑上来,而且这个黑色区域中也是有

css3 animate基本属性

Css3animate属性 属性 描述 Css Animation 所有动画属性的简写属性,除了animation-play-state属性 Animation:name duration timing-function delay iteration-count direction; 3 Animation-name 规定@keyframes动画的名称. animation-name:keyframename|none 3 Animation-duration 规定完成一个周期所花费的秒或毫秒

CSS3最颠覆性的动画效果,基本属性[3D]

和2D一样也是transform 即变形 1)rotateX rotateY rotateZ(也可以用transform-origin来设置旋转中心点) 2)透视(perspective) 给父亲加透视,透视就是模拟眼睛到物体的距离,近大远小,即数值越小,3D越明显 理解透视就是把眼睛放在离物体多远的地方看,不设置透视可以理解成在无穷远处看,和太阳光一样,不会因为Z改变而看出变化                                             translate3d(x,

理解CSS3中的background-size(对响应性图片等比例缩放)

2016-03-10 01:40 by 空智, 7463 阅读, 8 评论, 收藏, 编辑 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用background-size:400px 200px缩放设置 固定宽度400px和高度200px-使用background-size:400px;的缩放设置,那么第二个参数会自动转换为auto 固定宽度400px和高度200px-使用background-size:100% 100%

《图解CSS3——第4章 CSS3背景-1》

CSS3背景 4.1 CSS3背景属性简介 background是一个使用率很高的属性,也是一个十分有用的属性,能帮助设计师实现一些特殊的效果,使用起来也非常简单. 4.1.1 背景的基本属性 背景主要包括五个属性: background-color(背景颜色) background-image(背景图片) background-repeat(背景图片展示方式) background-attachment(背景图片是固定还是滚动) background-position(背景图片位置) 可以单独

移动web相册——css3进度条

1.介绍 因项目中上传作品和web相册都需要上传,都需要用到进度条,进度条的实现可以用Falsh,图片,javascript,但这里我是在移动端使用,所以重点介绍css3的实现方法. 2.代码展示 /*外层box*/ .progress_box{ height: 10px; width:200px; border-radius: 5px; background-color:#ececec; } /* 动画 */ @-webkit-keyframes progressbar { from { wi

css3的flex布局

今天看到百度前端学院有关于flex布局方面的内容,就看了下flex布局,顺便做下总结,方便自己以后看.内容大概分几个方面,一.flex布局的好处以及应用场景:二.原理:三.基本内容:四.demo: 一.flex布局的好处以及应用场景: flex好处就是灵活方便,大多应用在移动端,pc端由于兼容问题应用不太广泛. 二.原理: 说到原理说神马呢?先说下常见的布局吧:一.固定布局:就是宽高都固定的那种,width:500px;height:100px;二.流体式布局:width:100%;height

CSS3实战开发: 纯CSS实现图片过滤分类显示特效

各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运行效果: 从上面的运行效果,大家不难发现,当我点击某一菜单时,导航区域会相应高亮显示此分类的图标,而其他图标则会变暗. 很多人可能会说,这个这么简单,直接使用javascript或jQuery等前端框架,再配合一些CSS,就可以很快实现同样的效果了.如果你是这一部分人,我也希望你停下脚步,看看这篇教程.因为在今天这篇教程中,我会用另一个思维方式来思考问题,我