???<head> ???????<meta charset="UTF-8"> ???????<title>练习二</title> ???????<style type="text/css"> ???????????*{ ???????????????margin: 0px; ???????????????padding: 0px; ???????????} ???????????.p1{ ???????????????width: 200px; ???????????????background: rgba(255,255,0); ???????????????border: 1px solid red; ???????????????border-radius: 20px; ???????????????text-align: center; ???????????????margin-top: 10px; ???????????????padding: 20px 0px ; ???????????} ???????????.p2{ ???????????????width: 200px; ???????????????background: rgba(255,255,0); ???????????????border: 1px solid red; ???????????????border-radius: 25px 25px 0px 0px; ???????????????text-align: center; ???????????????margin-top: 10px; ???????????????padding: 20px 0px ; ???????????} ???????????.p3{ ???????????????width: 200px; ???????????????background: rgba(255,255,0); ???????????????border: 1px solid red; ???????????????border-radius: 0px 0px 0px 0px; ???????????????text-align: center; ???????????????margin-top: 10px; ???????????????padding: 20px 0px ; ???????????} ???????????.p4{ ???????????????width: 200px; ???????????????background: rgba(255,255,0); ???????????????border: 1px solid red; ???????????????border-radius: 12px 10px 15px 20px; ???????????????text-align: center; ???????????????margin-top: 10px; ???????????????padding: 20px 0px ; ???????????} ???????????.p5{ ???????????????width: 200px; ???????????????background: rgba(255,255,0); ???????????????border: 1px solid red; ???????????????border-radius: 0px 50px 80px 0px; ???????????????text-align: center; ???????????????margin-top: 10px; ???????????????padding: 20px 0px ; ???????????} ???????</style> ???</head> ???<body> ???????<div class="p1">Example 5</div> ???????<div class="p2">Example 6</div> ???????<div class="p3">Example 7</div> ???????<div class="p4">Example 8</div> ???????<div class="p5">Example 9</div> ???</body></html>
css边框2
原文地址:https://www.cnblogs.com/wwwljcom/p/10315992.html