CSS3邊框和圓角——border&radius

時間 2019-11-19

標籤 css3 css 邊框圓角 border&radius border radius 欄目 CSS 简体版

原文原文鏈接

圓角

原理&語法

　　給須要添加圓角的元素設置border-radius屬性，設置後，元素本來方形的角變成圓角的html

　　其中可單獨設置四個邊，也可同時設置（順序爲左上角-右上角-右下角-左下角，即順時針轉動），若是缺失一個值，默認對角線位置值相等瀏覽器

　　單獨設置時，先寫上下（top/bottom），再寫左右（left/right），如border-top-left-radiuside

　　值可爲絕對長度（px）/百分比（以元素高度爲參考）/em（以瀏覽器默認字體大小爲參考）等字體

案例

　　可經過添加before和after僞元素以及position定位，造成一個相似冒泡的對話框ui

　　（此處設置了行高，可是行高的垂直居中對齊效果未顯示）url

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         *{margin:0;padding:0;}
10         div.origin{
11             width:400px;height:150px;
12             border:5px solid black;
13             border-radius:50%;
14             text-align:center;
15             line-height:150px;
16             font:bolder 30px '微軟雅黑';
17             position:absolute;top:50px;left:50px;
18         }
19         div.origin:before,div.origin:after{
20             content:"";
21             width:25px;height:25px;
22             border:2px solid black;
23             border-radius:50%;
24         }
25         div.origin:before{
26             position:absolute;top:150px;left:450px;
27         }
28         div.origin:after{
29             position:absolute;top:200px;left:500px;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="origin">welcome</div>
35 </body>
36 </html>