CSS3-border-radius的兼容写法大全

最新推荐文章于 2021-01-08 19:03:16 发布

xing.org1^

最新推荐文章于 2021-01-08 19:03:16 发布

阅读量130

点赞数

文章标签：可视化 html css3 css 计算机视觉

本文链接：https://blog.csdn.net/xingorg/article/details/120427109

版权

<!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>

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4 <meta charset="utf-8" />
 5 
 6 ＜meta name="author" content"郭菊锋,702004176@qq.com"＞
 7 <title>border-radius的兼容写法大全</title>
 8 <style>
 9 .image{
10 　　-webkit-border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch;
11 　　-moz-border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch;
12 　　-o-border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch;
13 　　border-image: url(images/news.png) 20/50px 67px 30px 10px repeat stretch;
14 　　/*border-image: url(图片地址链接) slice/width outset repeat;*/
15 }
16 　　/*slice：边距数值：如果四个一样，就设置一个即可；如果四个不一样，就得设置四个，分别对应上右下左*/
17 　　/*width：必须与slice之间有一个/号，然后同slice一样，设置一个值也可，四个也可但要分别对应*/
18 　　/*outset(有两个值跟在width之后，可以都设置为repeat repeat一样，【这样的话就是也可以只设置一个值】也可以上下repeat左右stretch不一样。){*/
19 　　/*topbottom(上下){repeat(上下平铺);stretch(上下拉伸),round()}*/
20 　　/*leftright(左右){repeat(左右平铺);stretch(左右拉伸),round()}*/
21 　　/*stretch:默认值*/
22 　　/*round:将图像平铺显示，但是如果最后一幅图不能装下，会空出位置出来把能装下的背景图进行拉伸已达到铺满背景的效果 是repeat和stretch的结合.}*/
23 div.radius{
24 　　width:600px;
25 　　height: 750px;
26 　　padding: 30px;
27 　　background-color: rgba(94, 70, 132, 0.87);
28 　　color: #fff;
29 　　font: 20px "微软雅黑";
30 　　-moz-border-radius-topleft: 12px;
31 　　-moz-border-radius-topright: 23px;
32 　　-moz-border-radius-bottomright: 34px;
33 　　-moz-border-radius-bottomleft: 45px;
34 　　-o-border-radius-topleft:12px;
35 　　-o-border-radius-topright:23px;
36 　　-o-border-radius-bottomright:34px;
37 　　-o-border-radius-bottomleft:45px;
38 　　-webkit-border-top-left-radius: 12px;
39 　　-webkit-border-top-right-radius: 23px;
40 　　-webkit-border-bottom-right-radius: 34px;
41 　　-webkit-border-bottom-left-radius: 45px;
42 　　border-top-left-radius: 12px;
43 　　border-top-right-radius: 23px;
44 　　border-bottom-right-radius: 34px;
45 　　border-bottom-left-radius: 45px;
46 
47 }
48 </style>
49 </head>
50 <body>
51 <div class="image">用图片来做边框<br />border-image:url( ) 数值/宽度px stretch;</div>
52 　　<h1>绘制四个不同的圆角边框的写法以及不同的兼容性的写法大集合</h1>
53 <div class="radius">
54 　　<ul>
55 　　　　<li>顺序就是逆时针转圈</li>
56 　　　　<li></li>
57 　　　　<li>border-radius-topleft:12px;</li>
58 　　　　<li>border-radius-topright:23px;</li>
59 　　　　<li>border-radius-bottomright:34px;</li>
60 　　　　<li>border-radius-bottomleft:45px;</li>
61 　　　　<li></li>
62 　　　　<li>或者上面这个写法是错了，虽然书上这么讲，但是软件不这么提示。软件提示正确(在软件中更没有错误符号)如下</li>
63 　　　　<li></li>
64 　　　　<li>border-top-left-radiu:12px;</li>
65 　　　　<li>border-top-right-radius:23px;</li>
66 　　　　<li>border-bottom-right-radius:34px;</li>
67 　　　　<li>border-bottom-left-radius:45px;</li>
68 　　　　<li></li>
69 　　　　<li>-moz-border-radius-topleft:12px;</li>
70 　　　　<li>-moz-border-radius-topright:23px;</li>
71 　　　　<li>-moz-border-radius-bottomright:34px;</li>
72 　　　　<li>-moz-border-radius-bottomleft:45px;</li>
73 　　　　<li></li>
74 　　　　<li>-o-border-radius-topleft:12px;</li>
75 　　　　<li>-o-border-radius-topright:23px;</li>
76 　　　　<li>-o-border-radius-bottomright:34px;</li>
77 　　　　<li>-o-border-radius-bottomleft:45px;</li>
78 　　　　<li></li>
79 　　　　<li>-webkit-border-top-left-radius:12px;</li>
80 　　　　<li>-webkit-border-top-right-radius:23px;</li>
81 　　　　<li>-webkit-border-bottom-right-radius:45px;</li>
82 　　　　<li>-webkit-border-bottom-left-radius:34px;</li>
83 　　　　</ul>
84 
85 </div>
86 
87 <p>20160810 00:40-xing.org1^</P>
88 </body>
89 </html>

可视化代码