让IE6、IE7、IE8支持CSS3的圆角、阴影样式

合集下载

纯CSS3实现圆角效果（含IE兼容解决方法）

纯CSS3实现圆⾓效果（含IE兼容解决⽅法）如今，这种利⽤CSS制作圆⾓的技术已经得到了⼤多数主流浏览器的⽀持，包括Safari，⾕歌浏览器，IE，Opera和⽕狐浏览器。

下⾯让我们来看看border-radius的语法，解释，以及IE是如何⽀持它的。

语法和说明在CSS3中⽤来⽣成圆⾓效果的属性是border-radius.这个属性跟⼤家熟知的width等属性的⽤法相似：复制代码代码如下:.roundElement {border-radius: 10px;}上⾯的这句代码的作⽤是设置⼀个元素的四个⾓的弧度半径值都为10px。

你也可以对每个⾓单独指定：复制代码代码如下:.pearElement {border-top-left-radius: 7px;border-top-right-radius: 5px;border-bottom-right-radius: 6px;border-bottom-left-radius: 8px;}如果你觉得上⾯的写法太复杂，可以使⽤下⾯border-radius简写的⽅法：复制代码代码如下:.oddRoundElement {border-radius: 12px 5px 12px 5px;/* or */border-radius: 12px 5px;}四个值分别代表的是top-left, top-right, bottom-right, bottom-left四个⾓。

各浏览器对border-radius的⽀持因为这种圆⾓技术是CSS3⾥出现的，⽼式浏览器或较早期的浏览器中⽤到这个属性时需要在CSS⾥添加浏览器引擎前缀(vendor prefixes)。

会是{prefix}-border-radius这样⼀个样⼦，⽽具体各种浏览器引擎前缀是下⾯这样的写法：复制代码代码如下:-moz-border-radius: 20px;-webkit-border-radius: 20px;-o-border-radius: 20px;</p> <p>/* ⽕狐浏览器 */-moz-border-radius-topleft:15px; /* top left corner */-moz-border-radius-topright:50px; /* top right corner */-moz-border-radius-bottomleft:15px; /* bottom left corner */-moz-border-radius-bottomright:50px; /* bottom right corner */-moz-border-radius:10px 15px 15px 10px; /* shorthand topleft topright bottomright bottomleft */</p> <p>/* webkit引擎的浏览器*/-webkit-border-top-left-radius:15px; /* top left corner */-webkit-border-top-right-radius:50px; /* top right corner */-webkit-border-bottom-left-radius:15px; /* bottom left corner */-webkit-border-bottom-right-radius:50px; /* bottom right corner */基本上，你需要对每种浏览器引擎做各⾃的声明，加上这些讨厌的稍微不同的代码来保证完全⽀持border-radius。

CSS3圆角

CSS3圆⾓CSS3 圆⾓⼀、CSS3 圆⾓⼆、浏览器⽀持表格中的数字表⽰⽀持该属性的第⼀个浏览器的版本号。

-webkit- 或 -moz- 前⾯的数字表⽰⽀持该前缀的第⼀个版本。

三、CSS3 border-radius 属性使⽤ CSS3 border-radius 属性，你可以给任何元素制作 "圆⾓"。

以下为三个实例：1. 指定背景颜⾊的元素圆⾓：2. 指定边框的元素圆⾓:3. 指定背景图⽚的元素圆⾓:代码如下:#rcorners1 {border-radius: 25px;background: #8AC007;padding: 20px;width: 200px;height: 150px;}#rcorners2 {border-radius: 25px;border: 2px solid #8AC007;padding: 20px;width: 200px;height: 150px;}#rcorners3 {border-radius: 25px;background: url(paper.gif);background-position: left top;background-repeat: repeat;padding: 20px;width: 200px;height: 150px;}四、CSS3 border-radius - 指定每个圆⾓如果你在 border-radius 属性中只指定⼀个值，那么将⽣成 4 个圆⾓。

但是，如果你要在四个⾓上⼀⼀指定，可以使⽤以下规则：四个值: 第⼀个值为左上⾓，第⼆个值为右上⾓，第三个值为右下⾓，第四个值为左下⾓。

三个值: 第⼀个值为左上⾓, 第⼆个值为右上⾓和左下⾓，第三个值为右下⾓两个值: 第⼀个值为左上⾓与右下⾓，第⼆个值为右上⾓与左下⾓⼀个值：四个圆⾓值相同1，以下为三个实例:（1）四个值 - border-radius: 15px 50px 30px 5px:（2）三个值 - border-radius: 15px 50px 30px:（3）两个值 - border-radius: 15px 50px:以下为源代码:#rcorners4 {border-radius: 15px 50px 30px 5px;background: #8AC007;padding: 20px;width: 200px;height: 150px;}#rcorners5 {border-radius: 15px 50px 30px;background: #8AC007;padding: 20px;width: 200px;height: 150px;}#rcorners6 {border-radius: 15px 50px;background: #8AC007;padding: 20px;width: 200px;height: 150px;}2，还可以创建椭圆边⾓:（1）椭圆边框 - border-radius: 50px/15px:（2）椭圆边框 - border-radius: 15px/50px:（3）椭圆边框 - border-radius: 50%:以下为源代码:#rcorners7 {border-radius: 50px/15px;background: #8AC007;padding: 20px;width: 200px;height: 150px;}#rcorners8 {border-radius: 15px/50px;background: #8AC007;padding: 20px;width: 200px;height: 150px;}#rcorners9 {border-radius: 50%;background: #8AC007;padding: 20px;width: 200px;height: 150px;}五、CSS3 圆⾓属性。

