html - css 使用 邊框 border 的時候,怎么讓他作為內邊框。

問題描述

.bk{border-style:solid;border-width:10px;border-color:red;}

這個,怎么讓他朝內?就是不改變寬度高度?

問題解答

box-sizing:border-box;IE8下不支持

box-sizing:border-box;

沒有css屬性可以直接做成你想要的那種效果哦，你只能模擬哈

style='

border-bottom: 50px solid red;border-top: 50px solid blue;border-left: 50px solid white;border-right: 50px solid black;height: 0;width: 0;

'

高寬不變改變padding設置邊框

有兩種實現的方案，第一種使用css 偽類

.bk{position: relative;width:100px;height:100px; } .bk:before{content:'';position: absolute;top:0;left:0;width:98px;height:98px;border:1px solid #666; }

第二種使用 box-shadow 盒子陰影的內陰影，具體代碼就不貼了，如果不懂的話就自己去學習吧。如果題主是因為寫了邊框而造成了布局被撐壞，就需要去了解元素的盒子模型是怎么計算的了。