<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />

＜meta name="author" content"郭菊锋,702004176@qq.com"＞
<title>border-radius的兼容写法大全</title>
<style>
.image{
-webkit-border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch;
-moz-border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch;
-o-border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch;
border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch;
/*border-image: url(图片地址链接) slice/width outset repeat;*/
}
/*slice：边距数值：如果四个一样，就设置一个即可；如果四个不一样，就得设置四个，分别对应上右下左*/
/*width：必须与slice之间有一个/号，然后同slice一样，设置一个值也可，四个也可但要分别对应*/
/*outset（有两个值跟在width之后，可以都设置为repeat repeat一样，【这样的话就是也可以只设置一个值】也可以上下repeat左右stretch不一样。）{*/
/*topbottom（上下）{repeat(上下平铺);stretch(上下拉伸),round()}*/
/*leftright（左右）{repeat(左右平铺);stretch(左右拉伸),round()}*/
/*stretch:默认值*/
/*round:将图像平铺显示，但是如果最后一幅图不能装下，会空出位置出来把能装下的背景图进行拉伸已达到铺满背景的效果 是repeat和stretch的结合.
}*/
div.radius{
width:600px;
height: 750px;
padding: 30px;
background-color: rgba(94, 70, 132, 0.87);
color: #fff;
font: 20px "微软雅黑";
-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 23px;
-moz-border-radius-bottomright: 34px;
-moz-border-radius-bottomleft: 45px;
-o-border-radius-topleft:12px;
-o-border-radius-topright:23px;
-o-border-radius-bottomright:34px;
-o-border-radius-bottomleft:45px;
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 23px;
-webkit-border-bottom-right-radius: 34px;
-webkit-border-bottom-left-radius: 45px;
border-top-left-radius: 12px;
border-top-right-radius: 23px;
border-bottom-right-radius: 34px;
border-bottom-left-radius: 45px;

}
</style>
</head>
<body>
<div class="image">用图片来做边框<br />border-image:url( ) 数值/宽度px stretch;</div>
<h1>绘制四个不同的圆角边框的写法以及不同的兼容性的写法大集合</h1>
<div class="radius">
<ul>
<li>顺序就是逆时针转圈</li>
<li></li>
<li>border-radius-topleft:12px;</li>
<li>border-radius-topright:23px;</li>
<li>border-radius-bottomright:34px;</li>
<li>border-radius-bottomleft:45px;</li>
<li></li>
<li>或者上面这个写法是错了，虽然书上这么讲，但是软件不这么提示。软件提示正确（在软件中更没有错误符号）如下</li>
<li></li>
<li>border-top-left-radiu:12px;</li>
<li>border-top-right-radius:23px;</li>
<li>border-bottom-right-radius:34px;</li>
<li>border-bottom-left-radius:45px;</li>
<li></li>
<li>-moz-border-radius-topleft:12px;</li>
<li>-moz-border-radius-topright:23px;</li>
<li>-moz-border-radius-bottomright:34px;</li>
<li>-moz-border-radius-bottomleft:45px;</li>
<li></li>
<li>-o-border-radius-topleft:12px;</li>
<li>-o-border-radius-topright:23px;</li>
<li>-o-border-radius-bottomright:34px;</li>
<li>-o-border-radius-bottomleft:45px;</li>
<li></li>
<li>-webkit-border-top-left-radius:12px;</li>
<li>-webkit-border-top-right-radius:23px;</li>
<li>-webkit-border-bottom-right-radius:45px;</li>
<li>-webkit-border-bottom-left-radius:34px;</li>
</ul>

</div>

<p>20160810 00:40-xing.org1^</P>
</body>
</html>

