CSS3邊框

border-radius

設(shè)置邊框圓角

width: 100px;
height: 100px;
border-radius: 50%;
// 相當(dāng)于
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;

border-image

用圖片作為邊框的修飾

box-shadow

邊框陰影效果
box-shadow:inset x-offset y-offset blur-radius spread-radius color
box-shadow屬性至多有6個(gè)參數(shù)設(shè)置

  • 陰影類型:此參數(shù)是一個(gè)可選值暇屋,如果不設(shè)值似袁,其默認(rèn)的投影方式是外陰影;如果取其唯一值inset,就是將外陰影變成內(nèi)陰影
  • X-offset:是指陰影的水平偏移量咐刨,其值可以是正負(fù)值昙衅,如果為正值,則陰影在對(duì)象的右邊定鸟,反之其值為負(fù)值時(shí)绒尊,陰影在對(duì)象的左邊
  • Y-offset:是指陰影的垂直偏移量,其值可以是正負(fù)值仔粥,如果為正值婴谱,則陰影在對(duì)象的底部,反之其值為負(fù)值時(shí)躯泰,陰影在對(duì)象的頂部
  • 陰影模糊半徑:此參數(shù)是可選谭羔,,但其值只能是為正值麦向,如果其值為0時(shí)瘟裸,表示陰影不具有模糊效果,其值越大陰影的邊緣就越模糊
  • 陰影擴(kuò)展半徑:此參數(shù)可選诵竭,其值可以是正負(fù)值话告,如果值為正兼搏,則整個(gè)陰影都延展擴(kuò)大,反之值為負(fù)值是沙郭,則縮小
  • 陰影顏色:此參數(shù)可選佛呻,如果不設(shè)定任何顏色時(shí),瀏覽器會(huì)取默認(rèn)色病线,但各瀏覽器默認(rèn)色不一樣
邊框陰影效果.png

box-sizing:border-box;使用IE盒模型

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末吓著,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子送挑,更是在濱河造成了極大的恐慌绑莺,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件惕耕,死亡現(xiàn)場(chǎng)離奇詭異纺裁,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)司澎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門对扶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人惭缰,你說我怎么就攤上這事傍念∷涨保” “怎么了斩松?”我有些...
    開封第一講書人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵荞彼,是天一觀的道長。 經(jīng)常有香客問我昂羡,道長絮记,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任虐先,我火速辦了婚禮怨愤,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蛹批。我一直安慰自己撰洗,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開白布腐芍。 她就那樣靜靜地躺著差导,像睡著了一般。 火紅的嫁衣襯著肌膚如雪猪勇。 梳的紋絲不亂的頭發(fā)上设褐,一...
    開封第一講書人閱讀 49,036評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼助析。 笑死犀被,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的外冀。 我是一名探鬼主播寡键,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼锥惋!你這毒婦竟也來了昌腰?” 一聲冷哼從身側(cè)響起开伏,我...
    開封第一講書人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤膀跌,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后固灵,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體捅伤,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年巫玻,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了丛忆。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡仍秤,死狀恐怖熄诡,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情诗力,我是刑警寧澤凰浮,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站苇本,受9級(jí)特大地震影響袜茧,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜瓣窄,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一笛厦、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧俺夕,春花似錦裳凸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至悬荣,卻和暖如春菠秒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來泰國打工践叠, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留言缤,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓禁灼,卻偏偏與公主長得像管挟,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子弄捕,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 3.5 CSS3盒子陰影屬性 box-shadow用來定義元素的盒子陰影僻孝。 3.5.1 box-shadow屬性的...
    白小蟲閱讀 267評(píng)論 0 0
  • border css3在很大程度上拓展了border的樣式,讓我們可以做出更加豐富的效果 border-radiu...
    風(fēng)隨風(fēng)去閱讀 395評(píng)論 0 1
  • text-shadow是給文本添加陰影效果守谓,box-shadow是給元素塊添加周邊陰影效果穿铆。隨著HTML5和CSS...
    arlene112閱讀 2,255評(píng)論 0 1
  • border-radius 定義: border-radius屬性是一個(gè)簡寫屬性,用于設(shè)置四個(gè)border-*-r...
    lx_smile閱讀 530評(píng)論 2 3
  • 班里有個(gè)小姑娘斋荞,不愛學(xué)習(xí)荞雏,成績也不好,因此也不太有自信平酿。有一天早上凤优,孩子們?cè)谧x書。一個(gè)男生坐在座位上伸長了脖子沖我...
    周悠悠閱讀 219評(píng)論 0 0