手工SEO

手工SEO首頁 帝國教程 正文

Html5第九課新增的CSS3的邊框屬性

手工SEO 2020-02-28 20:46:39 帝國教程 76℃ 手工SEO
CSS3 新增的邊框屬性 屬性 版本 簡介
1、border-image CSS3 設置或檢索對象的邊框使用圖像來填充
border-image-source CSS3 設置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑,值有none和<url>
border-image-width     CSS3 設置或檢索對象的邊框厚度
border-image-slice     CSS3 設置或檢索對象的邊框背景圖的分割方式
border-image-outset CSS3 設置或檢索對象的邊框背景圖的擴展
border-image-repeat CSS3 設置或檢索對象的邊框圖像的平鋪方式
 
實例:
<style>
.img{
width:300px;
height:300px;
border-image-source:url(images/border1.jpg);  /*作為背景的圖片,最好做成九宮圖的樣式,每個部分做成相同的*/
border-image-width:19px;          /*邊框寬度,就是九宮圖的九分之一的寬度*/                
border-image-slice: 19;            /*切割時,按照多少的像素切割,注意這里面還有個fill的值,用九宮圖中心圖像填充div的中間背景*/
border-image-outset:0px;         /*背景向div的外部擴展多少像素*/
border-image-repeat:repeat;       /*背景是否重復,這里有默認拉伸stretch,重復repeat,平鋪鋪滿round不過這種方法暫時只在火狐中顯示,平鋪鋪滿space不過這種方式暫時沒有瀏覽器支持*/
}
 
</style>
<div class="img">
    這里是邊框測試
</div>

 
 
2、border-radius         CSS3 設置或檢索對象使用圓角邊框
border-top-left-radius CSS3 設置或檢索對象左上角圓角邊框
border-top-right-radius CSS3 設置或檢索對象右上角圓角邊框
border-bottom-right-radius CSS3 設置或檢索對象右下角圓角邊框
border-bottom-left-radius CSS3 設置或檢索對象左下角圓角邊框
實例:
<style>
.img{
width:300px;
height:300px;
border:1px solid #F00;
/*border-radius:10px;     div的四個角的圓角半徑都是10px*/
/*border-radius:10px/20px;  設置四個角半徑的方法之一*/
/*border-top-left-radius:10px 20px;   div的左上角的圓角半徑是10px和20px,其他角也可以這樣設置*/
/*border-radius:10px 20px 30px 40px/10px 20px 30px 40px;  設置四個圓角半徑也可以簡寫成這樣*/
}
</style>
<div class="img">
    這里是邊框測試
</div>

 
 
3、box-shadow CSS3 設置或檢索對象陰影
取值:
none: 無陰影 
<length>①: 第1個長度值用來設置對象的陰影水平偏移值。可以為負值 
<length>②: 第2個長度值用來設置對象的陰影垂直偏移值。可以為負值 
<length>③: 如果提供了第3個長度值則用來設置對象的陰影模糊值。 
<length>④: 如果提供了第4個長度值則用來設置對象的陰影外延值。
<color>: 設置對象的陰影的顏色。
inset: 設置對象的陰影類型為內陰影。該值為空時,則對象的陰影類型為外陰影 

實例:
<style>
.img{
width:300px;
height:300px;
border:1px solid #F00;
box-shadow:10px 10px 10px 10px  #F00;
}
 
</style>
<div class="img">
    這里是盒子陰影測試
</div>

 
4、box-reflect   CSS3 設置或檢索對象的倒影
格式:
1.none 
2.位置 偏移? 漸變圖片?
 
 
取值:
位置: above(上)、below(下)、left(左)、right(右)
偏移: 用長度值來定義倒影與對象之間的間隔。可以為負值
漸變圖片: 設置倒影使用的圖片或者漸變,遮罩效果,默認為原內容,
漸變:linear-gradient(top,transparent,#FFF)
 
注意:該屬性目前僅webkit內核瀏覽器(chrome/safari/獵豹等)支持,所以要加-webkit-前綴 。
 
實例:
<style>
img{
width:150px;
/*-webkit-box-reflect:right;   box-reflect倒影效果,的取值above,below,left,right*/
/*-webkit-box-reflect:below 10px;  10px是圖片和倒影直接的距離*/
/*-webkit-box-reflect:below 2px  -webkit-linear-gradient(top,transparent,#FFF);   倒影漸變效果*/
-webkit-box-reflect:below 2px  -webkit-linear-gradient(top,transparent 50%,#FFF); /*倒影只顯示50%的漸變效果*/
margin:100px 0px 0px 200px;
}
</style>
<div>
   <img src="images/1.jpg" />
</div>
 

上一篇:怎樣制作wap網站

下一篇:Html5第五課智能的表單應用

網站分類
標簽列表
德甲排行榜 海南4+1开奖号码 新疆11选5开奖信息 银行基金配资业务 江西多乐彩开奖走势图 广东麻将买马 体彩排列五走势图 手机麻将输赢规律 精准24码单双必中特 四川快乐十二今日走势 贵州快三开奖号码 棋牌娱乐在线看片 上海十一选5走势图 下载熊猫四川熊猫麻 云南11选5必赢打法 豪利棋牌最新下载 网易三星组选