今天要做一個圓角矩形的按鈕，於是直接找圓角矩形的css實現方式，搞了半天，雖然也實現效果了，但是很複雜，需要用很多代碼，後來突然想到以前做過的一個邊框效果，也是圓角矩形，於是找了出來，發現這種辦法相當簡單並且效果一點也不差，這裡簡要分享一下。
關鍵區段都有注釋。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head><title>div+CSS圓角矩形</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/CSS">.roundedRectangle{height: 70px; width: 100px;margin-top: 100px;background: #9BD1FA;//背景色border-width: 10px;//邊緣的寬度，如果要分別設定可以這樣：border-width: 15px 5px 15px 5px;依次為上、右、下、左border-style: solid;border-radius: 15px;//圓角的大小border-color: #000 #000 #000 #000;//邊框顏色，依次為上、右、下、左}.roundedRectangle p{margin: 0px auto;padding: 20px;text-align:center;font-size: 20px;letter-spacing:8px;}</style></head><body><div class="roundedRectangle"><p>測試</p></div></body></html> css的邊框還有很多樣式，還可以改變邊框的屬性來實現其他的效果，詳情請看：http://www.w3school.com.cn/css/css_border.asp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
