Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
css中一般用border來表示邊框。
首先設(shè)置一個(gè)寬500像素,高500像素的方框,把它的背景色設(shè)置為紅色red。
我們給他加上邊框,設(shè)置10像素、實(shí)心的顏色設(shè)置為藍(lán)色。瀏覽器打開樣式如下。
加入邊框的顯示效果
邊框除了這種組合寫法外,還可以分別設(shè)置它的屬性。看下面代碼,顯示效果和上面一樣。
border-width 邊框?qū)挾取?/p>
border-style 邊框樣式 solid 實(shí)線 dashed虛線 dotted點(diǎn)線 等等。
border-color 邊框顏色 可以用英文單詞、十六進(jìn)制、rgb表示
邊框樣式為虛線的效果
邊框的大小可以設(shè)置一樣大,也可以分別設(shè)置四個(gè)邊的大小,設(shè)置四個(gè)邊的順序一般為:上、右、下、左
上面代碼中 top代表上為10像素,right代表右為30像素,bottom代表下為60像素,left代表左為90像素。
四個(gè)邊的大小可以分別設(shè)置為,它的顏色也可以設(shè)置為多種樣色
當(dāng)我們把背景寬 高設(shè)為0像素,把四個(gè)邊框設(shè)為200像素,就會看到四個(gè)三角形。
border-radius:100px 是設(shè)置圓角的屬性。
設(shè)置為100像素,就會變成圓形
設(shè)置為50像素
transparent 是一個(gè)透明的效果
我們把邊框的右邊設(shè)置為transparent 右邊框就會變成透明,看不到以前的黃色。
面文章也有介紹關(guān)于css想關(guān)文章:
《你未必知道的49個(gè)CSS知識點(diǎn)》
《手把手整理CSS3知識匯總【思維導(dǎo)圖】》
《妙用CSS變量,讓你的CSS變得更心動》
《手把手教你55 個(gè)提高CSS 開發(fā)效率的必備片段》
《關(guān)于前端CSS寫法104個(gè)知識點(diǎn)匯總(一)》
《關(guān)于前端CSS寫法104個(gè)知識點(diǎn)匯總(二)》
作者:貴在隨心
轉(zhuǎn)載鏈接:https://www.jianshu.com/p/273e77cb99c6#fnref2
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。