圓角邊框屬性
作者:zhushican 丨 時間:2022年08月11日 丨 分類：六六互聯
圓角邊框屬性
通過border-radius：設置邊框圓角。如下案例3-12所示。
例3-12 example12.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div1{ float: left;width:200px; height:100px;border:2px solid red; } #div2{ margin: 10px; float: left; width:180px;height:80px; border:2px solid red;padding:10px; border-radius:20px;/*設定一個值會同時設定四個角的圓角成都*/ /*如果圓角的半徑相同，每個值可以只寫一個參數,X相當于寫2個一樣的參數 例如 30px/30px 和30px 是等同的*/ } #div3{float: left;width:200px;height:100px;border:2px solid red; border-radius:100px/50px } </style> </head> <body> <div id="div1"> 圓角屬性設定方法---普通邊框 </div> <div id="div2">圓角屬性設定方法---圓角邊框</div> <div id="div3">圓角屬性設定方法---橢圓邊框</div> </body> </html> |
運行3-12，效果如圖3-14所示。
圖3-14 border-radius設置邊框的圓角屬性
4. box-shadow
向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。
下列案例3-13所示，通過box-shadow設置對象陰影。
例3-13 example13.html
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <style type="text/css">/*定義圖片的陰影效果樣式*/ img {float: left;box-shadow: 2px 2px 30px #06C;height: 240px;} /*定義<div>標記的陰影效果樣式*/ div {float: left;padding: 5px;margin: 50px;height: 50px; width: 150px;background-color: #CCC; -webkit-box-shadow: 2px 2px 20px #06C; box-shadow: 2px 2px 20px #06C; }/*定義文本的陰影效果樣式*/ p { text-shadow: 10px 10px 20px #06C; } </style> </head> <body> <img src="img/bg.jpg"/> <div></div> <p>添加陰影效果</p> </body> </html> |
運行3-13，效果如圖3-15所示。
圖3-15 box設置對象的陰影顯示效果
邊框圖片屬性
服務器租用娔娕娖美國仿牌vps推薦抗投訴仿牌空間主機,國外歐洲荷蘭仿牌服務器,外貿免投訴防投訴vps主機空間
