css3 UI 修飾——回顧，css3ui修飾回顧

css3 UI 修飾——回顧，css3ui修飾回顧

1.box-shadow 屬性向框添加一個或者多個陰影。
　　文法： box-shadow: h-shadow v-shadow blur spread color inset
　　　　h-shadow 必須，水平陰影的位置，允許負值。
　　　　v-shadow 必須，垂直陰影的位置，允許負值。
　　　　blur 可選 模糊距離。
　　　　spread 可選，陰影的尺寸。
　　　　color 可選，陰影的顏色。
　　　　inset 可選，將外部陰影（outset） 改為內容步陰影。
　　樣本：
　　　　<style>
　　　　　　.shadow{width: 300px; height: 150px; margin: 0 auto;}
　　　　　　.shadow img{ box-shadow: 3px 3px 4px #000;}
　　　　</style>
　　　　<div class="shadow">
　　　　　　<img src="1.png">
　　　　</div>
　　結果：

　　　　　　

　　　　

　　樣本：
　　　　<style>
　　　　　　.shadow{width: 300px; height: 150px; margin: 0 auto;
　　　　　　　　background: yellow; box-shadow: 4px 4px 3px #000 inset;}
　　　　</style>
　　　　<div class="shadow">
　　　　</div>
　　結果：

　　　　　　

2.border-radius

　　　　元素添加圓角邊框。
　　　　　　文法：border-radius: 1-4 length | % / 1-4 length | %;
　　　　　　注意：四個值的順序為，左上方，右上方，右下角，左下角。
　　　　　　　　border-radius: 2em 1em 4em / 0.5em 3em;
　　　　　　　　　　等價於：
　　　　　　　　border-top-left-radius: 2em 0.5em;
　　　　　　　　border-top-right-radius: 1em 3em;
　　　　　　　　border-bottom-right-radius:4em 0.5em;
　　　　　　　　border-bottom-left-radius:1em 3em;
　　　　　　　　border-radius支持度百分比值 %
　　　　　　樣本:
　　　　　　　　<style>
　　　　　　　　　　.radius-test1 { width: 100px; height: 100px;
　　　　　　　　　　　　　　　　　　　margin: 0 auto; border: 50px solid #cd0000;
　　　　　　　　　　　　　　　　　　　　border-radius: 50%; }
　　　　　　　　</style>
　　　　　　　　<div class="radius-test1"></div>
　　　　　　結果：

　　　　　　　　

3.border-image
　　元素邊框背景
　　用於設定屬性：
　　　　border-image-source 用在邊框的圖片的路徑
　　　　border-image-slice圖片邊框向內位移
　　　　border-image-width圖片邊框的寬度
　　　　border-image-outset邊框映像地區超出邊框的量
　　　　border-image-repeat 映像邊框是否平鋪（repeated）
　　　　　　　　鋪滿（rounded ）或者展開（stretched）預設。
　　　　邊框將border-image 分成了9部分: border-top-image,border-right-image
　　　　　　border-bottom-image , border-left-image, border-top-left-image
　　　　　　border-top-right-image, border-bottom-left-image,
　　　　　　border-bottom-right-image 位於四個正方向的沒有展示效果，不會平鋪...
　　樣本：
　　　　<style>
　　　　　　.border_image{width:400px; height:100px;border:1em double orange;border-image:url(1.png) 27;}
　　　　</style>
　　　　<div class="border_image"></div>
　　結果：

　　　　

　　樣本：（平鋪 round）
　　　　<style>
　　　　　　.border_image{width:400px; height:100px;border:1em double orange;border-image:url(1.png) 27 round;}
　　　　</style>
　　　　<div class="border_image"></div>
　　結果：

　　　　

　　

　　樣本：（平鋪 repeat）
　　　　<style>
　　　　　　.border_image{width:400px; height:100px;border:1em double orange;border-image:url(1.png) 27 repeat;}
　　　　</style>
　　　　<div class="border_image"></div>
　　結果：

　　　　

4.gradient 漸層

　　分為linear-gradient(線性漸層) 和 radial-gradient (放射狀漸層)

　　　　linear-gradient
　　　　　　文法background: -webkit-linear-gradient( top,#ccc,#000);
　　　　　　　　參數： 共三個參數 第一個參數表示為線性漸層的方向，top是從上往下，
　　　　　　　　　　　　left 是從左至右 如果定義成left top，那就是從左上方到右下角。
　　　　　　　　　　　　第二個和第三個參數分別是起點顏色和終點顏色。
　　　　　　　　樣本：
　　　　　　　　　　<style>
　　　　　　　　　　　　　　.gradient{width:300px; height: 180px;
　　　　　　　　　　　　　　　　background:-webkit-linear-gradient(left,
　　　　　　　　　　　　　　　　red 50px, yellow 200px);}
　　　　　　　　　　</style>
　　　　　　　　　　<div class="gradient"></div>
　　　　　　　　結果：

　　　　　　　　　　

　　　　　　樣本：可以填寫角度
　　　　　　　　<style>
　　　　　　　　　　　　.gradient{width:300px; height: 180px;
　　　　　　　　　　　　　　　　background:-webkit-linear-gradient(45deg,
　　　　　　　　　　　　　　　　red 50px, yellow 200px);}
　　　　　　　　</style>
　　　　　　　　<div class="gradient"></div>
　　　　　　　　結果：

　　　　　　　　　　

　　　　radial-gradient 放射狀漸層。
　　　　　　漸層的形狀是ellipse(表示橢圓形) farthest-cormer(表示到最遠的角落)
　　　　　　文法：radial-gradient(red, green, blue);
　　　　　　樣本：
　　　　　　　　<style>
　　　　　　　　　　　　.gradient{width:300px; height: 180px;
　　　　　　　　　　　　　　background:-webkit-radial-gradient
　　　　　　　　　　　　　　(circle, red, yellow, green);}
　　　　　　　　</style>
　　　　　　　　<div class="gradient"></div>
　　　　　　結果：

　　　　　　　　

　　　　　　樣本：ellipse橢圓
　　　　　　　　　　<style>
　　　　　　　　　　　　.gradient{width:300px; height: 180px;
　　　　　　　　　　　　　　background:-webkit-radial-gradient(
　　　　　　　　　　　　　　　　ellipse, red, yellow, green);}
　　　　　　　　　　</style>
　　　　　　　　　　<div class="gradient"></div>
　　　　　　結果：

　　　　　　　　

　　　　　　樣本： 不同尺寸大小關鍵字的使用。
　　　　　　　　<style>
　　　　　　　　　　.gradient{width:300px; height:180px;background:
　　　　　　　　　　　　　　-webkit-radial-gradient(60% 55%, closest-
　　　　　　　　　　　　　　　　side,blue,green,yellow,black);}
　　　　　　　　</style>
　　　　　　　　<div class="gradient"></div>
　　　　　　結果：

　　　　　　　　　　

　　　　重複的放射狀漸層
　　　　　　repeating-radial-gradient() 函數用於重複放射狀漸層
　　　　樣本：
　　　　　　<style>
　　　　　　　　.gradient{width:300px; height: 180px;
　　　　　　　　　　　　background: -webkit-repeating-radial-
　　　　　　　　　　　　gradient(red, yellow 10%, green 15%);}
　　　　　　</style>
　　　　　　<div class="gradient"></div>
　　　　結果：

　　　　　　

　　　　進度條小效果
　　　　　　<style>
　　　　　　　　.wrap{width:300px;height:25px;
　　　　　　　　　　　　overflow:hidden;border:1px
　　　　　　　　　　　　solid #000;}
　　　　　　　　.box{width:400px;height:30px;
　　　　　　　　　　　　background:-webkit-repeating-
　　　　　　　　　　　　linear-gradient(15deg,green 0,
　　　　　　　　　　　　green 10px,#fff 10px,#fff
　　　　　　　　　　　　20px); transition:3s;}
　　　　　　　　.wrap:hover .box{ margin-
　　　　　　　　　　　　　　left:-100px;}
　　　　　　</style>
　　　　　　<div class="wrap">
　　　　　　　　<div class="box"></div>
　　　　　　</div>
　　　　　結果：

　　　　　　

5.background-origin
　　規定background-position 屬性相對於 什麼位置來定位
　　　　文法：background-origin: padding-box|border-box|content-box;
　　　　　　　　padding-box 背景映像相對於內邊距框來定位。
　　　　　　　　border-box 背景映像嫌貴對於
　　　　　　　　content-box 背景映像相對月內容框來定位
　　　　樣本：
　　　　　　<style>
　　　　　　　　.background_origin{width: 300px;height: 150px;border:1px solid black;padding:35px;background-image:url('1.png');
　　　　　　　　　　　　background-repeat:no-repeat;background-position:left;background-origin:content-box;}
　　　　　　</style>
　　　　　　<div class="background_origin"></div>
　　　　結果：

　　　　　　

6.background-clip
　　規定背景的繪製地區
　　　　值： border-box 背景被裁減到邊框盒
　　　　　　 padding-box 背景被裁剪到內邊距框
　　　　　　content-box 背景被裁剪到內容框
　　　　　　no-clip：從border地區向外裁剪背景。
　　　　樣本：
　　　　　　<style>
　　　　　　　　.background_clip{width:200px;height:50px;padding:50px;background-color:yellow;
　　　　　　　　　　　　　　　　background-clip:content-box;border:2px solid #92b901;}
　　　　　　</style>
　　　　　　<div class="background_clip"></div>
　　　　結果：

　　　　　　

 　　　　demo下載https://github.com/ningmengxs/css3.git