梅花的CSS筆記｜CSS3 border-radius 讓邊框的邊角更多的變化 @ 梅花問路

CSS3 border-radius 來測試讓邊角變圓角!!

本篇文章的課本是這幾篇CSS3 圓角 border-radius、CSS3 邊框設計、CSS span 區域邊框顏色與樣式設計、CSS border-style 邊框樣式

覺得把這個技巧學起來，以後引用文字或是想要標註重點，就可以用上這個語法技巧囉!

首先要先定義邊框用的樣式屬性(引用出處:CSS span 區域邊框顏色與樣式設計)

實作: <div style="border-width:1px;border-style:dashed;border-color:#7D7DFF;padding:5px;width:400px;">輸入框框裡面要放的文字;</div>

CSS border 邊框屬性語法 border: 粗細顏色樣式;

常用 CSS border-style 樣式表(引用出處:CSS border-style 邊框樣式看更多用法請至這篇裡面詳讀)

border-style:solid;	border-style:dotted;	border-style:dashed;
border-style:double;	border-style:outset;	border-style:groove;
border-style:ridge;	border-style:inset;	border-style:none;

實際測試:

原始在課本裡面的語法是這樣 (引用出處:CSS3 圓角 border-radius)

<div style="border:2px #ccc solid;border-radius:10px;width:360px;height:60px;background-color:#eee;">CSS3 border-radius 圓角範例</div>

我亂玩XD

測試疊兩層不同的

用我喜歡的顏色多疊幾層

用裡面的粉紅色 #FF60AF 做成有邊角的邊框，自己加進去border-radius屬性

<div style="border-width:2px;border-style:dashed;border-color:#FF60AF;padding:5px;width:250px; border-radius:10px;">加入圓角屬性</div>

加入圓角屬性

再玩了兩種

大家可以自行前往網站看更多詳細的說明和範例

CSS3 圓角 border-radius、CSS3 邊框設計、CSS span 區域邊框顏色與樣式設計、CSS border-style 邊框樣式

封面的範例來自課本 CSS3 圓角 border-radius (以下純測試亂玩，這個框框的寬高是可以自行去設定的)

<div style="border: 2px solid rgb(204, 204, 204); border-radius: 10px; width: 360px; height: 30px; background-color: rgb(238, 238, 238); text-align: center;">CSS3 border-radius 來測試讓邊角變圓角!!</div>

text-align: center; 是置中的意思，如果你不要置中，就把這段語法拿掉

background-color: 這裡原本課本裡面的教學是設定 #eee

hex: #EEEEEE
rgb(238, 238, 238)
hsl(0, 0%, 93%)

語法裡面的 border-radius: ;就是在設定邊角的弧度(引用出處:CSS3 圓角 border-radius)

四個角的語法	意義
border-top-left-radius	設定左上角
border-top-right-radius	設定右上角
border-bottom-right-radius	設定右下角
border-bottom-left-radius	設定左下角

一次設定四個角就直接給 border-radius: 就好了

如果想要讓這個框框有更多的變化: 光暈、陰影、框線顏色、框線背景色等等的變化，請直接參考這篇CSS3 邊框設計

梅花的語法筆記

檢視CSS標籤F12	文章區塊 #content
＊開發人員工具＊	＊改文章標題字體、背景＊
部落格整體 #body	＊改行距、邊界＊ ⛔
＊換背景底圖＊	公告版面 #spotlight
＊換字體＊	＊公告版面應用＊
＊換部落格ICON＊	實用推薦
＊設計LOGO＊	＊讓部落格可以被Google＊
封面橫幅#banner/#header	＊Google Analytics分析＊
＊換封面底圖＊	其他應用
＊部落格標題敘述大小位置＊	＊梅花的語法筆記本＊
側欄區塊 #links	＊文章內的目錄(錨點)＊
＊改側欄標題的背景＊	＊關閉遮蓋版面的廣告＊
＊Facebook粉專外掛＊	＊隱藏上方藍色選單＊
＊音樂外掛＊	＊連結Google相簿＊
＊YouTube外掛＊	＊圖片瘦身不失真＊
＊分享連結階層＊