码迷,mamicode.com
首页 > 其他好文 > 详细

border元素

时间:2017-06-27 10:59:52      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:char   har   div2   技术   doctype   ext   class   tran   gre   

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <style type="text/css">
 7     .div1{width: 200px;height: 200px;border-radius: 40px;background-color: #ccc;}
 8     .div2{width:200px;height: 200px;border-radius: 100px;background-color: #ccc;}
 9     .div3{width:200px;height: 200px;border-radius: 100px 0 100px 0/100px 0 100px 0;/*上左、上右、下右、下左*/background-color: #ccc;}
10     .div4{width:200px;height: 200px;border-radius: 100px 0 100px 100px/100px 0 100px 100px;background-color: #ccc;}
11     .div5{width:200px;height: 100px;border-radius:100px/50px;background-color: #ccc;}
12     .div6{width:100px;height:200px;border-radius:50px/100px;background-color: #ccc;}
13     .div7{width:0px;border:100px solid red;border-top-color: purple;border-left-color: red;border-right-color: yellow;border-bottom-color: green;}
14     .div8{width:0px;border:100px solid yellow;border-right-color: transparent;}//border的四条边其实是四个三角形组成的
15     .div9{width:0px;border:100px solid yellow;border-left-color: transparent;border-radius: 50%;}
16   </style>
17 </head>
18 <body>
19   <div class="div1"></div>
20   <div class="div2"></div>
21   <div class="div3"></div>
22   <div class="div4"></div>
23   <div class="div5"></div>
24   <div class="div6"></div>
25   <div class="div7"></div>
26   <div class="div8"></div>
27   <div class="div9"></div>
28 </body>
29 </html>

效果图:

技术分享

技术分享

border元素

标签:char   har   div2   技术   doctype   ext   class   tran   gre   

原文地址:http://www.cnblogs.com/abyss1114/p/7083793.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!