CSS3之书页卷角阴影效果

CSS3之书页卷⾓阴影效果同步发布：视觉如下：CSS3 之书页阴影效果：1<html>2<head>3<meta charset="UTF-8">4<title>书页阴影效果</title>5<style>6 .box {7 width: 400px;8 margin: 0 auto;9 position: relative;10 box-shadow: 1px 0 2px rgba(0, 0, 0, 0.16);11 }12 .box:before,13 .box:after {14 content: "";15 position: absolute;16 -webkit-transform: rotate(-3deg);17 transform: rotate(-3deg);18 bottom: 15px;19 box-shadow: 0 15px 5px rgba(0, 0, 0, 0.3);20 height: 20px;21 left: 3px;22 max-width: 300px;23 width: 40%;24 }25 .box:after {26 -webkit-transform: rotate(3deg);27 transform: rotate(3deg);28 left: auto;29 right: 3px;30 }31 .box .content {32 position: relative;33 z-index: 2;34 font-size: 13px;35 text-align: center;36 background: #fff;37 padding: 10px;38 }39</style>40</head>41<body>42<div class="box">43<div class="content">44<p>测试⽂本</p>45<p>测试⽂本</p>46<p>测试⽂本</p>47<p>测试⽂本</p>48<p>测试⽂本</p>49<p>测试⽂本</p>50<p>测试⽂本</p>51</div>52</div>53</body>54</html>总结：运⽤css的伪类选择器after，before设置box左右两个卷⾓，设置阴影（box-shadow）和旋转（transform）属性，调整位置达到卷⾓视觉效果，设置content的z-index属性让内容浮在阴影之上。

CSS3网页制作实例圆角的网页信息栏

CSS3网页制作实例圆角的网页信息栏使用CSS3的 Gradient 线性渐变，Radius 圆角，Shadow 阴影，完美兼容IE9(+),Chrome,Firefox,Opera。

由于IE6/7/8对CSS3支持的不是很好，所以圆角和阴影效果不能显示出来。

不过在不需要圆角的情况下完全可以把圆角样式屏蔽。

页面代码如下：<!DOCTYPE HTML><html><head><title>nice skin</title><style type="text/css">/*=====common style=====*/ul{margin:0;padding:0;list-style:none;font-size:12px;color:#767676;}ul li{height:24px;line-height:24px;text-indent:38px;}h3{height:28px;line-height:28px;margin:0;padding:0;text-indent:20px;font-siz e:14px;color:#333;border-top-left-radius:3px;border-top-right-radius:3px;-moz-bo rder-radius-topleft:3px;-moz-border-radius-topright:3px;webkit-border-top-left-r adius:3px;webkit-border-top-right-radius:3px;-o-border-top-left-radius:3px;-o-bo rder-top-right-radius:3px;}/*列表头的圆角样式*//*=====box style====*/.box{width:300px;margin:10px auto;padding:0 0 5px0;font-family:tahoma;border-radius:3px;-moz-border-radius:3px;-webkit-border-rad ius:3px;-o-border-radius:3px;}/*列表框的圆角样式*/.blueshadow{box-shadow:0 0 5px #9bc1e7;-moz-box-shadow:0 0 5px#9bc1e7;-webkit-box-shadow:0 0 5px #9bc1e7;-o-box-shadow:0 0 5px #9bc1e7;} /*列表框的阴影样式*/.greenshadow{box-shadow:0 0 5px #6cb133;-moz-box-shadow:0 0 5px#6cb133;-webkit-box-shadow:0 0 5px #6cb133;-o-box-shadow:0 0 5px #6cb133;} /*列表框的阴影样式*/.greyshadow{box-shadow:0 0 5px #b9b9b9;-moz-box-shadow:0 0 5px#b9b9b9;-webkit-box-shadow:0 0 5px #b9b9b9;-o-box-shadow:0 0 5px #b9b9b9;} /*列表框的阴影样式*/.orangeshadow{box-shadow:0 0 5px #fea912;-moz-box-shadow:0 0 5px#fea912;-webkit-box-shadow:0 0 5px #fea912;-o-box-shadow:0 0 5px #fea912;} /*列表框的阴影样式*/.purpleshadow{box-shadow:0 0 5px #be91ce;-moz-box-shadow:0 0 5px#be91ce;-webkit-box-shadow:0 0 5px #be91ce;-o-box-shadow:0 0 5px #be91ce;} /*列表框的阴影样式*//*=====border style=====*/.borderblue{border:1px solid #9bc1e7;}.bordergreen{border:1px solid #6cb133;}.bordergrey{border:1px solid #b9b9b9;}.borderorange{border:1px solid #fea912;}.borderpurple{border:1px solid #be91ce;}/*=====header3 style=====*/.blueheader{background:-moz-linear-gradient(top, #dfefff 0, #c1e0fe 100%);background:-webkit-gradient(linear, 0 0, 0 100%, from(#dfefff),to(#c1e0fe));background:-o-linear-gradient(top, #dfefff 0, #c1e0fe100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfefff', endColorstr='#c1e0fe', GradientType="0");background:linear-gradient(top, #dfefff 0%, #c1e0fe 100%);border-bottom:1px solid #9bc1e7;}.greenheader{background:-moz-linear-gradient(top, #e6f7cb 0, #c6e5ac 100%);background:-webkit-gradient(linear, 0 0, 0 100%, from(#e6f7cb),to(#c6e5ac));background:-o-linear-gradient(top, #e6f7cb 0, #c6e5ac100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6f7cb', endColorstr='#c6e5ac', GradientType="0");background:linear-gradient(top, #e6f7cb 0%, #c6e5ac 100%);border-bottom:1px solid #6cb133;}.greyheader{background:-moz-linear-gradient(top, #fafafa 0, #e9e9e9 100%);background:-webkit-gradient(linear, 0 0, 0 100%, from(#fafafa),to(#e9e9e9));background:-o-linear-gradient(top, #fafafa 0, #e9e9e9100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#e9e9e9', GradientType="0");background:linear-gradient(top, #fafafa 0%, #e9e9e9 100%);border-bottom:1px solid #b9b9b9;}.orangeheader{background:-moz-linear-gradient(top, #fef2d8 0, #fee7b2 100%);background:-webkit-gradient(linear, 0 0, 0 100%, from(#fef2d8),to(#fee7b2));background:-o-linear-gradient(top, #fef2d8 0, #fee7b2100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fef2d8',endColorstr='#fee7b2', GradientType="0");background:linear-gradient(top, #fef2d8 0%, #fee7b2 100%);border-bottom:1px solid #fea912;}.purpleheader{background:-moz-linear-gradient(top, #f7e8ff 0, #ebd6f8 100%);background:-webkit-gradient(linear, 0 0, 0 100%, from(#f7e8ff),to(#ebd6f8));background:-o-linear-gradient(top, #f7e8ff 0, #ebd6f8100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7e8ff', endColorstr='#ebd6f8', GradientType="0");background:linear-gradient(top, #f7e8ff 0%, #ebd6f8 100%);border-bottom:1px solid #be91ce;}/*=====list style=====*/.bluelist{background:#f2f9ff;}.bluelist li{border-bottom:1px dotted #9dbde6;}.greenlist{background:#f0fadf;}.greenlist li{border-bottom:1px dotted #6cbb2e;}.greylist{background:#f5f5f5;}.greylist li{border-bottom:1px dotted #bababa;}.orangelist{background:#fff9ed;}.orangelist li{border-bottom:1px dotted #ffa813;}.purplelist{background:#fcf4ff;}.purplelist li{border-bottom:1px dotted #c290cf;}li:nth-child(2){background:#fff;}/*=====url=====*/p{line-height:20px;text-align:center;font-size:12px;}p a{color:#5e9ede;text-decoration:none;} </style></head><body><div class="box blueshadow borderblue"> <h3 class="blueheader">项目标题栏</h3><ul class="bluelist"><li>列表一</li><li>列表一</li><li>列表一</li></ul></div><div class="box greenshadow bordergreen"> <h3 class="greenheader">项目标题栏</h3> <ul class="greenlist"><li>列表一</li><li>列表一</li><li>列表一</li></ul></div><div class="box greyshadow bordergrey"> <h3 class="greyheader">项目标题栏</h3><ul class="greylist"><li>列表一</li><li>列表一</li><li>列表一</li></ul></div><div class="box orangeshadow borderorange"> <h3 class="orangeheader">项目标题栏</h3><ul class="orangelist"><li>列表一</li><li>列表一</li><li>列表一</li></ul></div><div class="box purpleshadow borderpurple"> <h3 class="purpleheader">项目标题栏</h3><ul class="purplelist"><li>列表一</li><li>列表一</li><li>列表一</li></ul></div></body></html>补充：CSS3的 Radius 圆角语法：取值：<length>：由浮点数字和单位标识符组成的长度值。

CSS实现圆角的三种方法

CSS实现圆角的三种方法方法一：border-radius属性border-radius属性是CSS3引入的新属性，可以用来设置元素的圆角效果。

通过设置border-radius属性，可以将元素的边框角变为圆角。

border-radius属性的语法如下：border-radius: <length>，<percentage>，[<length>，<percentage>]{1,4}[/ <length>，<percentage>]{0,2}其中，<length>表示长度值，可以是数值或使用像素、百分比等单位。

<percentage>表示百分比值。

方括号表示可选项，花括号中的数字表示可重复的次数。

斜杠后的部分表示可选的内切椭圆半径。

例如，要给一个元素设置4个角的圆角效果，可以使用以下代码：```cssborder-radius: 10px;```此代码将元素的4个角都设置为10像素的圆角。

方法二：border-image属性border-image属性也是CSS3引入的新属性，用于将图片应用到元素的边框上，同时也可以实现圆角效果。

border-image属性的语法如下：border-image: <source>，<slice>[<width>，<outset>]?[<repeat>]?，inherit其中，<source>表示图片的路径。

<slice>表示图片的裁剪区域。

<width>表示图片的宽度。

<outset>表示边框图像区域超出边框的距离。

<repeat>表示是否重复显示边框图像。

例如，要给一个元素设置圆角效果并使用图片作为边框，可以使用以下代码：```cssborder-image: url(border.png) 30 round;```此代码将会把border.png这张图片应用到元素的边框上，并且设置一个30像素的裁剪区域，使得图片能够以圆角形式显示。

CSS3新属性兼容性测试

CSS3新属性兼容性测试css⼀些新属性得兼容性测试以及IE低版本浏览器怎么兼容得⼀些写法(⼀些⽤法得具体⽅法，不做具体说明)记录下来，⽅便⾃⼰以后使⽤和查看1. border-radius:50%;（圆⾓） border-shadow:10px 10px 5px #000;（阴影）⾕歌，⽕狐，ie9,兼容，ie8以下不兼容，百度下ie-css3.htc，有详细兼容IE低版本得⽅法2.background-size:100% 100%；cover 等⽐缩放到完全覆盖容器，但有时会超出容器contain等⽐缩放到宽度或⾼度与容器的宽度或⾼度相等，不会超出容器auto 背景图原本⼤⼩⾕歌，⽕狐，ie9,兼容，ie8以下不兼容，引⼊backgroundsize.min.htc兼容⽂件兼容IE83.text-shadow:3px 3px 5px red;⾕歌，⽕狐，ie10兼容4.transtion:all 1s linear 1s; (全部，动画时间动画⽅式动画何时开始执⾏)⾕歌，⽕狐，IE10兼容 IE9不兼容兼容低版本，⽕狐，Safari，⾕歌得⽅法(IE9⼀下不知道怎么解决)-moz-transition:all 1s linear 1s;-web-transition:all 1s linear 1s;-o-transition: all 1s linear 1s;5.animation:first 2s linear;@keyframes first { 0% { right: -116px; } 20% { right: 300px; } 40% { top: 100px; right: 100px } 60% { top: 200px; right: 300px } 100% { top: 0; right: 300px }}⾕歌，⽕狐，IE10兼容 IE9不兼容兼容低版本，⽕狐，Safari，⾕歌得⽅法(IE9⼀下不知道怎么解决)和tranition兼容写法⼀样6.transform:rotate scale (旋转，缩放，)倾斜，变形等⾕歌，⽕狐，IE9+。

CSS实现圆角边框代码兼容IE、火狐

CSS实现圆角边框代码兼容IE、火狐圆角边框可以用图片实现，也可以用CSS实现。

如果用图片做的话，就画好圆角然后设置成背景图片。

用CSS不需要图片，直接用代码定义颜色。

用图片的话，会影响网页打开速度，当然如果图片不大，影响也并不明显。

用CSS不会影响网页打开速度，但是实现方法略麻烦，要写不少代码。

不好讲哪个更好哪个更差，用到各自适合的地方就行了。

这里介绍两种不用图片，直接用CSS实现圆角边框的方法。

两种CSS方法原理类似，都是在一个层上加二个或更多层，不过这些层只有左右边线，上边线和下边线有背景色，都有一定的长度差距差，从而呈现出圆角边框的效果。

方法一：CSS样式定义，放在网页前部。

绿色字是注释，红色字是可自行更改的颜色编码。

让IE6、IE7、IE8支持CSS3的圆角、阴影样式

让IE6、IE7、IE8支持CSS3的圆角、阴影样式想做个页面用到css3的圆角和阴影效果，但ie浏览器不支持，之前也听说有插件可以实现，周六在网上找到了一个方法，原文如下：但凡是前端工程师，都知道IE6，IE7，IE8不支持、或者不完全支持CSS3的属性。

CSS3 有很多很强大、绚丽的效果，比如，圆角，阴影，渐变透明，渐变背景，等等。

因为IE6时代，没有什么标准，而因为各种原因，IE6用户几乎不会更新IE版本。

让IE6，IE7，IE8支持CSS3效果，有一个思路就是利用 VML 模拟。

VML是The Vector Markup Language(矢量可标记语言)，原本是微软自己开发的东西，很强大。

也就是说，IE下面，可以用 VML做出圆角。

半透明、阴影、渐变背景。

早在去年的时候，就有老外这个思路写成了插件，方便前端程序员开发。

它可以让IE6，IE7，IE8 支持 CSS3特效……之前的 bug 一直有一个严重 bug，今天上去看的时候，官方修正了这个Bug ，并且增加了js 渲染方法（之前是用behavior导入）。

看看如何调用：1、在你的网页加载 PIE.js 脚本。

注意，用IE专用的注释，防止非IE浏览器下载。

2、用js 调用：$(function() {if (window.PIE) {$('.rounded').each(function() {PIE.attach(this);});}});3、已经搞定了。

在让 IE6支持 CSS3 的所有插件中，这个应该是最好的插件了。

官方实时测试例子：/官方下载：/download-latest测试了半天也不行，谁知太大意了，忽略了两点，一是在本地预览无效，得传到服务器环境下，或者本地服务器环境，二是在css里忘记加behavior: url(pie.htc);造成的。

如何让CSS3圆角兼容所有浏览器

如何让CSS3圆角兼容所有浏览器译序：本文提到了一种很不错的实现跨浏览器圆角的解决方案，但是说的不够全面，前端观察最近将整理更多更全面的资源给大家，敬请期待。

前一段时间，我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题。

你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持，但是由于某些原因IE并不支持它。

那么要想在IE中实现圆角，你不得不使用一些技巧，比如使用带有背景图片的CSS类。

而我知道的在各个浏览器中实现圆角的较简单快速的方案是结合CSS3和JavaScript。

CurvyCorners是一个为HTML元素创建漂亮的圆角的免费JavaScript库。

效果如下：该脚本的最大优势是可以在Safari/Chrome/Firefox中使用原生的CSS3属性(通过-webkit-border-radius和-moz-border-radius私有属性分别支持)而在IE和Opera中使用JavaScript。

你所需要做的就是在页面中引入curvycorners.js:<script type="text/javascript"src="curvycorners.js"></script>然后定义以下样式：.roundedCorners{width:220px;padding:10px;background-color:#DDEEF6;border:1px solid#DDEEF6;/* Do rounding (native in Safari, Firefox and Chrome) */-webkit-border-radius:6px;-moz-border-radius:6px;}然后在上面的样式后面定义以下代码：<script type="text/JavaScript">addEvent(window,'load', initCorners);function initCorners(){var setting ={tl:{ radius:6},tr:{ radius:6},bl:{ radius:6},br:{ radius:6},antiAlias:true}curvyCorners(setting,".roundedCorners");}</script>tl, tr, bl, br分别是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)。

CSS3圆角支持IE火狐

让IE支持CSS3圆角的方法附：ccs代码<style type="text/css">.test {width:560px;height:400px;background-color: blue;padding:10px 8px 6px;border: 2px solid #C0C0C0;margin-bottom:10px;border-radius: 10px;behavior: url(ie-css3.htc);color: #FFF;}</style>如果要想在IE浏览器中实现圆角的效果，我们一般都会采用圆角图片的方式。

用图片的话，基本就跟浏览器没有多大关系了，因为任何浏览器都支持这种方式。

本文我们主要是讲解如果用CSS 3样式表来实现圆角效果，值得注意的是，IE6/7/8这三个IE浏览器版本都不支持CSS 3的解析，只有还不太主流的IE 9支持CSS 3和HTML 5的标准。

让IE支持CSS 3的解析方法有很多种，下面介绍一种实用的让IE支持CSS 3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角：1、下载一个压缩包，里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件：iecss3.rar;.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。

它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。

Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能。

下载地址：/wp-content/uploads/2010/12/iecss3.rar解压后，打开test.html，如果显示效果是圆角，则可以继续。

使用演示：.main{1.border: 2px solid #C0C0C0;2.-moz-border-radius: 10px;3. -webkit-border-radius: 10px;4. border-radius: 10px;5. position:relative;6. z-index:2;7. behavior: url(ie-css3.htc);8. }Webkit内核的浏览器支持“-webkit-border-radius: 10px;”属性(10px是圆角半径)，可以直接解析出圆角;Firefox浏览器支持“-moz-border-radius: 10px;”属性，也是可以直接解析出圆角;IE系浏览器则需要加上“border-radius: 15px;”的属性。

css：css3（圆角边框、盒子阴影、文字阴影）

css：css3（圆⾓边框、盒⼦阴影、⽂字阴影）1、圆⾓边框定义圆⾓边框后，可以将盒⼦定义为圆⾓的（1）长度⽅式<html><head><meta charset="utf-8"><title>盒⼦模型外边距</title><style>div{width: 200px;height: 100px;background-color: yellowgreen;border-radius:3px;}</style></head><body><div></div></body></html>设置成⾼度的⼀半：<html><head><meta charset="utf-8"><title></title><style>div{width: 200px;height: 100px;background-color: yellowgreen;border-radius:50px;}</style></head><body><div></div></body></html>（2）百分⽐⽅式圆形：长度为正⽅形的⼀半：<html><head><meta charset="utf-8"><title>盒⼦模型外边距</title><style>div{width: 200px;height: 200px;background-color: yellowgreen;border-radius:50%;</style></head><body><div></div></body></html>百分⽐⽅式定义盒⼦：<html><head><meta charset="utf-8"><title></title><style>div{width: 200px;height: 100px;background-color: yellowgreen;border-radius:5%;}</style></head><body><div></div></body></html>（3）不同的⾓设置不同的圆⾓以左上⾓为起点，顺时针的⽅式<html><head><meta charset="utf-8"><title></title><style>div{width: 200px;height: 200px;background-color: yellowgreen;border-radius:10px 20px 30px 40px; }</style></head><body><div></div></html>（4）选择⾓去设置：<html><head><meta charset="utf-8"><title></title><style>div{width: 200px;height: 200px;background-color: yellowgreen;border-bottom-right-radius: 16px;}</style></head><body><div></div></body></html>2、盒⼦阴影（1）前两个为必选项，后四个可写可不写<html><head><meta charset="utf-8"><title></title><style>div{width: 200px;height: 200px;background-color: yellowgreen;border-radius: 16px;box-shadow:10px 10px 10px 10px rgba(0,0,0,0.3); }</style></head><body><div></div></body></html>（2）只写前两个属性：<html><head><meta charset="utf-8"><title></title><style>div{width: 200px;height: 200px;background-color: yellowgreen;border-radius: 16px;box-shadow:10px 10px;}</style></head><body><div></div></body></html>3、⽂字阴影<html><head><meta charset="utf-8"><title></title><style>div{width: 200px;height: 200px;text-shadow: 5px 5px 6px rgba(0,0,0,0.3); }</style></head><body><div>⼈之初，性本善</div></body></html>。

纯css实现的质感圆角按钮（转）

纯css实现的质感圆⾓按钮（转）1、display:inline-block; 这个属性IE8和firefox3.0已经⽀持，IE6和IE7不⽀持，解决⽅法是*display:inline; zoom:1;原因如下：使得display:inline;使得IE下元素变成内联元素，然后使⽤zoom:1;触发块元素的layout（我理解为可布局——对⾼度宽度敏感），这⾥有篇⽂章对layout有不错的解释：。

可以看看，英⽂原⽂。

有时间我也会讲讲⾃⼰对layout这个概念的理解的。

2、class为“c”和“d”中的样式中⽤line-height，⽽没有使⽤⾼度原因在于使⽤height会使得IE下的元素获得layout，结果IE6与IE7下class为“c”的DIV宽度会延伸⾄100%；宽度满屏。

3、class为“b”的样式中position:relative;解决IE6下负的margin部分不可见的问题。

_float:left;开始使⽤的是float：left，但是IE7下左-1px的⼤⼩没有起作⽤。

⽆左浮动，IE6下由于⾼度原因，使IE6获得layout，结果宽度满屏延伸。

于是就⽤了个针对IE6的hack。

再想想办法，应该可以找到⽆hack的⽅法。

最后，我根据⾃⼰的理解⼜写了其他两个⽅法实现渐变背景，宽度⾃适应且圆⾓的按钮，且没有任何hack，兼容主流浏览器。

唯⼀的缺点不能与⽂字图⽚等内联元素混排，因为最外DIV使⽤浮动。

⽅法⼀：纯css实现的质感圆⾓按钮<title>纯css实现的质感圆⾓按钮</title><style type="text/css">body{font-size:12px;}.a{display:inline-block; border-width:1px 0; border-color:#bbbbbb; border-style:solid; vertical-align:middle; *display:inline; zoom:1;}.b{height:22px; border-width:0 1px; border-color:#bbbbbb; border-style:solid; margin:0 -1px; background:#e3e3e3; position:relative;_float:left;}.c{line-height:10px; background:#f9f9f9; border-bottom:2px solid #eeeeee;}.d{padding:0 8px; line-height:22px; color:#000000; margin-top:-12px; cursor:pointer;}</style><body><div class="a"><div class="b"><div class="c"> </div><div class="d">css圆⾓按钮</div></div></div> <div class="a"><div class="b"><div class="c"> </div><div class="d">css圆⾓按钮2</div></div></div></body>⽅法⼆：稍微繁琐点的<title>纯css实现的质感圆⾓按钮</title><style type="text/css">.a{float:left; border-width:1px 0; border-color:#bbbbbb; border-style:solid;}.b{height:22px; border-width:0 1px; border-color:#bbbbbb; border-style:solid; margin:0 -1px; background:#e3e3e3; position:relative; float:left;}.c{height:10px; padding:0 8px; font-size:12px; overflow:hidden; background:#f9f9f9; border-bottom:2px solid #eeeeee; margin-bottom:-12px; float:left;}.d{padding:0 8px; line-height:22px; font-size:12px; color:#000000; clear:both; cursor:pointer; position:relative;}.c span{visibility:hidden;}</style><body><div class="a"><div class="b"><div class="c"><span>css圆⾓按钮</span></div><div class="d">css圆⾓按钮</div></div></div></body>图：已通过兼容性测试，不上多图了针对性说明：1、要想实现⾃适应，在IE下，如果定⾼，就要设置浮动属性，否则元素宽度满屏显⽰，从class为“b”和“c”的两个样式可以看到。

利用CSS3实现圆角的outline效果的教程

利用CSS3实现圆角的outline效果的教程
一、首先，outline是个很牛的东西
1. border近亲
outline和border是近亲，为什么这么讲呢？首先，都是给元素外面套框框的；第二，支持的属性值几乎都是一样的，例如，outline-style 和border-style值dotted, dashed, solid, ...之类的，一些语法也几乎一样。

假如这都不算近亲，你让肯定定位和浮动何言以对。

2. IE8+支持
outline严格来讲属于CSS3属性，但是IE8+扫瞄器就支持了。

外挂一句，IE9+扫瞄器的outline还支持invert，特地针对outline-color. 所以，假如你的项目不用管IE6/IE7扫瞄器，可以把outline挂在心中，有时候说不定会帮忙。

3. 不占领空间
默认的盒模型下，假设元素100*100像素，我们给元素设置
border:10px solid，则实际该元素占领的尺寸起码就是120*120像素，元素的偏移、布局啊什么的，就需要多多思考。

但是，outline不一样，你哪怕outline:100px solid，元素占领的尺寸还是100*100像素。

这种行为表现，与transform以及box-shadow等CSS3属性很类似，虽然形状丰满了，但是，占领的真切空间没有影响。

于是，我们在实现一些交互效果的时候，例如hover变幻，我们就可以专注于效果本身，而不用被布局所左右，是很棒的体验。

4. 直角！圆角？
正巧承上启下一下。

二、outline的直角与圆角
第1页共6页。

我所碰到的面试题之------前端常见浏览器兼容性问题解决方案---

我所碰到的⾯试题之------前端常见浏览器兼容性问题解决⽅案---不同浏览器的内核也不尽相同，所以各个浏览器对⽹页的解析存在⼀定的差异。

浏览器内核主要分为两种，⼀是渲染引擎，另⼀个是js 引擎，内核更加倾向于说渲染引擎。

常见的浏览器内核：不同浏览器的默认样式存在差异，可以使⽤Normalize.css抹平这些差异。

1.不同浏览器的标签默认的margin和padding不同问题症状：随便写⼏个标签，不加样式控制的情况下，各⾃的margin 和padding差异较⼤。

碰到频率:100%解决⽅案：CSS⾥ *{margin:0;padding:0;}备注：这个是最常见的也是最易解决的⼀个浏览器兼容性问题，⼏乎所有的CSS⽂件开头都会⽤通配符*来设置各个标签的内外补丁是0。

2.块属性标签float后，⼜有横⾏的margin情况下，在IE6显⽰margin⽐设置的⼤问题症状:常见症状是IE6中后⾯的⼀块被顶到下⼀⾏碰到频率：90%（稍微复杂点的页⾯都会碰到，float布局最常见的浏览器兼容问题）解决⽅案：在float的标签样式控制中加⼊ display:inline;将其转化为⾏内属性备注：我们最常⽤的就是div+CSS布局了，⽽div就是⼀个典型的块属性标签，横向布局的时候我们通常都是⽤div float实现的，横向的间距设置如果⽤margin实现，这就是⼀个必然会碰到的兼容性问题。

3.设置较⼩⾼度标签（⼀般⼩于10px），在IE6，IE7，遨游中⾼度超出⾃⼰设置⾼度问题症状：IE6、7和遨游⾥这个标签的⾼度不受控制，超出⾃⼰设置的⾼度碰到频率：60%解决⽅案：给超出⾼度的标签设置overflow:hidden;或者设置⾏⾼line-height ⼩于你设置的⾼度。

备注：这种情况⼀般出现在我们设置⼩圆⾓背景的标签⾥。

出现这个问题的原因是IE8之前的浏览器都会给标签⼀个最⼩默认的⾏⾼的⾼度。

即使你的标签是空的，这个标签的⾼度还是会达到默认的⾏⾼。

CSS实现圆角，圆角阴影

CSS实现圆⾓，圆⾓阴影<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.hint{width: 200px;height: 80px;box-shadow: 0 1px 1px 1px #ccc;display: none;vertical-align: top;position: relative;box-sizing: border-box;margin-left: 25px;background-color: white;text-align: center;text-indent: 2em;line-height: 20px;}.hint::after{content: " ";position: absolute;left: -10px;top: 10px;width: 0px;height: 0px;border-style: solid;border-width: 10px;border-color: white white transparent transparent;transform: rotate(-135deg);box-shadow: 1px -1px 1px #ccc;}</style></head><body><label for="">user</label><input type="text" onfocus="show()" onblur="document.getElementsByClassName('hint')[0].style.display='none';"> <div class="hint">请输⼊指定的数值</div><script>function show(){document.getElementsByClassName('hint')[0].style.display='inline-block';}</script></body></html>。

课题_让IE6IE7IE8浏览器支持CSS3属性-特效

让IE6/IE7/IE8浏览器支持CSS3属性-特效一、“渐进增强”简述“渐进增强”是对”Progressive Enhancement”一词的译文，我觉得翻译的很是得体。

所谓“渐进增强”，有点农村包围城市的味道。

打个不太恰当的比方，就是要先解决广大劳苦大众的温饱问题（即“渐进”），再这个基础上尽量的往小康方向发展（谓“增强”），至于是否要所有的人都过着小康水平，则不强求，当然越多小康家庭越好，没有也无妨，反正温饱不成问题，至少不会饿死。

就目前而言，虽对“渐进增强”有所了解的人挺多，但是要说普及与深入人生还远远不到火候。

再举个不恰当的比方，现在就页面重构而言，占据主流的还是“大锅饭”思想，即人人平等，人人相等，也就是以各个浏览器下表现一致为准则。

这本身没有什么问题，大家都有饭吃，但是，显而易见，这会让领先的浏览器（Firefox、chrome等）优势无法显现出来。

CSS的“渐进增强”有别于CSS hack，hack可以说是提供选择，你死我亡，竞争效应；而“渐进增强”属于更进一步，锦上添花，辅助效应。

前者应尽量避免使用，而后者适当使用则有裨益。

就CSS而言，“渐进增强”的对象是一些现代浏览器，“渐进增强”的一些属性主要是CSS3的一些特性，或是IE6这类歪瓜裂枣不支持的一些属性，或是其他一些特殊情况。

本文就将举一些简单的，常见的“渐进增强”的应用，您会发现，适当使用“渐进增强”还是很不错滴。

二、“渐进增强”之CSS3 text-shadow文字阴影属性就目前而言，大多数的页面都是无投影文字，这是必须的。

白底黑字，如果再有投影效果，一旦字多了，很容易造成视觉疲劳和审美疲劳，所以，平白朴实的文字效果反而是最受用的。

但是，在有些地方，适当的添加一些投影效果，会有意想不到的效果。

例如我的demo模板页面的标题，在IE等不支持CSS3 text-shadow属性的浏览器下就是下面这个样子：可以说，上面的标题文字很OK，颜色，字体，对比度而言，都没有问题，可以说，这种效果已经很OK了。

html5css3常考面试题

html5css3常考⾯试题⼀、HTML5 CSS31. CSS3有哪些新特性？1. CSS3实现圆⾓（border-radius），阴影（box-shadow），2. 对⽂字加特效（text-shadow、），线性渐变（gradient），旋转（transform）3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜4. 增加了更多的CSS选择器多背景 rgba5. 在CSS3中唯⼀引⼊的伪元素是 ::selection.6. 媒体查询，多栏布局7. border-image1. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？新特性：1. 拖拽释放(Drag and drop) API2. 语义化更好的内容标签（header,nav,footer,aside,article,section）3. ⾳频、视频API(audio,video)4. 画布(Canvas) API5. 地理(Geolocation) API6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；7. sessionStorage 的数据在浏览器关闭后⾃动删除8. 表单控件，calendar、date、time、email、url、search9. 新的技术webworker, websocket, Geolocation移除的元素：1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；2. 对可⽤性产⽣负⾯影响的元素：frame，frameset，noframes；⽀持HTML5新标签：1. IE8/IE7/IE6⽀持通过 document.createElement ⽅法产⽣的标签，可以利⽤这⼀特性让这些浏览器⽀持 HTML5 新标签，浏览器⽀持新标签后，还需要添加标签默认的样式（当然最好的⽅式是直接使⽤成熟的框架、使⽤最多的是html5shim框架）：如何区分：DOCTYPE声明新增的结构元素、功能元素1. 本地存储（Local Storage ）和cookies（储存在⽤户本地终端上的数据）之间的区别是什么？Cookies:服务器和客户端都可以访问；⼤⼩只有4KB左右；有有效期，过期后将会删除；本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留知道⽤户从浏览器清除或者使⽤Javascript代码移除1. 如何实现浏览器内多个标签页之间的通信?调⽤ localstorge、cookies 等本地存储⽅式1. 你如何对⽹站的⽂件和资源进⾏优化？⽂件合并⽂件最⼩化/⽂件压缩使⽤CDN托管缓存的使⽤1. 什么是响应式设计？它是关于⽹页制作的过程中让不同的设备有不同的尺⼨和不同的功能。

CSS实现圆角边框,不在使用背景图片,IE678、火狐都兼容

CSS实现圆角边框第一种：有背景颜色的圆角框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS实现圆角边框，IE、火狐都兼容</title><style type="text/css">div.RoundedCorner { background: #9BD1FA; width:250px;}b.rtop, b.rbottom { display:block; background: #FFF;}b.rbottom b { display:block; height: 1px; overflow: hidden; background: #9BD1FA;}b.rtop b { display:block; height: 1px; overflow: hidden; background:#06f;}b.r1 {margin: 0 5px;}b.r2 {margin: 0 3px;}b.r3 {margin: 0 2px;}b.rtop b.r4, b.rbottom b.r4 {margin: 0 1px; height: 2px;}.box1{ height:140px; font-size:16px; font-weight:bold;}.box1 ul{ background:#06F; list-style:none; margin:0px; line-height:25px; text-align:center; }.box2{ font-size:15px; font-weight:normal; text-align:center; }</style></head><body><div class="RoundedCorner"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><div class="box1"><ul><li>◆◆联系我们◆◆</li></ul><div class="box2"></div></div><b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></body></html>IE6IE7IE8火狐第二种：没有背景颜色的圆角框<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB2312" /><title>ie，火狐都兼容的圆角框</title><style type="text/css">#nav .xmain {height:130px;border-left:1px solid silver;border-right:1px solid silver;}#nav { margin:1em; width:250px;}.xtop, .xbottom {display:block; background:transparent; font-size:1px;}.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}.xb1, .xb2, .xb3 {height:1px;}.xb2, .xb3, .xb4 {border-left:1px solid silver; border-right:1px solid silver;}.xb1 {margin:0 5px; background:silver;}.xb2 {margin:0 3px; border-width:0 2px;}.xb3 {margin:0 2px;}.xb4 {height:2px; margin:0 1px;}.ul{border-bottom:1px solid silver; list-style:none; margin:0px; line-height:25px; text-align:center;}</style></head><body><div id="nav"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b><div class="xmain"><ul class="ul">◆◆联系我们◆◆</ul></div><b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></div></body></html>IE6IE7IE8火狐第二种方法出来的样式很不协调，大家可以把头部制成背景图片，图片做出来并不大，可以很美观的显示，我是业余，做着玩玩，嘻嘻……。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

让IE6、IE7、IE8支持CSS3的圆角、阴影样式
想做个页面用到css3的圆角和阴影效果，但ie浏览器不支持，之前也听说有插件可以实现，周六在网上找到了一个方法，原文如下：
但凡是前端工程师，都知道IE6，IE7，IE8不支持、或者不完全支持CSS3的属性。

CSS3 有很多很强大、绚丽的效果，比如，圆角，阴影，渐变透明，渐变背景，等等。

因为IE6时代，没有什么标准，而因为各种原因，IE6用户几乎不会更新IE版本。

让IE6，IE7，IE8支持CSS3效果，有一个思路就是利用 VML 模拟。

VML是The Vector Markup Language(矢量可标记语言)，原本是微软自己开发的东西，很强大。

也就是说，IE下面，可以用 VML做出圆角。

半透明、阴影、渐变背景。

早在去年的时候，就有老外这个思路写成了插件，方便前端程序员开发。

它可以让IE6，IE7，IE8 支持 CSS3特效……
之前的 bug 一直有一个严重 bug，今天上去看的时候，官方修正了这个Bug ，并且增加了js 渲染方法（之前是用behavior导入）。

看看如何调用：
1、在你的网页加载 PIE.js 脚本。

注意，用IE专用的注释，防止非IE浏览器下载。

2、用js 调用：
$(function() {
if (window.PIE) {
$('.rounded').each(function() {
PIE.attach(this);
});
}
});
3、已经搞定了。

在让 IE6支持 CSS3 的所有插件中，这个应该是最好的插件了。

官方实时测试例子：/
官方下载：/download-latest
测试了半天也不行，谁知太大意了，忽略了两点，一是在本地预览无效，得传到服务器环境下，或者本地服务器环境，二是在css里忘记加behavior: url(pie.htc);造成的。

今天终于测试可用了，但新的问题又来了，我用的是自适应宽度，加上后会出现横向滚动条，去掉就好了，其他情况下正常，而且对文字阴影好像没有效果，不知道大家遇到这样的问题没有，如想使用的朋友可以试试吧，附本人制作的实例（下载的插件包中包含PIE.js和PIE.htc）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css圆角阴影</title>

<script language="javascript">
$(function() {
if (window.PIE) {
$('.rounded').each(function() {
PIE.attach(this);
});
}
});
</script>
<style>
#nav { height:82px; width:200px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#FC3;-moz-box-shadow:0px 4px 5px #9C9C9C; -webkit-box-shadow:0px 4px 5px #9C9C9C; box-shadow:0px 4px 5px #9C9C9C;
behavior: url(pie.htc);}
</style>
</head>
<body>
<div id="nav">在本地测试不出效果，需上传到服务器</div>
</body>
</html>
最终效果如图：
另外附一个快速生成css3属性的小工具，收藏吧，对你有用的：
/tool/css3Preview/Box-Shadow.ht ml
文章出处：标准之路(/css_example/947.shtml)。