|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 今天將和大家分享css3中邊框屬性的用法,具有一定的參考價值,希望對大家有所幫助。CSS3中的邊框增加了許多新的功能,使我們的邊框設計變得更加好看,接下來將在文中詳細的為大家介紹幾種邊框的用法 css3邊框 (1)邊框陰影 box-shadow:h-shadow v-shadow blur spread color inset h-shadow ,v-shadow:水平和垂直方向的陰影位置,可以寫負值 blur :模糊距離(值越大越模糊)。 spread:陰影的尺寸 color :陰影的顏色 inset:將外部陰影 (outset) 改為內部陰影 前面兩個值是必選的,后面四個值是可選的 div{
width:100px;
height: 100px;
background-color: pink;
box-shadow:10px 10px 10px gray;
}
(2)邊框圖片 border-image:src slice width outset repeat src : 圖片的路徑。 slice:圖片邊框向內偏移。 width:圖片邊框的寬度。 outset:邊框圖像區域超出邊框的量。 repeat:圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched) 注意瀏覽器兼容問題 div{
border:20px solid transparent;
width:100px;
height:50px;
line-height: 50px;
text-align: center;
padding:10px 20px;
border-image:url(images/12.png) 50 50 round;
-moz-border-image:url(images/12.png) 50 50 round; /* Firefox */
-webkit-border-image:url(images/12.jpg) 50 50 round; /* Safari 和 Chrome */
-o-border-image:url(images/12.png) 50 50 round; /* Opera */
}
(3)邊框圓角 border-radius div{
width:150px;
height:30px;
border:2px solid #ccc;
border-radius:25px;
line-height: 30px;
text-align: center;
}
總結:以上就是本篇文章的全部內容了。希望對大家有所幫助。 以上就是CSS3中邊框屬性如何使用的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!