CSS 邊框實現圓角矩形
阿新 • • 發佈:2019-02-15
<!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>
—————————————————————————————————
本文原創自
本部落格所有原創文章請以連結形式註明出處。
歡迎關注本技術部落格,本部落格的文章會不定期更新。
大多數人想要改造這個世界,但卻罕有人想改造自己。
世上沒有絕望的處境,只有對處境絕望的人。
————By slience
—————————————————————————————————