CSS3-border-radius的兼容写法大全的更多相关文章

  1. css3部分属性兼容性别扭写法（因为很多我就叫他别扭了，希望全面早早支持css3吧）

    /*圆角class,需要设置圆角的元素加上class名称*/ .roundedCorners{ -webkit-border-radius: 10px;/*webkit内核浏览器*/ -moz-bor ...

  2. CSS兼容问题大全

    1.chorme 最小字体的兼容性. 问题描述:ff和IE最小字体可设置为1px,可是chorme中文版最小字体是12px,小于12px的字体全部显示为12px.解决方案:chorme支持CSS3的, ...

  3. javascript阻止事件冒泡的兼容写法及其相关示例

    //阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...

  4. IE浏览器兼容问题(上)——html和css的兼容写法

    用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...

  5. css 背景色渐变兼容写法

    最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x.下面我将介绍如何用 css 来完成该效果. css3 ...

  6. 【css】css 背景色渐变兼容写法

    最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x.下面我将介绍如何用 css 来完成该效果. css3 ...

  7. background-size： contain 与cover的区别，以及ie78的兼容写法

    一:background-size: contain 与cover的区别: 作用: 都是将图片以**相同宽高比**缩放以适应整个容器的宽高. 不同之处在于: 1.  在no-repeat情况下,如果容 ...

  8. （转）css 背景色渐变兼容写法

    css3:linear-gradient 比如:黑色渐变到白色,代码如下: .gradient{ background: -moz-linear-gradient(top, #000000 0%, # ...

  9. JavaScript中的数组遍历forEach()与map()方法以及兼容写法

    原理: 高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是 ...

随机推荐

  1. android之广播(二)

    广播接受者不仅可以通过清单文件来向系统注册,也可以通过代码来注册.并且有的广播必须通过代码来注册广播接受者. 锁屏和解锁广播 电量改变广播 打开屏幕和关闭屏幕 这里将广播接收者写在服务里面 <? ...

  2. android之广播(一)

    Android中的广播 系统在运行过程中会产生很多事件,某些事件产生的时候,比如:电量的改变,收发短信.拨打电话.屏幕解锁.开机等等,系统会发送广播.只要应用程序接受到这条广播就知道系统发生了相应的事 ...

  3. springMVC之applicationcontext.xml配置说明

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  4. 将Extjs文件拷入eclipse工程下卡死问题

    主要是由于eclipse默认对js文件进行校验,ExtJS中js文件多且庞大造成电脑资源耗尽. 解决方法: 找到工作空间中项目文件夹下的.project文件,将 <buildCommand> ...

  5. 【BZOJ 4598】【SDOI 2016 Round2 Day1 T3】模式字符串

    2016-05-21因为BZOJ上“ 数据文件太过巨大,仅提供前三组数据测试.”所以我考场上写的60分的点分治交上去也A了. 我的这个点分治的时间复杂度是$O(Tnmlogn)$的,听题解时没听懂$O ...

  6. Fresco内存机制(Ashmem匿名共享内存）

    Fresco的内存机制 Fresco是Facebook出品的高性能图片加载库,采用了Ashmem匿名共享内存机制, 来解决图片加载中的OOM问题.这里不对Fresco做深入分析,只关注Fresco在A ...

  7. 【USACO 2.2】Party Lamps

    四种开关,n盏灯,1:改变所有灯状态,2:改变奇数灯状态,3:改变偶数灯状态,4:改变3k+1灯状态 给你按开关的总次数c和部分灯限制条件(开或关),一开始都是开着的.($c \leq 10000,n ...

  8. 输入一个数组，求最小的K个数

    被这道题困了好久,看了剑指Offer才知道OJ上的要求有点迷惑性. 题目: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4. 一 ...

  9. 75.Android之基本架构

    转载:http://www.cnblogs.com/lijunamneg/archive/2013/01/18/2866953.html Android其本质就是在标准的Linux系统上增加了Java ...

  10. [bzoj4552][Tjoi2016][Heoi2016]排序

    Description 给出一个$1$到$n$的全排列,现在对这个全排列序列进行$m$次局部排序,排序分为$2$种: $1.(0,l,r)$表示将区间$[l,r]$的数字升序排序; $2.(1,l,r ...