css3圆角讲解

Css3圆角讲解:想必大家对于图片,背景圆角,都不陌生吧,

圆角语法:border-radius:圆角值;

这个值可以使用:em ,ex,pt,px,百分比;

Border-radius跟margin,padding差不多

Border-radius:lefttop,righttop,rightbottom,leftbottom。

<div class="box1"></div>

.box1{width:200px;height:100px;border-radius:30px 5px;background:#f66f17;margin-top:30px;}

<div class="box2"></div>

.box2{width:200px;height:100px;border-radius:30px 20px 10px 0px;background:#f66f17;margin-top:30px;}

对于圆角理解起来应该,很简单。

对于百分比:目前最安全的做法,就是将每个圆角边框的风格和宽度,都设为一样的值,并且避免使用百分比值。

IE9以下是不支持此属性

如有问题,请指出。

时间: 2024-11-06 07:12:24

css3圆角讲解的相关文章

css3圆角和渐变2种常用功能详解

Css3圆角讲解:想必大家对于图片,背景圆角,都不陌生吧, 圆角语法:border-radius:圆角值: 这个值可以使用:em ,ex,pt,px,百分比; Border-radius跟margin,padding差不多 Border-radius:lefttop,righttop,rightbottom,leftbottom. <div class="box1"></div> .box1{width:200px;height:100px;border-rad

让IE浏览器支持CSS3圆角属性的方法

如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式.用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式.今天我们主要是讲解如果用CSS3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS3的解析,只有还不太主流的IE9支持CSS3和HTML5的标准.让IE支持CSS3的解析方法有很多种,(HTML5 Shiv – 让该死的IE系列支持HTML5吧)下面介绍一种实用的让IE支持CSS3解析的方法——IE利用VML矢量可标记语言

转 CSS3圆角圆边 支持IE6-IE8浏览器

文章出处和来源网址:http://www.divcss5.com/css-texiao/texiao571.shtml 非常简单实用,兼容ie----不转对不起程序员 CSS3圆角圆边样式,支持各大版本浏览器,包括支持IE6-IE9浏览器的圆边圆角. 本文我们主要是讲解如果用CSS 3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS3的解析,只有还不太主流的IE 9支持CSS 3和HTML 5的标准.让IE支持CSS 3的解析方法有很多种,下面介绍一种实用的让

让IE浏览器支持CSS3圆角的方法

如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式.用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式.今天我们主要是讲解如果用CSS3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS3的解析,只有还不太主流的IE9支持CSS3和HTML5的标准.让IE支持CSS3的解析方法有很多种,(HTML5 Shiv – 让该死的IE系列支持HTML5吧),下面介绍一种实用的让IE支持CSS3解析的方法——IE利用VML矢量可标记语

CSS3圆角圆边 支持IE6-IE8浏览器

CSS3圆角圆边样式,支持各大版本浏览器,包括支持IE6-IE9浏览器的圆边圆角. 本文我们主要是讲解如果用CSS 3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS3的解析,只有还不太主流的IE 9支持CSS 3和HTML 5的标准.让IE支持CSS 3的解析方法有很多种,下面介绍一种实用的让IE支持CSS 3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角. 在CSS中使用CSS插件文件即可让IE6/IE7/IE8浏览器. .yuan { bor

PIE使IE支持CSS3圆角盒阴影与渐变渲染

PIE使IE支持CSS3圆角盒阴影与渐变渲染 http://css3pie.com/download/

IE兼容CSS3圆角border-radius的方法

IE兼容CSS3圆角border-radius的方法 优化网站js效果,网上看见一个很简单方便的兼容圆角的方法,记下来. 和大家分享一下,知道的高手就当捧个过场.嘻嘻 1.下载border-radius.htc 2.CSS .radius{ -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(border-radius.htc); } 优点: 一.最为方便让IE实现圆角

css3圆角详解

css3(border-radius)边框圆角详解 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari 5.Chrome 4和Firefox 4 一.border-radius属性 CSS3圆角只需设置一个属性:border-radius(含义是"边框半径").你为这个属性提供一个值,就能同时设置四个圆角的半径.所有合法的CSS度量值都可

CSS3圆角导航菜单

<!DOCTYPE HTML><html><head><title>石家庄渣浆泵</title><style type="text/css">*{margin: 0;padding: 0;}body {background-color: #434343;color: #fff;font-family: 'Courgette', cursive;padding: 50px;text-align: center;}a