<!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. DB2和Oracle区别

    转 http://blog.chinaunix.net/uid-7374279-id-2057574.html 写在前面:今天客户来访(日本人),问我DB2和Oracle区别.因为不是DBA(勉强的理 ...

  2. 网页设计：Meta标签详解

    很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...

  3. BroadcoastReceiver之短信到来监听和获取内容

    废话就不说了,新建类继承,然后配置Manifest.xml:如下 <!--需要给一个接收短信的权限 --> <uses-permission android:name="a ...

  4. 【CSS】 background

    background: #22b4ff //背景色 url("http://images.cnblogs.com/cnblogs_com/oiliu/529256/o_titleIMG.jp ...

  5. C# 多线程防止卡死

    软件界面的响应特性是判断一款软件的非常重要的方面.一般来说,不管你软件功能做得有多么奇妙,如果软件有一点点死机的感觉都会让用户感到很讨厌,甚至怀疑你软件里是否藏有更大的问题. 要提高界面的响应特性,最 ...

  6. HTML5基础知识（3）--required属性

    1.required属性规定在提交之前要填写输入域(不能为空). 2.代码 <body> <form> 账号:<input type="text" r ...

  7. MyBatis学习总结

    1.引入jar包到lib目录下:只需要mybatis的一个mybatis.jar及数据库的jar包. 2.在src下新建xml配置文件,即上图中的conf.xml <?xml version=& ...

  8. 稻壳图文模块调不出html代码

    <?php doc_article('1',20,0,0,0,266,true,true,'id',0)?> 图文调用,倒数第三个参数,官方说是是否显示html代码,但是实测是没用的,不过 ...

  9. LightOJ 1341 唯一分解定理

    Aladdin and the Flying Carpet Time Limit:3000MS     Memory Limit:32768KB     64bit IO Format:%lld &a ...

  10. Jquery-选择框点击勾选或者取消

    1:单选框,直接定位到属性名称 $(document).ready(function(){ var old = null; //用来保存原来的对象 $("input[name='sex']& ...