成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

css3 border-radius box-shadow

baihe / 2684人閱讀

摘要：是的一半半徑至少設(shè)置為的值是向盒子添加陰影。我們來(lái)看下語(yǔ)法軸偏移量軸偏移量陰影模糊半徑陰影擴(kuò)展半徑陰影顏色投影方式參數(shù)介紹注意可以寫(xiě)在參數(shù)的第一個(gè)或最后一個(gè)，其它位置是無(wú)效的。如效果邊框?yàn)檫吙驊?yīng)用圖片

border-radius是向元素添加圓角邊框。

使用方法：

border-radius:10px;/* 所有角都使用半徑為10px的圓角 */

border-radius: 5px 4px 3px 2px;/* 四個(gè)半徑值分別是左上角、右上角、右下角和左下角，順時(shí)針 */

實(shí)心上半圓：

方法：把高度(height)設(shè)為寬度（width）的一半，并且只設(shè)置左上角和右上角的半徑與元素的高度一致（大于也是可以的）。

div{    

height:50px;/*是width的一半*/   

width:100px;    

background:#9da;   

border-radius:50px 50px   0 0;     /*半徑至少設(shè)置為height的值*/   

 }

box-shadow是向盒子添加陰影。支持添加一個(gè)或者多個(gè)。

很簡(jiǎn)單的一段代碼，就實(shí)現(xiàn)了投影效果，酷斃了。我們來(lái)看下語(yǔ)法：

box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴(kuò)展半徑] [陰影顏色] [投影方式];

參數(shù)介紹：

注意：inset 可以寫(xiě)在參數(shù)的第一個(gè)或最后一個(gè)，其它位置是無(wú)效的。

x軸向右為正，y軸向下為正

陰影模糊半徑與陰影擴(kuò)展半徑的區(qū)別

陰影模糊半徑：此參數(shù)可選，其值只能是為正值，如果其值為0時(shí)，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

陰影擴(kuò)展半徑：此參數(shù)可選，其值可以是正負(fù)值，如果值為正，則整個(gè)陰影都延展擴(kuò)大，反之值為負(fù)值時(shí)，則縮?。?/p>

為元素設(shè)置外陰影：

示例代碼：

  .box_shadow{box-shadow:4px2px6px#333333;}

效果：

為元素設(shè)置內(nèi)陰影：

示例代碼：

.box_shadow{box-shadow:4px2px6px#333333inset;}

效果：

添加多個(gè)陰影：

以上的語(yǔ)法的介紹，就這么簡(jiǎn)單，如果添加多個(gè)陰影，只需用逗號(hào)隔開(kāi)即可。如：

 .box_shadow{ 
            box-shadow:4px 2px 6px #f00,-4px -2px6px #000,0px 0px 12px 5px #33CC00 inset;}

效果：

CSS3邊框 為邊框應(yīng)用圖片 border-image

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/112841.html

相關(guān)文章

  • 【css3學(xué)習(xí)系列】之box-shadow,radial-gradient,linear-gradi

    摘要：不在指定漸變區(qū)域的，以距離其最近的顏色填充。設(shè)置漸變?yōu)閺挠业阶?。這是默認(rèn)值，等同于留空不寫(xiě)。最后奉上一碗純拉面。 Talk is cheap.Show me the code. 1.box-shadow showImg(https://segmentfault.com/img/bVypxt); .chopsticks{ position: absolute; ...

    LdhAndroid 評(píng)論0 收藏0

  • CSS3 邊框

    摘要：邊框用，你可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設(shè)計(jì)程序，如。在本章中，您將了解以下的邊框?qū)傩詧A角在中添加圓角棘手。 CSS3 邊框 用 CSS3，你可以創(chuàng)建圓角邊框，添加陰影框，并作為邊界的形象而不使用設(shè)計(jì)程序，如 Photoshop。 在本章中，您將了解以下的邊框?qū)傩裕?border-radius box-shadow border-image CSS3 圓角 在 ...

    Charles 評(píng)論0 收藏0

  • HTML+CSS3再加一點(diǎn)點(diǎn)JS做的一個(gè)小時(shí)鐘

    摘要：原文第一次發(fā)文章，比較激動(dòng)。其實(shí)簡(jiǎn)單點(diǎn)的話直接在里面定好動(dòng)畫(huà)規(guī)則就行了時(shí)針秒旋轉(zhuǎn)度，分針秒針以此類(lèi)推。好了，以上代碼我已經(jīng)放在了上就這些了，獻(xiàn)個(gè)丑，各位輕拍 原文：http://margox.me/css3clock.html 第一次發(fā)文章，比較激動(dòng)。 本碼農(nóng)長(zhǎng)期浸淫于Dribbble等設(shè)計(jì)師網(wǎng)站，看到那些好看的設(shè)計(jì)作品就非常激動(dòng)，但是無(wú)奈PS不精通，AI也早忘光了，只不過(guò)對(duì)...

    YancyYe 評(píng)論0 收藏0

  • CSS魔法堂：Box-Shadow 沒(méi)那么簡(jiǎn)單啦:)

    摘要：陰影距離原位置的垂直位移，正數(shù)表示向下移動(dòng)，負(fù)數(shù)表示向上移動(dòng)。實(shí)現(xiàn)原理純個(gè)人理解創(chuàng)建一個(gè)與元素尺寸一致的陰影盒子將陰影盒子定位到于元素重合，并位于元素之上水平和垂直各畫(huà)兩條線，分別跟元素重合共條分別記為根據(jù)和移動(dòng)。 前言 說(shuō)起box-shadow那第一個(gè)想法當(dāng)然就是用來(lái)實(shí)現(xiàn)陰影，其實(shí)它還能用于實(shí)現(xiàn)其他好玩的效果的，本篇就打算說(shuō)說(shuō)box-shadow的那些事。 二話不說(shuō)看效果 showI...

    Galence 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<