首页 > 代码库 > border元素
border元素
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元素
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。