您好,登錄后才能下訂單哦!
這篇文章主要介紹css3如何加內邊框,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
css3加內邊框的方法:可以通過使用border屬性和box-sizing屬性來加內邊框,如【box-sizing:border-box;】。box-sizing屬性允許以某種方式定義某些屬性,以適應指定區域。
相關屬性:
border屬性允許你指定一個元素邊框的樣式和顏色。
box-sizing 屬性允許你以某種方式定義某些元素,以適應指定區域。
語法:
box-sizing: content-box|border-box|inherit:
屬性值:
content-box 這是 CSS2.1 指定的寬度和高度的行為。指定元素的寬度和高度(最小/最大屬性)適用于box的寬度和高度。元素的填充和邊框布局和繪制指定寬度和高度除外
border-box 指定寬度和高度(最小/最大屬性)確定元素邊框。也就是說,對元素指定寬度和高度包括了 padding 和 border 。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
inherit 指定 box-sizing 屬性的值,應該從父元素繼承
代碼實現:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div.container { width:30em; border:1em solid; } div.box { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; border:1em solid red; float:left; } </style> </head> <body> <div class="container"> <div class="box">這個 div 占據了左邊的一半。</div> <div class="box">這個 div 占據了右邊的一半。</div> </div> </body> </html>
實現效果:
以上是css3如何加內邊框的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。